CSS 레이아웃 구성 방법
Floats, Positioning, Display, Box Model, CSS Grid, Flex Box
Floats
- left : 요소를 왼쪽으로 띄웁니다.
- right : 요소를 오른쪽으로 띄웁니다.
- none : 플로팅을 전혀 지정하지 않습니다. (기본값)
- inherit : 플로팅 속성의 값을 요소의 부모 요소에서 상속하도록 지정합니다.
Float 속성 설정 : 요소에 'float' 속성을 적용하고 원하는 방향을 지정합니다.
Float 해제 : Float를 적용한 요소 다음에 다른 요소가 따라오는 경우, 그 요소의 레이아웃이 예상치 못하게 변경될 수 있습니다. 이를 방지하기 위해 'clearfix' 클래스를 추가하는 것입니다.
예시코드👇
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Elements</title>
<style>
.container {
width: 600px;
margin: 0 auto;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
float: left; /* 좌측으로 띄움 */
background-color: lightblue;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
위 코드에서는 '.box' 클래스를 가진 세 개의 사각형을 생성하고, 이를 왼쪽으로 띄워 배치합니다. 부모 요소인 '.container'에 'clearfix' 클래스를 추가하여 Float이 적용된 자식 요소들이 부모 요소의 레이아웃에 영향을 미치지 않도록합니다.
Positioning
- Static : 요소의 기본값으로 일반적인 흐름에 따라 배치됩니다. 지정하지 않아도 됩니다.
- Relative : 상대적 위치를 지정합니다. 요소가 자신의 정상 위치에서 이동되지만 다른 요소의 위치에는 영향을 주지 않습니다. 'top', 'right', 'bottom', 'left' 속성을 사용하여 이동 거리를 지정 할 수 있습니다.
- Absolute : 일반적인 레이아웃 흐름에서 벗어나 마치 별도의 레이어에 있는 것처럼 이동시킵니다. 가장 가까운 위치에 있는 상윙소의 가장자리를 기준으로 고정할 수 있습니다.(다른 상위 요소가 없는 경우, <html>이 기준이됨)
- Fixed : 요소를 뷰포트(브라우저 창)의 위치에 고정시킵니다. 스크롤이되더라도 화면 상에서 항상 같은 위치에 유지 됩니다.
- sticky : 뷰포트(브라우저 창)에서 정의된 오프셋에 도달할 때까지 요소가 position:relative;와 같이 작동하고, 그 시점부터는 position: fixed와 같이 작동합니다.
사용 시 부모 요소의 Positioning 상태를 고려하여 배치해야합니다. 환면 크기에 따른 반응형 처리까지 고려하여 적용하는게 좋습니다.
예시코드👇
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Positioning 예제</title>
<style>
.relative-container {
position: relative;
width: 300px;
height: 200px;
background-color: lightgray;
}
.relative-item {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: lightblue;
}
.absolute-item {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed-item {
position: fixed;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="relative-container">
<div class="relative-item"></div>
<div class="absolute-item"></div>
<div class="fixed-item"></div>
</div>
</body>
</html>
Display
- block : 요소를 블록 요소로 지정합니다.
- inline : 요소를 인란인 요소로 지정합니다.
- inline-block : 요소를 인라인 요소처럼 표시하면서 블록 요소의 속성을 가집니다. 너비와 높이를 지정할 수 있습니다.
예시코드👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display 요소로 지정하기</title>
<style>
.block-element {
display: block;
width: 200px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
margin-right: 10px;
}
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="block-element">블록 요소 1</div>
<span class="inline-element">인라인 요소 2</span>
<div class="inline-block-element">인라인블록 요소 3</div>
</body>
</html>
Box Model
CSS에서 요소의 크기와 여백을 다루는 모델입니다. 각 요소는 content, padding, border, margin으로 구성되며, 이들을 조절하여 레이아웃을 조작할 수 있습니다.
예시코드👇
<!DOCTYPE html>
<html>
<head>
<title>Box 모델 예시</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">Box 모델 예시</div>
<div class="box">Box 모델 예시</div>
</body>
</html>
CSS Grid
2차원 레이아웃 시스템을 만드는 데 사용됩니다. 행과 열을 정의하고 그리드 안의 요소들을 배치할 수 있습니다.
행(row)과 열(column)의 그리드를 사용하여 요소들을 배치합니다. 복잡한 레이아웃을 만드는 데 특히 유용하며, 특히 그리드 아이템의 배치와 정렬을 자유롭게 제어할 수 있습니다.
예시코드👇
<!DOCTYPE html>
<html>
<head>
<title>Grid 예시</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
}
.grid-item {
background-color: lightcoral;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
Flex Box
요소들을 하나의 행 또는 열로 정렬하고, 부모 요소 안에서 공간 분배 및 정렬을 쉽게 제어할 수 있습니다.
주축(main axis)과 교차축(cross axis) 개념을 사용하여 요소들을 배치합니다.
예시코드👇
<!DOCTYPE html>
<html>
<head>
<title>Flexbox 예시</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-item {
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
참고사이트
CSS 레이아웃 입문서 - Web 개발 학습하기 | MDN
이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 다양한 display (en-US) 속성값의 차이 등을 복습하고, 이번 과정에서 다룰 몇 가지 CSS 개념을 소개합니다.
developer.mozilla.org