한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
float - 방식
float는 CSS의 속성 중 하나로, 요소를 왼쪽이나 오른쪽으로 떠서 배치하는 방식입니다. float를 이용하여 요소들을 배치하면, 다음 요소가 float된 요소 주위로 배치됩니다. 이 방식은 과거에 많이 사용되었으나, 요소의 높이가 자동으로 조절되지 않기 때문에 레이아웃이 깨질 위험이 있습니다.
아래의 이미지 코드 예시 입니다.
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #E8F5E9;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 100%;
height: 100px;
background-color: #A5D6A7;
}
#aside {
width: 25%;
height: 780px;
background-color: #81C784;
float: left;
}
#section {
width: 50%;
height: 780px;
background-color: #4CAF50;
float: left
}
#article {
width: 25%;
height: 780px;
background-color: #66BB6A;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #43A047;
clear:both;
}
@media (max-whith: 1300px){
#wrap {
width: 96%;
}
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<article id="article"></article>
<footer id="footer"></footer>
</div>
</body>
</html>위 코드의 결과 레이아웃 입니다.
flex -방식
Flexbox는 1차원 레이아웃 방식으로, 요소를 수평 또는 수직으로 배치할 수 있습니다. Flexbox를 이용하여 요소를 배치하면, 요소들이 부모 요소 내에서 유연하게 배치되며, 부모 요소의 크기에 따라 자동으로 조절됩니다. Flex 방식은 반응형 디자인에 유리하며, 요소의 순서를 변경할 수 있어서 유용합니다.
아래의 이미지 코드 예시 입니다.
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #E1F5FE;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #B3E5FC;
}
#nav {
width: 1200px;
height: 100px;
background-color: #81D4FA;
}
#main {
width: 1200px;
height: 780px;
display: flex;
}
#aside {
width: 300px;
height: 780px;
background-color: #4FC3F7;}
#section {
width: 900px;
display: flex;
flex-wrap: wrap;
}
#article {
width: 900px;
height: 260px;
background-color: #29B6F6;
}
#article1 {
width: 900px;
height: 260px;
background-color: #03A9F4;
}
#article2 {
width: 900px;
height: 260px;
background-color: #039BE5;
}
#footer {
width: 1200px;
height: 100px;
background-color: #0288D1;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<section id="section">
<article id="article"></article>
<article1 id="article1"></article1>
<article2 id="article2"></article2>
</section>
</main>
<footer id="footer"></footer>
</div>
</body>위 코드의 결과 레이아웃 입니다.
gird - 방식
CSS Grid는 2차원의 그리드 시스템을 이용하여 요소를 배치하는 방식입니다. Grid를 이용하여 요소를 배치하면, 그리드 안에 있는 각 셀들에 요소를 배치할 수 있으며, 행과 열의 크기를 지정하여 원하는 형태의 레이아웃을 만들 수 있습니다. Grid 방식은 요소의 배치가 유연하고 간편하며, 반응형 디자인을 구현하기에 적합합니다.
아래의 이미지 코드 예시 입니다.
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-rows: 100px 100px 780px 100px;
grid-template-columns: 400px 800px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>위 코드의 결과 레이아웃 입니다.
