-
(58)CSS_3단 레이아웃HTML, CSS 2023. 4. 3. 17:15728x90
- 3단 레이아웃 예제
- 아래 링크를 통해 각 태그들의 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/95
(56)CSS_레이아웃 기본 문법
다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양,
jm-rograming.tistory.com
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3단 레이아웃</title><link rel="stylesheet" href="CSS/layout2-2.css"></head><body><div id="container"><header id="header"><h2>사이트 제목</h2></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. Et repellendus voluptates laborum voluptatibus numquam alias necessitatibus modi, tempore dolores facilis in odit asperiores sapiente qui recusandae aperiam quibusdam deserunt quo.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore magni ratione modi eius amet molestias cumque qui ea necessitatibus cupiditate nostrum, temporibus esse aperiam repudiandae quos nobis aut dolores enim.</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos doloremque, distinctio possimus quos, quam blanditiis adipisci debitis molestiae earum cupiditate numquam dolore. Qui maiores ex itaque dolorem minima aliquid iusto.</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>
외부 css 파일
#container{width: 1000px;margin: 0 auto;
}
#header {
padding: 20px;border: 1px solid gray;margin-bottom: 20px;}
#left-sidebar{width: 150px;border: 1px solid gray;padding: 20px;float: left;margin-right: 20px;}
#contents{
width: 530px;border: 1px solid gray;padding: 20px;float: left;margin-bottom: 20px;}
#right-sidebar{
width: 150px;border: 1px solid gray;padding: 20px;float: right;}
#footer{border: 1px solid gray;padding: 20px;clear: both;}'HTML, CSS' 카테고리의 다른 글
(60)CSS_플렉스 레이아웃1 (0) 2023.04.03 (59)CSS_다단 레이아웃 (0) 2023.04.03 (57)CSS_2단 레이아웃 (0) 2023.04.03 (56)CSS_레이아웃 기본 문법 (0) 2023.04.03 (55)CSS_clear (0) 2023.04.03