HTML, CSS

(57)CSS_2단 레이아웃

빠스무 2023. 4. 3. 17:13
728x90
 

(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>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. Dolore suscipit qui unde amet, nisi debitis, molestiae assumenda corrupti in voluptate voluptas nam explicabo aperiam quas excepturi tenetur. Quod, necessitatibus animi.</p>
        </div>
        <div id="sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore facere, rerum ullam consequuntur corrupti neque laboriosam excepturi, atque, reprehenderit quae dolorem magni recusandae architecto quidem. Voluptatem exercitationem optio tempore dolore.</li>
            </ul>
        </div>
        <footer id="footer">
            <h2>푸터</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, reiciendis! Recusandae ea fuga possimus magni, ut, amet quis tempore officiis nemo delectus reprehenderit provident architecto accusamus, minima ab doloribus voluptatum!
            </p>
        </footer>

    </div>    
</body>
</html>

  • 외부 css 파일
#container{

    width: 1000px;
    margin: 0 auto;
}

#header{
    padding: 20px;
    border: 1px solid gray;
    margin-bottom: 20px;

}

#contents{
    border: 1px solid gray;
    padding: 20px;
    width: 700px;
    float: left;
}

#sidebar{
    border: 1px solid gray;
    padding: 20px;
    background-color: gold;
    width: 200px;
    float: right;
    margin-bottom: 20px;
}

#footer{
    border: 1px solid gray;
    padding: 20px;
    clear: both;





}