CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다.
자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.
FlexBox
- flexbox를 이용해서 박스의 배치가 수월해졌습니다.
float : left center right 옵션
Container에 지정하는 속성 값
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
item에 지정하는 속성 값
- order
- flex-grow
- flex-shrink
- flex
- align-self
전체 코드
- 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" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>
index.css 코드
.container {
background: beige;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*flex-flow: column nowrap;*/
justify-content: space-between;
align-items: baseline;
align-content: center;
}
.item {
width: 60px;
height: 60px;
border: 1px solid black;
}
.item1 {
background: #ef9a9a;
flex: 2 2 auto;
align-self: center;
}
.item2 {
background: #f48fb1;
}
.item3 {
background: #ce93d8;
}
.item4 {
background: #b39ddb;
}
.item5 {
background: #90caf9;
}
.item6 {
background: #a5d6a7;
}
.item7 {
background: #e6ee9c;
}
.item8 {
background: #fff59d;
}
.item9 {
background: #ffcc80;
}
.item10 {
background: #ffab91;
}- Container 값 조절해보기
.container {
background: beige;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*flex-flow: column nowrap;*/
justify-content: space-between;
align-items: baseline;
align-content: center;
}- 다양한 속성 들은 직접 해보면서 익히는 게 좋습니다.
- item 값 조절해보기
.item1 {
background: #ef9a9a;
flex: 2 2 auto;
align-self: center;
}
'Coding > HTML & CSS' 카테고리의 다른 글
| [클론 코딩] 유튜브 사이트 만들기 (0) | 2021.07.14 |
|---|---|
| [CSS] 반응형 CSS em과 rem (0) | 2021.07.13 |
| [CSS] 반응형 CSS 단위 정리 1 (0) | 2021.07.13 |
| [CSS] CSS 정리 2 (display, position) (0) | 2021.07.11 |
| [CSS] CSS 정리1 (0) | 2021.07.11 |