728x90
반응형
레이아웃
코딩일기를 쓰려고 했으나 오늘 깨닫게 된 부분이 속이 시원해 작성해봅니다.
레이아웃을 잡을 때 가장 중요했던 것은 '박스 구분'이었다. 통으로 만들 수 없으니 어떤식으로 어떻게 나누는지가 중요했고
이에 따라 속성을 적용할 수가 있었다. 하지만 나는 이게 이해가 가지않았고 거기에 전체 박스를 의미하는 wrap 과 그 외적인 것들이
더해지니 이해하는 것은 더욱 어려웠다. 혼자서는 시작도 못했던 부분이었는데 오늘 수업과 연습으로 알게되었다!
<!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>레이아웃 타입(C-1)</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1000px;
display: flex;
}
#header {
width: 20%;
height: 650px;
background-color: #80FFDB;
}
#header .logo {
height: 150px;
background-color: #72EFDD;
}
#main {
width: 80%;
height: 650px;
background-color: #64DFDF;
}
#main .slider {
width: 100%;
height: 350px;
background-color: #56CFE1;
}
#main .contents {
width: 100%;
height: 200px;
background-color: #48BFE3;
display: flex;
}
#main .contents .cont1 {
width: 33.33%;
height: 200px;
background-color: #4EA8DE;
}
#main .contents .cont2 {
width: 33.33%;
height: 200px;
background-color: #5E60CE;
}
#main .contents .cont3 {
width: 33.33%;
height: 200px;
background-color: #6930C3;
}
#main .footer {
width: 100%;
height: 100px;
background-color: #7400B8;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#main .footer .foot1 {
width: 20%;
height: 100px;
background-color: #6930C3;
}
#main .footer .foot2 {
width: 80%;
height: 50px;
background-color: #7400B8;
}
#main .footer .foot3 {
width: 80%;
height: 50px;
background-color: #5E60CE;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<main id="main">
<article class="slider"></article>
<article class="contents">
<div class="cont1"></div>
<div class="cont2"></div>
<div class="cont3"></div>
</article>
<article class="footer">
<div class="foot1"></div>
<div class="foot2"></div>
<div class="foot3"></div>
</article>
</main>
</div>
</body>
</html>1. 구조
로고 부분과 이미지슬라이드 (메인) 부분을 구분하여 크게 지정했고 그 안에 각각의 부분들을 넣어주어 구조를 작성했다.
2. flex
부모요소에 플렉스 요소가 없는 경우 아래로 일렬로 나열하게 되는데 플렉스를 사용하면 끌려올라와 위의 것과 붙는다.
이 때 중요한 것은 플렉스를 아무데나 넣는 것이 아닌, 부모 속성에 넣어야한다는 것이다. foot1,2,3 이라면 footer에
cont1,2,3이라면 contents에 붙여야하고 이를 main이라는 큰 박스로 또 묶었기 때문에 main. contents에도 작성해준다.
그리고 추가적으로 wrap이라는 할아버지 격에 작성해준다.
개힘들다🤯