공부할 내용 (278~315쪽)
1.flex box 레이아웃의 기본 속성
-display 속성
모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작한다.
(flex는 적용된 요소의 다음요소가 항상 줄바꿈 되고 inline-flex는 다음 요소가 주변에 배치되게 한다.)
-flex-direction 속성
플렉스 박스 레이아웃의 주축 방향을 결정한다.
-flex-warp 속성
플렉스 컨테이너 영역을 벗어날때 어떻게 처리할지를 결정한다.
-flex-flow 속성
flex-direction 속성과 flex-wrap 속성을 한번에 사용할 수 있는 단축 속성이다.
-justify-content 속성
플렉스 아이템을 주축 방향으로 정렬할때 사용한다.
-align-items 속성
플렉스 아이템을 교차축 방향으로 정렬할때 사용한다.
실습
index.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>
<link rel="stylesheet" href="index.css">
<style>
.flex-container{
display:flex;
flex-direction:row;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
<div class="flex-item">item-4</div>
</div>
</body>
</html>
index.css
.flex-container{
width:300px;
height:200px;
background-color:darkgrey;
border:1px solid black;
}
.flex-item{
color:white;
background-color:aquamarine;
}
.flex-item:nth-child(2n){
background-color:fuchsia;
}
2. 그리드 레이아웃
-row
가로줄을 의미한다.
-column
세로줄을 의미한다.
-grid cell
행과 열이 만나서 이루어지는 하나의 공간을 말한다.
-grid gap
그리드 셀과 그리드 셀 사이의 간격을 나타낸다.
-grid item
그리드 셀 안에 포함되는 콘텐츠를 의미한다.
-grid line
그리드 행과 열을 그리는 선을 의미한다.
-grid number
그리드 라인에 붙는 번호를 의미한다.
-grid container
그리드 아이템을 묶는 부모요소를 말한다.
3. 그리드 레이아웃의 배치 속성
grid-template-areas
그리드 레이아웃에서 행과 열을 이름으로 지정한다.
grid-area
그리드 아이템에 이름을 지정한다.
grid-column-start, grid-colums-end
그리드레이아웃에서 열의 시작번호와 끝 번호를 지정한다.
grid-row-start, grid-row-end
그리드 레이아웃에서 행의 시작과 끝 번호를 지정한다.
실습
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>
<link rel="stylesheet" href="index.css">
<style>
.grid-container{
display:grid;
grid-template-columns:100px 100px;
grid-template-rows:100px 100px;
row-gap:10px;
column-gap:20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">item-1</div>
<div class="grid-item">item-2</div>
<div class="grid-item">item-3</div>
<div class="grid-item">item-4</div>
</div>
</body>
</html>index.css 파일
.grid-item{
color:white;
background-color:red;
}
.grid-item:nth-child(2n){
background-color:blue;
}
4. 미디어 쿼리의 기본 문법
미디어 쿼리는 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술이다.
미디어 쿼리는 다음 형식으로 작성한다.
@media <not|only> <mediatype> and (<media feature>) <and|or|not> (<mediafeature>) {
/* css 코드 */
}
-not/only
not은 뒤에 오는 모든 조건을 부정하는것이다.
only는 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미다.
-mediatype
미디어쿼리가 적용될 미디어 타입을 명시한다.(생략 가능)
'학습단 > HTML+CSS+Javascript 학습단' 카테고리의 다른 글
| 8장 자바스크립트 기초 문법 살펴보기 (0) | 2023.03.17 |
|---|---|
| 7장 자바스크립트 시작하기 (0) | 2023.03.15 |
| 5-2장 css 필수 속성 다루기 (0) | 2023.03.13 |
| 5장 css 필수 속성 다루기 (0) | 2023.03.11 |
| 4장 CSS 선택자 다루기 (0) | 2023.03.10 |
