고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
1. <div>
div 태그는 HTML에서 웹 페이지의 구조를 나누거나 묶을 때 사용하는 대표적인 블록 요소입니다. 의미를 가지지 않는 비어 있는 컨테이너로, 주로 CSS를 활용하여 레이아웃을 구성하거나 스타일을 적용하기 위한 용도로 사용됩니다. div는 한 줄 전체를 차지하며, 내부에 텍스트, 이미지, 버튼 등 다양한 요소를 포함할 수 있고, width, height, margin, padding, background-color 등의 CSS 속성과 함께 사용할 때 그 역할이 더욱 분명해집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div와 span 기본 예제</title>
<style>
div {
background-color: lightblue;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<h2>div 예제</h2>
<div>이것은 div입니다.</div>
<div>또 다른 div입니다.</div>
</body>
</html>
2. <span>
span 태그는 HTML에서 텍스트나 인라인 요소를 감싸서 특정 부분에 스타일을 적용하거나 구분할 때 사용하는 인라인 요소입니다. 의미를 가지지 않는 태그로, 주로 CSS를 통해 글자 색, 크기, 배경색 등을 다르게 지정하거나, 자바스크립트를 이용해 특정 부분만 동적으로 제어할 때 활용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>span 강조</title>
<style>
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
padding: 2px 4px;
}
</style>
</head>
<body>
<p>
이 문장에서 <span class="highlight">강조된 부분</span>만 스타일이 다릅니다.
</p>
</body>
</html>
3. div를 이용한 레이아웃
1. float
float는 CSS에서 요소를 문서의 흐름에서 분리하여 왼쪽 또는 오른쪽으로 띄우는 속성입니다. 원래는 이미지처럼 텍스트 옆에 붙이는 용도로 사용되었지만, 과거에는 웹 페이지의 좌우 레이아웃을 만들기 위해 널리 활용되었습니다. float: left 또는 float: right를 사용하면 해당 요소는 그 방향으로 이동하고, 뒤따르는 요소들은 그 옆으로 감싸듯이 배치됩니다. 하지만 float된 요소는 부모의 높이 계산에서 제외되기 때문에, 이를 해결하려면 clear 속성이나 clearfix 테크닉을 함께 사용해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>float</title>
<style>
img {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
hr {
clear: both;
}
div {
padding: 20px;
}
#box1 {
background-color: gold;
float: left;
margin-right: 20px;
}
#box2 {
background-color: deeppink;
float: left;
margin-right: 20px;
}
#box3 {
background-color: greenyellow;
float: left;
margin-right: 20px;
}
#box4 {
background-color: deepskyblue;
float: left;
margin-bottom: 20px;
}
p {
padding: 10px;
text-align: center;
font-size: 20px;
}
#p1 {
width: 38%;
background-color: gold;
float: left;
margin-bottom: 20px;
}
#p2 {
width: 53%;
background-color: deepskyblue;
float: right;
}
#p3 {
clear: both;
background-color: deeppink;
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
<hr />
<div id="p1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo inventore
obcaecati culpa fuga, voluptas aliquid dolorum! Optio cumque voluptatum
dicta! Ad incidunt quod vitae doloremque voluptatibus similique ea
cupiditate aliquam?
</p>
</div>
<div id="p2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo inventore
obcaecati culpa fuga, voluptas aliquid dolorum! Optio cumque voluptatum
dicta! Ad incidunt quod vitae doloremque voluptatibus similique ea
cupiditate aliquam?
</p>
</div>
<div id="p3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo inventore
obcaecati culpa fuga, voluptas aliquid dolorum! Optio cumque voluptatum
dicta! Ad incidunt quod vitae doloremque voluptatibus similique ea
cupiditate aliquam?
</p>
</div>
</body>
</html>
2. flex
flex는 CSS에서 유연하고 직관적인 레이아웃 구성을 가능하게 해주는 레이아웃입니다. display: flex를 부모 요소에 적용하면, 그 안의 자식 요소들을 가로 또는 세로 방향으로 쉽게 정렬하고 배치할 수 있습니다. justify-content를 사용해 주축 방향의 정렬(왼쪽, 가운데, 오른쪽 등)을 설정하고, align-items로 교차축 방향의 정렬(위, 가운데, 아래 등)을 조절할 수 있습니다. 또한, 자식 요소에 flex: 1을 주면 공간을 균등하게 나누거나 자동으로 크기를 조절할 수 있어 반응형 웹 구성에도 매우 유용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Flex 레이아웃</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
flex: 1;
background-color: #ffd966;
text-align: center;
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">왼쪽</div>
<div class="item">가운데</div>
<div class="item">오른쪽</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>전체 페이지 레이아웃</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.header,
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}
.main {
display: flex;
min-height: 300px;
}
.sidebar {
width: 25%;
background-color: #f4f4f4;
padding: 20px;
}
.content {
flex: 1;
background-color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="header">헤더 영역</div>
<div class="main">
<div class="sidebar">사이드바</div>
<div class="content">본문 콘텐츠</div>
</div>
<div class="footer">푸터 영역</div>
</body>
</html>
3. grid
grid는 CSS에서 2차원(가로 + 세로) 레이아웃을 쉽게 구성할 수 있도록 도와주는 강력한 레이아웃 시스템입니다. display: grid를 사용하면 행과 열을 자유롭게 설정할 수 있으며, grid-template-columns와 grid-template-rows를 통해 영역을 정확하게 나누고 배치할 수 있습니다. 특히 fr 단위를 사용하면 남은 공간을 비율로 분배할 수 있어 유동적인 레이아웃 구현이 쉬우며, grid-area와 grid-template-areas를 활용하면 의미 있는 이름으로 구조를 직관적으로 구성할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Grid 기초 예제</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 두 열로 나눔 */
grid-template-rows: 100px 100px; /* 두 행 */
gap: 10px;
}
.grid-item {
background-color: lightseagreen;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
</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>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Grid 레이아웃</title>
<style>
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
gap: 10px;
}
.box {
padding: 20px;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.header {
background-color: #4a90e2;
grid-area: header;
}
.sidebar {
background-color: #50e3c2;
grid-area: sidebar;
}
.content {
background-color: #f5a623;
grid-area: content;
}
.footer {
background-color: #9013fe;
grid-area: footer;
}
</style>
</head>
<body>
<div class="layout">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Main Content</div>
<div class="box footer">Footer</div>
</div>
</body>
</html>
728x90
반응형
