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

이번에는 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 값이 지정된다.