728x90
반응형
SMALL
1. 2단 레이아웃
📄외부스타일로 적용한 css 파일
<!DOCTYPE html>
<html lang="en">
<head>
<title>2단 레이아웃</title>
<link rel="stylesheet" href="./CSS/layout1.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet maxime nihil, expedita corrupti a illo eos sit provident laborum rem ducimus eligendi vitae quaerat voluptatum numquam dignissimos mollitia, delectus recusandae.</p>
</div>
<div id="sidebar">
<h2>사이드바</h2>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem modi similique impedit facere veniam odit assumenda vero officia inventore. In quas, consequuntur esse numquam ex consequatur assumenda eum ab inventore.</li>
</ul></div>
<footer id="footer">
<h2>푸터</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat a consequatur velit fugiat facilis quidem iste cum doloribus assumenda reiciendis, nam fuga aperiam expedita laborum porro ratione sunt distinctio. Ipsam!</p>
</footer>
</div>
</body>
</html>
2. 3단 레이아웃
📄외부스타일로 적용한 css 파일
<!DOCTYPE html>
<html lang="en">
<head>
<title>3단 레이아웃</title>
<link rel="stylesheet" href="./CSS/layout2.css">
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<div id="left-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul></div>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet maxime nihil, expedita corrupti a illo eos sit provident laborum rem ducimus eligendi vitae quaerat voluptatum numquam dignissimos mollitia, delectus recusandae.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam obcaecati ipsa soluta! Quasi sed quibusdam sapiente delectus repellat unde, quisquam dolorum libero, excepturi expedita beatae incidunt quaerat vitae eum similique!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi laboriosam quos esse? Consequuntur a ab, eligendi quaerat dolor quod rerum corporis blanditiis totam, ad porro qui earum nulla? Sunt, accusantium?</p>
</div>
<div id="right-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul></div>
<footer id="footer">
<h2>푸터</h2>
<p>저작권 정보</p>
<p>연락처 등</p>
</footer>
</div>
</body>
</html>
3. 다단 레이아웃
- 텍스트를 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
- column-count: 단의 갯수를 설정
- column-rule: 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정
- column-gap: 단과 단 사이의 여백을 설정
- column-span: 단과 안의 포함된 요소를 다단 편집에서 해제(all)
<!DOCTYPE html>
<html lang="en">
<head>
<title>다단 레이아웃</title>
<style>
div, p {margin: 0; padding: 0;}
h2 {
padding: 0 0 20px;
text-align: center;
}
div.col {
text-align: justify;
padding: 20px;
background-color: lightblue;
border: 3px solid slateblue;
column-count: 3;
column-gap: 30px;
column-rule: 1px dashed black;
}
.col > h2 {column-span: all;}
</style>
</head>
<body>
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidunt. Reprehenderit iste, placeat, animi commodi possimus facere, velit autem culpa dicta laudantium voluptatem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidunt. Reprehenderit iste, placeat, animi commodi possimus facere, velit autem culpa dicta laudantium voluptatem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidunt. Reprehenderit iste, placeat, animi commodi possimus facere, velit autem culpa dicta laudantium voluptatem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidunt. Reprehenderit iste, placeat, animi commodi possimus facere, velit autem culpa dicta laudantium voluptatem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidunt. Reprehenderit iste, placeat, animi commodi possimus facere, velit autem culpa dicta laudantium voluptatem!</p>
</div>
</body>
</html>
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
| [CSS] 미디어 쿼리 - @media, 반응형 웹 (0) | 2023.04.04 |
|---|---|
| [CSS] Flex 레이아웃 - 요소 정렬, 배치하기 (0) | 2023.04.04 |
| [CSS] 포지션(Position), 위치 지정방식의 종류, z-index (0) | 2023.03.31 |
| [CSS] 디스플레이(display) 속성, 폼(form) 알아보기! (0) | 2023.03.31 |
| [CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기! (0) | 2023.03.31 |
