오늘부터 CSS를 알아보는 시간을 가지도록 하겠습니다.
공부한 내용을 가지고 포스팅을 진행합니다.
우선 간단한 html 파일과 css 파일을 만들었습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>
styles.css
.box {
background: blue;
width: 300px;
height: 300px;
display: inline-block;
color: white;
}
은 아래와 같습니다.
현재는 전혀 flex에 대한 설정이 되어 있지 않은 상태입니다.
여기서 css를 변경해보도록 하겠습니다.
body {
display: flex;
}
.box {
background: blue;
width: 300px;
height: 300px;
color: white;
}현재 html 에서는
body태그가 div태그의 부모로 입니다만
div 태그들은 그걸 알지 못합니다.
그래서 아래와 같이 wrapper로 class가 box인 div를 옮겨줘야합니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="wrapeer">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
styles.css
.wrapeer {
display: flex;
}
.box {
background: blue;
width: 300px;
height: 300px;
color: white;
}
간단하게 말하면 항상 붙어있는 부모(wrapper)가 자식(box)의 위치를 움직일 수 있습니다.
이것이 바로 Flexbox의 첫번째 규칙입니다.
그럼 다음시간에 뵙겠습니다.
