부모에 hover 되었을 때 자식요소가 바뀌도록 할 수 있다.
div{
}
.부모:hover div{
/*부모에 hover되었을 때 변경 요소*/
}
<배경 사진이 크기가 레이아웃 크기 맞지 않을 때>
object-fit: cover;
object-position : center 00px;
셀렉터 우선순위
<style>
body {
background-color: #ddd;
}
.colors .item{
background-color: white;
padding: 40px;
margin: 40px;
border-left: 20px solid black;
color: black;
}
.red{
box-shadow: 0 0 200px red;
color: red;
border-color: red;
}
</style>
</head>
<body>
<div calss="colors">
<div class="item red">RED</div>
<div class="item green">GREEN</div>
<div class="item blue">BLUE</div>
<div class="item orange">ORANGE</div>
<div class="item gray">GRAY</div>
</div>ㄴ .red{} 안의 color과 border-color은 우선순위에 의해 적용이 되지 않는다.
ㄴ 우선순위가 동일하다면 하단에 적힌 속성이 우선 적용됨
<style>
.wow:hover{
background: beige;
}
.wow.wow{
background: blue;
}
.wow2{
background: orange;
}
.h1{
background: aqua;
}
</style>
</head>
<body>
<h1 class=wow wow2>contents</h1>
</body>위 코드에서 .wow:hover 안의 코드는 동작하지 않는다. 그 이유는
아래 .wow.wow 코드와 우선순위가 동일하기 떄문,
상위에 있으면 해당 코드가 씹힌다.
다중 클래스
<div class = "box wow wow2">
div.box
.box
.box.wow.wow2
div.box.wow.wow
.
.
.
구체적인 정도를 기반으로 줄세우기를 한다. (Cascade)
*참고 사이트 : https://specifishity.com/
Specifishity :: Specificity with Fish
specifishity.com
a 태그 : inline 속성
.header a{
background-color: orange;
border: 5px solid black;
border-radius: 50%;
}ㄴ a 태그는 inline 속성으로, 콘텐츠만큼의 크기를 가진다.
ㄴ width, height 지정 불가!!
ㄴ inline-block으로 선언해주면 한 줄에 만들기 가능
도형 안에 텍스트 중앙 정렬
flex 박스에서 처리가 가능하지만, 지금 진도상 처리할 수 있는 방법은
line-height로 처리하는 방법이 있다.
도형의 height : 200px / font-size: 20px 이면
line-height: 200px 을 주어 중간에 오도록 설정한다.
font-size: 20px 을 제외한 위 아래 Half leading area는 90px 씩 온다.
-> line-height는 폰트의 종류에 따라 유동적이다.
-> line-height가 폰트의 크기보다 작으면 폰트의 크기로 통일된다.
'HTML+CSS' 카테고리의 다른 글
| html/css #7-felxbox2 (0) | 2023.12.13 |
|---|---|
| html/css #6-line-height 심화, flexbox (1) | 2023.12.12 |
| html/css #4-프로필 사이트 index 2 (section, 마진병합, 오퍼레이터) (1) | 2023.12.08 |
| html/css #3-1 마진 병합 현상 (0) | 2023.12.07 |
| html/css #3 - 프로필 사이트 index 2 (class, descendant selector) (0) | 2023.12.07 |
