계층 선택자
자식, 자손 관계를 이용해서 선택자를 지칭하는 것을 말한다.
특정위치의 요소를 계층적 구조로 요소를 선택한다.
실습
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body li{ body의 자손인 li 요소의 폰트사이즈를 일괄적으로 바꾸기
font-size: 50px;
}
ul>li.korean{ ul의 자식인 li중 class가 korean인 요소의 글자색 바꾸기
color: blue;
}
li+li, p{ li의 근접후행형제인 li과 p 의 배경색 바꾸기 (짜장면은 p의 근접후행형제인 li이기 때문에 해당x)
콤마를 사용해서 여러 선택자의 css를 변경 가능함
background-color: greenyellow;
}
</style>
</head>
<body>
<h1> 오점추 </h1>
<ul>
<li class="korean">떡볶이</li>
<li class="korean">김치</li>
<li>탕수육</li>
<p>JAVA</p>
<li>짜장면</li>
<li id="Western">오븐스파게티</li>
</ul>
</body>
</html>
선택자 게임으로 공부하기
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
크기단위
1. px : 화소 하나에 대응하는 단위(고정값)
2. em : 부모 요소 크기에 따른 배수 단위
ex) 부모의 크기가 30px이고 자식이 10em라면 자식의 크기는 300px
3. % : 기본 설정 되어있는 크기에서 상대적인 단위
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
font-size: 20px;
}
#px{
font-size: 20px;
}
#em{
font-size: 2em; 부모 요소가 20px로 되어있기 때문에 2em은 그의 두배인 40px
}
#percent{
font-size: 300%; body는 20px로 되어있기 때문에 300%는 그 세배인60px
}
/* rem:(route) 최상위 태그(html)의 크기에 따른 배수 단위 */
</style>
</head>
<body>
<p id="px"> 이서연(px) </p>
<p id="em"> 이서연(em) </p>
<p id="percent"> 이서연(%)</p>
</body>
</html>
반응 선택자
hover : 마우스가 올라간 상태
click : 마우스로 클릭한 상태
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
#active:active{
background-color: green;
}
#hover:hover{
background-color: aqua;
}
css에서의 우선순위는 hover>active이고 뒤에선언>앞에선언인데 active를 먼저 선언하고
hover을 나중에 선언하면 hover의 우선순위가 너무 높아져서 active는 실행되지않게 되어버린다.
이것을 막기 위해 hover을 앞에 선언하고 active를 뒤에 선언해주는 것이 중요하다.
div:hover{
color: yellow;
}
div:active{
color: red;
}
</style>
</head>
<body>
<h1 id="active">클릭하기</h1>
<h1 id="hover"> 마우스 올리기</h1>
<div> 서연 </div>
</body>
</html>
CSS 우선순위
| 가중치 | 스타일 적용 | 예시 |
| 0 | 전체선택자 | *{color:red;} |
| 1 | 타입선택자 | p{color:red;} |
| 10 | 클래스선택자 | .txt{color:red;} |
| 100 | 아이디선택자 | #main{color:red;} |
공간분할태그
- div 태그 : 가장 큰 공간 지정
- p 태그 : 문단 분할
- span 태그 : 세부적인 스타일
가시속성 (display) : 요소가 화면에 보이는 스타일 지정
- block : 웹페이지의 가로공간을 모두 차지함
div, p, h1, ul, ol, table... 태그의 기본값
- inline : 컨텐츠가 끝나는 지점까지만 너비를 가짐
너비와 높이를 지정할 수 없음
a, span, strong, textarea 태그의 기본값
- none : 해당 html요소를 보이지않게 저장
실습
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div{
background-color: gold;
width: 200px;
height: 200px;
display: inline; 크기를 지정했는데도 불구하고 inline 을 줘서 크기 지정이 반영되지않는다.
}
p{
background-color: beige;
display: inline-block; 크기를 지정하지 않으면 inline, 크기를 지정하면 block 으로 보여진다.
}
span{
background-color: tomato;
width: 200px;
height: 200px; span 태그는 기본값이 inline이라서 크기지정이 먹히지 않는다.
display: block; block 설정을 주면 크기 지정이 먹힌다.
}
a{
background-color: orange;
display: none;
}
</style>
</head>
<body>
<div> div </div>
<p> p </p>
<span> span </span>
<a href=""> a </a>
</body>
</html>
실습 문제 - 네이버에 마우스 올리면 네이버 url가, 다음에 마우스 올리면 다음 url가 노출되도록 만들기
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
sup{ 마우스를 올리기 전에는 sup태그가 보이지 않게 하기
display: none;
}
a:hover + sup{ a태그에 마우스를 올리면 보여줘야하기때문에 a:hover
sup태그는 a태그의 근접후행태그이기때문에 +sup
display: inline; block은 가로공간 모두 차지해서 개행이 되어버리기때문에 inline으로 바꿔줘야함
}
</style>
</head>
<body>
<sup class="s">www.naver.com</sup>
<br>
<sup class="s">www.daum.net</sup>
</body>
</html>
'웹 개발 언어 > CSS' 카테고리의 다른 글
| CSS float, layout, 선언방식 (0) | 2022.03.14 |
|---|---|
| CSS overflow, background, position, float (0) | 2022.03.14 |
| CSS Box Model, box-sizing, border (0) | 2022.03.09 |
| CSS 기본 (0) | 2022.03.04 |
댓글