본문 바로가기
IT 개발/ HTML , CSS

li태그 메뉴 가로로 배열하기

by Love of fate 2020. 9. 24.
728x90
반응형

* 홈페이지를 들어가 보면 menu들이 가로로 나열되어 있는데 UL, LI로 배열해 놓은 경우가 있다. 

* list 태그에는 UL, LI가 있는데 함께 묶어쓰는 태그이다.


[태그 설명]

* UL : Underline List => ● ●.....

* OL : Orderline List => 1. 2. 3. 4. ....

* LI : List 


[사용법]  [UL, LI], [OL, LI] 는 함께쓰는 태그이다. 

EX)

UL, LI

 -- 1. 2. 3.으로 표현하고 싶을땐 UL자리에 OL로 고쳐주면된다. 


* 세로로 나열되어 있는 LIST를 가로로 변경해주기 위해선 CSS STYLE 적용이 필요하다. 

list-style : none 은 1.2.3. 또는 ● 표시를 아예 없애기 위한 css이다. 

UL과 LI의 margin과 padding을 0px로 설정해주면 list가 가로로 나열된다. 

여기서 margin-right를 준 이유는 글씨 가독성을 위해 떨어뜨리기위해 사용한 것이다.

css 적용 결과

728x90
반응형

'IT 개발 > HTML , CSS' 카테고리의 다른 글

글자 서식 관련 태그 - <Strong> <u> <mark>  (0) 2020.10.07
<iframe> 태그  (0) 2020.10.07
12.02 overFlow  (0) 2019.12.02
11.07 문서모드  (0) 2019.11.07
11.06  (0) 2019.11.06