CSS
까먹지 않기 위해 복습!
- 자식 셀렉터와 후손 셀렉터
- 자식 셀렉터는 기준이 되는 태그의 바로 아래 태그만을 선택하는 셀렉터
- 후손 셀렉터는 자식을 포함, 기준 태그의 아래에 있는 모든 태그를 선택하는 셀렉터
'>'는 자식, ' '은 손자, 후손 등 더 아랫값을 선택할 때 사용한다.
<head>
<meta charset="utf-8">
<title>셀렉터</title>
<style>
.son1 p{color: blue;} //모든 자손(p태그) 선택
.son1 > p{font-size : 20px;} //자식만 선택
.son2 > p{text-decoration: underline;} //손자만 선택
.son2_1 > p{font-weight: bold;} //후손만 선택
.son2 p{border: 1px solid red;} //손자와 후손 선택
</style>
</head>
<body>
<div class="son1">
<p>자식</p>
<div class="son2">
<p>손자</p>
<div class="son2_1">
<p>후손</p>
</div>
</div>
</div>
</body>- 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>
</head>
<body>
<header>
제목, 로고
</header>
<nav>
메뉴
</nav>
<section>
<article>
내용
</article>
<article>
내용
</article>
<article>
내용
</article>
</section>
<aside>
광고
</aside>
<footer>
회사 소개
</footer>
</body>
</html>-
Flex 속성
-
방향: flex-direction
-
flex-direction은 크게 두가지의 종류가 있다.
-
row(default)
-
기본값이며, 축이 가로를 기준으로 한다. 교차축은 세로.
컨텐츠들이 가로로 정렬하게 된다.
-
-
column
-
축은 세로를 기준으로 하며 교차축은 가로.
컨텐츠들이 세로로 정렬하게 된다.
-
-
-
flex-grow
- grow 속성은 basis를 제외한 여백을 지정된 숫자 만큼의 비율로 나눠 가진다.
-
flex-basis
- basis는 아이템 자체의 크기를 의미한다.
-
justify-content
- justify-content를 사용하면, 지정 태그가 정해진 속성값에 따라 가로 정렬한다.
-
align-items
- align-items를 사용하면, 지정 태그가 정해진 속성값에 따라 세로 정렬한다.
