어제 오늘 내일

[HTML] 순서없는 목록 만들기, <ul><li> 태그 본문

IT/HTML&CSS

[HTML] 순서없는 목록 만들기, <ul><li> 태그

hi.anna 2017. 7. 26. 06:47


이번에는 HTML에 순서없는 목록을 표현하는 방법을 알아보도록 하겠다.



순서없는 목록 만들기, <ul> <li> 태그

html에서 목록을 만들기 위해서는 

<ul> <li> 두 가지 태그를 사용해야 한다.


<ul>은 'Unordered List'의 약자이고,

<li>은 'List'의 약자이다.


<li></li> 태그 안에는 목록을 만들 각각의 항목들을 작성하고,

이 <li></li> 태그들을 <ul></ul> 태그로 감싸면 목록이 만들어진다.


See the Pen 리스트1 by anna (@hianna) on CodePen.

각각의 항목들은 위와 같이 항목 앞에 항목을 구분하는 기호가 나타난다.




목록 기호 변경하기

이번에는 이 기호들을 변경하는 방법을 알아보도록 하자.


목록 기호를 변경하기 위해서는 css의 'list-style-type' 속성을 지정해주면 된다.

list-style-type 속성에 들어 갈 수 있는 값은 다음과 같다.


 disc

 속이 채워진 원형의 기호(default)

 circle

 속이 비워진 원형의 기호

 square

 사각형의 기호

 none

 기호가 보이지 않는다.


속이 채워진 원형의 기호 예시

See the Pen 리스트2 by anna (@hianna) on CodePen.




속이 비워진 원형의 기호 예시

See the Pen 리스트3 by anna (@hianna) on CodePen.




사각형의 기호 예시

See the Pen 리스트4 by anna (@hianna) on CodePen.




기호가 보이지 않도록 한 예시

See the Pen 리스트5 by anna (@hianna) on CodePen.


list-style-type의 값을 지정하지 않으면, 

기본으로 disc 값이 지정된다.

반응형
Comments