css background 프로퍼티로 리스트와 아이템에 배경 지정하기
네 안녕하세요, 이번 포스팅에서는 리스트 또는 리스트 내에 있는 아이템에 배경을 지정하는 것을 해보겠습니다.
background 프로퍼티가 이전에 제가 작성했던 포스팅에서 배경색을 지정하는 프로퍼티라고 했었죠?
리스트와 리스트에 있는 아이템에도 배경색을 지정할 수 있습니다.
그럼 이걸 어떻게 하는지 한 번 직접 해보도록 하겠습니다.
그리고 background 프로퍼티에 대하여 잘 모르시겠다면 제가 아래에 제 포스트 링크를 걸어두도록 하겠습니다.
2023.04.02 - [html, css, 자바스크립트] - css background 단축 프로퍼티 이용하여 배경 제어하기
css background 단축 프로퍼티 이용하여 배경 제어하기
css background 단축 프로퍼티 이용하여 배경 제어하기 네 안녕하세요, 이번 포스팅에서는 배경 제어 단축 프로퍼티로 배경을 제어해 보도록 하겠습니다. 저번 포스팅에서는 배경 제어 프로퍼티의
funnycoderl.tistory.com
1. background 프로퍼티로 리스트/아이템 배경 제어하기
background 프로퍼티로 리스트와 아이템의 배경을 제어하는 방법은 아래와 같습니다.
ul {
background : goldenrod;
padding : 10px 10px 10px 50px;
}
ul li {
background : greenyellow;
margin-bottom : 5px;이렇게 작성을 할 수 있습니다.
여기서 li 태그의 부모 태그가 ul이기 때문에 저렇게 상속이 되었다는 표시를 해줘야
색깔이 지정이 됩니다.
그럼 이를 이용해서 간단한 예제를 한 번 작성해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 꾸미기</title>
<style>
ul {
background : goldenrod;
padding : 10px 10px 10px 50px;
}
ul li {
background : greenyellow;
margin-bottom : 5px;
}
</style>
</head>
<body>
<h3>커피 메뉴</h3>
<hr>
<ul>
<li>Espresso</li>
<li>Cappuccino</li>
<li>Cafe Latte</li>
</ul>
</body>
</html>이제 결과를 보도록 하겠습니다.
이렇게 결과가 나온 것을 확인하실 수 있습니다.
여기까지 리스트와 리스트 속에 있는 아이템의 배경을 지정하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 마커의 위치를 지정하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css list-style-type 프로퍼티 이용하여 마커의 종류 지정하기 (0) | 2023.04.24 |
|---|---|
| css list-style-position 프로퍼티로 마커 위치 조정하기 (0) | 2023.04.24 |
| css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 (0) | 2023.04.24 |
| css overflow 프로퍼티로 콘텐츠 자르기 (0) | 2023.04.24 |
| css visibility 프로퍼티로 태그 숨기거나 공개하기 (0) | 2023.04.24 |
댓글