Programming/HTML5 & CSS3

[CSS] 리스트 스타일 - 가로 리스트 빈 공간 없이 배경색 채우기

hi-choi 2020. 12. 22. 01:27

가로 리스트를 만든 후에 배경색을 지정하면 리스트의 경계에 빈공간이 발생하고 리스트가 끝나는 지점까지만 배경색이 채워지는 것을 볼 수 있습니다. 이 때, 리스트의 경계를 포함해 가로 리스트가 있는 줄의 배경색을 모두 채우기 위해서는 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>

 

 

결과 화면