라벨이 리스트태그인 게시물 표시

CSS 리스트 스타일 ul, ol, li 목록 태그 list-style 속성 정리

이미지
리스트 불릿, 번호 스타일 변경 list-style-type 속성 ul 태그는 순서 없는 리스트를 작성할 때, 사용하는데, 리스트 목록 앞에 불릿(가운뎃점) 모양이 붙게 되는데, 기본값은 검은색으로 채워진 원 모양입니다. ol 태그의 경우에는 순서가 있는 리스트를 만들 때 사용하며, 기본값은 10진수 숫자로 표현을 하게 됩니다. CSS의 list-style-type 속성을 사용하면 기본값으로 사용되는 기호 외에 다른 기호를 사용할 수 있습니다. list-style-type 속성값 속성값 모양 기호 disc 채운 원 모양 ● circle 빈 원 모양 ○ square 채운 사각형 모양 ■ decimal 1부터 시작하는 10진수 1, 2, 3 decimal-leading-zero 앞에 0이 붙은 10진수 01, 02, lower-roman 로마 숫자 소문자 upper-roman 로마 숫자 대문자 lower-alpha, lower-latin 알파벳 소문자 a, b, c upper-alpha, upper-latin 알파벳 대문자 A, B, C none 블릿이나 숫자를 없앰 속성값의 none을 사용하게 되면 블릿 기호 또는 숫자를 없애게 되는데 해당 속성값을 사용 후 리스트 태그로 메뉴 구성을 할 때 자주 사용되는 속성값입니다. list-style-type 예제 < style >         ul   {             list-style-type : square ;         }         ol   {             list-style-type : lower-roman ;         }     </ style > </ head > < body >         < ul >         < li > 삼국지 </ li >         < li > 대도시의사랑법 </ li >         < li > 소나기 </ li &

HTML 리스트(ol, ul, li) 태그와 키와 값의 맵구조(dl, dt, dd) 태그로 리스트와 맵구조 만들기

HTML 리스트 목록 만들기(ol, ul, li) HTML 문서 작성의 목록을 만들 때 목록의 스타일에 따라서 ol, ul 태그를 사용합니다.  ol 태그 는 숫자 및 알파벳 기호를 사용해서 순서가 있는 리스트 작성에 사용 됩니다. 단계적인 리스트가 필요하거나 순서가 의미가 있는 리스트에는 ol 태그를 사용해서 정의해야 합니다. ol 태그의 type 속성을 이용하면 순서를 매기는 기호를 변경할 수 있습니다.  <ol type="1"> 와 같이 선언하시면 됩니다. ol 태그 type 속성값 속성값 표현식 1 1, 2, 3 a a, b, c A A, B, C i i, ii, iii I I, II, III ul 태그 는 순서와 상관없고 정렬이 필요 없는 리스트를 작성 할 때 ul 태그를 사용하면 됩니다. 웹사이트의 메뉴 구성 및 이미지를 여러 장 보여줄 때, ul 태그를 사용해서 목록화하면 각 요소 정렬 및 그룹화하기 좋기 때문에 빈번하게 사용하는 태그 입니다. ol 태그와 ul 태그 안에 또다시 ol 태그와 ul 태그 등을 선언해서 중첩 선언하는 것이 가능합니다. li 태그는 ol 태그와 ul 태그 안에 정의되어 각 목록 하나하나를 나타내는 태그 입니다. 리스트 태그(ol, ul, li) 사용법 순서가 있는 ol 태그 사용 예시 <ol>   <li>개회식</li>   <li>개회</li>   <li>행사진행</li>   <li>폐막식</li> </ol> 순서가 있는 ol 태그 사용 결과 개회식 개회사 행사진행 폐막식 순서가 필요없는 ul 태그 사용 예시 <ul>   <li&g