.png)
Layout
Normal flow
- 레이아웃을 전혀 제어하지 않을 경우
- 브라우저가 기본값으로 HTML 페이지를 배치하는 방법
- 단순 나열
- 요소가 상대 요소 바로 아래 나타나는 Block 요소
- 수직으로 요소가 쌓임
- 즉, 한 칸을 Block 처럼 차지
- Block vs Inline(문장이 자리를 차지하는 방식)
- 문제상황 : Layout 만들기 위해서는 Normal layout에서 벗어나야함
배치 방식에 따른 분류
-
display 속성 (flex box, grid)
display:flex
display:grid -
Floats
요소를 띄운다. 요소는 띄워져서 (왼)쪽으로 이동하면서 Normal flow를 벗어난다.
-
position
-
테이블 레이아웃
-
다단 레이아웃
container 클래스를 부여하고 단락별로 분류한다. 배치된 layout은 신문지를 연상한다.
예제
-
매거진 레이아웃 만들기
Logo, Title, Navi, Banner, Sign in, Footer를 포함 -
Sign up Box 만들기
<style>
*{box-sizing: border-box;} 2. 내부로 사이징 되게
div{
border: 1px solid black; 3. 보이게
width: 100%;
}
.container .header{ 4. 모든 요소들에 높이를 먼저 부여 (header, body, footer)
height: 100px;
width: 100%; 1) header 전체의 높이와 넓이 정하기
}
.container .header>div{ 2) 나란히 부여하기
float:left;
}
.container .header>.logo{ 3) 각각 로고와 타이틀 조정해주기
width :50%;
height: 100%;}
.container .header>.title{
width :50%;
height: 100%;
}
.container .navi{
height: 60px;
}
.container .body{
height: 500px;
width: 100%;
}
.container .body>.contents{
height: 500px;
width: 70%;
float:left;
}
.container .body>.side{
height: 500px;
width: 30%;
float:left;
}
.container .body>.side>.login{
height: 50px
}
.container .body>.side>.banner{
height: 50px
}
.container .footer{
height: 100px;
width: 100%;
}
.container .footer>div{
float:left;
}
.container .footer>.left{
height: 100px;
width: 50%;
}
.container .footer>.right{
height: 100px;
width: 50%;
}
</style>
</head>
<body>
<div class="container"> 1. 구조를 다 정해준다, class 부여 (세로로 나열된 애들 기준으로)
<div class="header">
<div class="logo">logo</div>
<div class="title">title</div>
</div>
<div class="navi">navi</div>
<div class="body">
<div class=contents>contents</div>
<div class=side>
<div class=login>login</div> 5. 나란히 나뉘는 애들 분류
<div class=banner>banner</div>
</div>
</div>
<div class="footer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
잘하는 건 아닌데 포기하지 않을 거야. 난 키가 별로 크진 않지만 농구를 포기하지 않을 거야. 쓸 데 없는 배움은 없다.