[HTML] HTML ul 태그의 스타일 변경(아이콘, 배열, 글자색, 크기, 글씨체, 배경색 변경)

ul 태그

ul(unordered list) 태그는 순서가 없는 비순서형 목록을 생성할 때 사용하며 목록 내용은 li(list item)태그로 구성한다.

형식)	<ul>
		<li>목록 내용 1</li>
	        <li>목록 내용 2</li>
	   	...........
	        <li>목록 내용 n</li>
       </ul>

코드 예시와 결과물

ul 태그는 중첩해서 사용할 수 있는데 중첩시 초기 설정은 내부 태그는 흰 원 아이콘으로 변경된다.

중첩 코드 예시 및 결과

 

<ul> 태그의 기본 검은 원은 style 속성에 list-style-type 속성값을 삽입해서 작성한다.

 

# ul 태그 목록 디자인

1. none : 목록 항목에 기호를 표시 하지 않는다.

<ul style="list-style-type: none;">

 

2. disc : 목록 항목을 원으로 표시한다.(기본값)

<ul style="list-style-type: disc;">

 

3. circle : 목록 항목을 원 내부만 표시한다.

<ul style="list-style-type: circle;">

 

 

4. square : 목록 항목을 사각형으로 표시한다.

<ul style="list-style-type: square;">

 

5. decimal : 목록 항목을 숫자로 표시한다.

<ul style="list-style-type: decimal;">

 

 

 

# ul 태그 가로 배열

li {
 display: block;
 float: left; // 요소들 왼쪽 정렬
 margin-right: 10px; // 요소들 사이의 간격 설정
 }

 

 

# ul 태그 글자색 변경

 ul 태그 글씨색 변경은 style 속성에 color 속성값을 추가해서 변경한다

ul {
  color: red; /* 글자색을 빨간색으로 변경 */
}

위의 방법처럼 스타일 태그에 지정하여 변경할 수 있지만 아래의 코드처럼 ul 태그에 직접적으로 지정할 수 있다.

 

 

# ul 태그 글자크기 변경

 ul 태그 글씨색 변경은 style 속성에 font-size 속성값을 추가해서 변경한다

1. 픽셀(px)
"font-size: 25px;"

2. 상대적 크기(em)
"font-size: 1.2em;"  // 부모 요소의 폰트 크기보다 1.2배 크기

3. 상대적 크기(rem)
"font-size: 1.2rem;" // 이반적으로 html 의 폰트 크기에 대한 상대적인 1.2배 크기

4. 백분율(%)
"font-size: 120%;" // 부모 요소의 폰트 크기보다 120% 크기

 

 

# ul 태그 배경색 변경

 ul 태그 글씨색 변경은 style 속성에 background-color 속성값을 추가해서 변경한다

ul {
  background-color: yellow; /* 배경색을 노란색으로 변경 */
}

 

 

# ul 태그 글씨체 변경

 ul 태그 글씨색 변경은 style 속성에 font-family 속성값을 사용해서 변경한다

ul {
  font-family: "궁서;" // 글꼴을 궁서로 변경한다.
}