반응형
이번에는 복합 셀렉터로 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>복합 셀렉터 연습!</title>
<link rel="stylesheet" href="pr.css">
</head>
<body>
<h1>개발자 공부법!</h1>
<h2>개념공부</h2>
<ul>
<li>큰 그림부터 -> 목차부터, 핵심부터, 사소한건 재껴!</li>
<li>얕고 빠르게 -> 한 번에 다 하려 하지말고, 뼈대부터 먼저!</li>
<li>점진적 확장 -> 뼈대에 살을 붙이기!!</li>
</ul>
<h2>코드</h2>
<ul>
<li>따라치기 - 기초가 곧 핵심! 어려운건 스킵하기~</li>
<li>바꿔보기 - 내 입맛대로 변경하기! 가설 ~> 검증</li>
<li>출제하기 - 출제자의 입장되어보기</li>
</ul>
<h2>문서화!!</h2>
<ol>
<li>Why - 개발은 팀 단위! 원활한 협업을 위해!</li>
<li>How - 문학적으로 쓰라는 말이 아님. 논리적, 간결!</li>
<li>What - 블로그 (부수입), 깃허브 (취업 시 가산점!!)</li>
</ol>
</body>
</html>
전체 선택 셀렉터를 이용해서 폰트를 바꿔보자!
사용법은 아래와 같다.
/*전체 선택*/
*{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
💡 내부 선택, 자손 선택하기
- 내부선택이란, 어떤 A를 먼저 선택한 다음 그 안에 있는 B를 선택하는 것이라고 보면 된다.
ex) <ul> 안의 <li> 태그를 선택하는 것.
*차이를 알기 위해 <h2> 문서화!!에 해당하는 목록들을 <ul>에서 <ol>로 변경해주었다.
[ ul은 순서가 없는 목록, ol은 순서가 있는 목록! ]
ul li {
font-style: italic;
color : green;
}
<ul>에 해당하는 <li> 목록들이 기울어진체와 초록색 글씨로 변한것을 알 수 있다.
💡 동시 선택 : AB 붙여서 select 하면 AB둘다 선택됨!
/*동시 선택*/
AB{
}
동시 선택 클래스를 사용하기 위해 코드를 조금 수정해보았다.
list 인데 key라는 클래스를 가진 코드 추가!
<h2>개념공부</h2>
<ul>
<li>큰 그림부터 -> 목차부터, 핵심부터, 사소한건 재껴!</li>
<li class="key">얕고 빠르게 -> 한 번에 다 하려 하지말고, 뼈대부터 먼저!</li>
<li>점진적 확장 -> 뼈대에 살을 붙이기!!</li>
</ul>
<h2>코드</h2>
<ul>
<li class="key">따라치기 - 기초가 곧 핵심! 어려운건 스킵하기~</li>
<li>바꿔보기 - 내 입맛대로 변경하기! 가설 ~> 검증</li>
<li>출제하기 - 출제자의 입장되어보기</li>
</ul>
<h2>문서화!!</h2>
<ol>
<li>Why - 개발은 팀 단위! 원활한 협업을 위해!</li>
<li>How - 문학적으로 쓰라는 말이 아님. 논리적, 간결!</li>
<li class="key">What - 블로그 (부수입), 깃허브 (취업 시 가산점!!)</li>
</ol>/*동시 선택*/
li.key{
color: red;
}
💡상태별 선택
이번에는 리스트이면서 휠이 올라간(=마우스가 올라간) 상태를 선택해 볼 것이다.
/*상태별 선택*/
li:hover{
background-color: blueviolet;
color: white;
}
와!!! 신기해~~~
마우스를 올리면 <li> 태그에 이런 변화가 생긴다.
https://www.youtube.com/watch?v=GyBUxK-lOUs&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=12
'개발 > 프론트엔드-HTML,CSS' 카테고리의 다른 글
| CSS 박스 모델 연습 / 구글 홈페이지 만들기 실습 (0) | 2023.01.10 |
|---|---|
| CSS dinner 게임 답안 및 설명 [1번 ~12번] (0) | 2023.01.10 |
| CSS 셀렉터 기본개념 실습해보기 (0) | 2023.01.10 |
| CSS 셀렉터 (0) | 2023.01.10 |
| 입력 폼 만들기 (더 추가할 예정) (0) | 2023.01.09 |
