<index.html>
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>웹카페-고정형 레이아웃</title>
<link rel="stylesheet" href="css/style.css" /> <!-- 공부: type="tet/css" 는 기본값이여서 생략 -->
</head>
<body>
<div class="container">
<header class="header">header</header>
<div class="visual">visual</div>
<main class="main">
<div class="group group1">group1</div>
<div class="group group2">group2</div>
<div class="group group3">group3</div>
</main>
<article class="slogan">slogan</article>
<div class="footer-bg">
<footer class="footer">footer</footer>
</div>
</div>
</body>
</html>
<style.css>
@charset "utf-8";
@import url(./normalize.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
color: #181818;
background-color: #fff;
font-family: 'Spoqa Han Sans';
font-weight: 400;
}
/* 레이아웃 */
.container {
background-color: #ccc;
}
.header, .visual, .slogan, .footer {
height: 10vh;
}
.header, .visual, .main, .slogan, .footer {
width: 940px;
margin: 0 auto;
}
.header {
background-color: yellow;
}
.visual {
background-color: lime;
}
/* 메인 콘텐츠 */
.main {
background-color: blue;
padding: 30px 15px;
}
.group1 {
background-color: pink;
float: left;
}
.group2 {
background-color: lightgreen;
float: left;
}
.group3 {
background-color: coral;
}
.slogan {
background-color: orange;
}
.footer-bg {
background-color: purple;
}
.footer {
background-color: skyblue;
}
위 코드는 다음과 같은 화면으로 렌더링된다.
화면에서 group1, group2, group3에 집중해보겠습니다.
group1과 group2에 float: left 속성을 주었습니다. 이때 볼 수 있는 증상은 group3 위에 group2 위에 group1이 위치하는 것을 볼 수 있다.
박스가 겹친 것입니다. 그런데 텍스트는 겹쳐지지 않고 밀려나는 것을 확인할 수 있습니다. 여기서 주의할 점은 박스가 밀린 것이 아니라는 점입니다!
* 추가
1. clear를 부여할 경우는 margin 값으로 겹침 문제를 해결하는 방법입니다.
2. 부모의 float 속성을 주어도 부모가 높이값을 잃지 않습니다. (이중 float)
'CSS' 카테고리의 다른 글
| 무조건 Flex와 Grid를 쓰는게 좋은가? (0) | 2020.07.16 |
|---|---|
| float를 clear 하는 방법 (0) | 2020.07.15 |
| 박스 가운데 정렬에 다양한 방법이 있는 이유 (0) | 2020.07.15 |
| CSS 파일을 link 대신 import 하는 이유 (0) | 2020.07.14 |
| CSS 우선순위 (0) | 2020.07.14 |