가로 리스트를 만든 후에 배경색을 지정하면 리스트의 경계에 빈공간이 발생하고 리스트가 끝나는 지점까지만 배경색이 채워지는 것을 볼 수 있습니다. 이 때, 리스트의 경계를 포함해 가로 리스트가 있는 줄의 배경색을 모두 채우기 위해서는 li의 background-color 속성이 아닌 ul 또는 ol의 background-color 속성의 값을 변경해야합니다.
가로 리스트가 있는 줄 배경색 모두 채우기
아래의 css 코드 처럼 ul의 background-color의 값을 원하시는 색의 색상코드로 지정해주세요.
css 코드
ul {
background-color : #a1fffa;
}
li {
display : inline-block;
color : #0400ff;
background-color : #a1fffa;
}
html 코드
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>리스트</h3>
<ul>
<li>첫번째 목차</li>
<li>두번째 목차</li>
<li>세번째 목차</li>
</ul>
</body>
결과 화면
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [HTML] input 태그 사용해 사용자 입력 받기 (0) | 2021.01.22 |
|---|---|
| [HTML] form 만드는 법 (0) | 2021.01.21 |
| [CSS] 리스트 스타일 - 가로 리스트 만들기, 리스트 색 변경 (0) | 2020.12.21 |
| [CSS] 리스트 스타일 - 불릿, 숫자 변경 및 제거 (0) | 2020.12.20 |
| [HTML] 리스트로 목차 만드는 법 (0) | 2020.12.19 |
