2단 레이아웃

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2단 레이아웃</title>
    <link rel="stylesheet" href="./css/2단레이아웃.css">
</head>
<body>
    <div id="container">
        <header id="header">
            <h2>사이트 제목</h2>
        </header>
        <main id="main">
            <h2>본문</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum rem soluta earum quod exercitationem a quis modi unde nesciunt blanditiis sit cumque, animi sequi, voluptate repudiandae quae iusto autem tempora.</p>
        </main>
        <aside id="aside">
            <h2>사이드바</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, neque dolore nobis molestiae ab, perspiciatis architecto repellendus eaque deserunt sit dignissimos exercitationem in itaque quidem ex? Aperiam rem deserunt odio.</li>
            </ul>
        </aside>
        <footer id="footer">
            <h2>푸터</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil atque illo, alias quibusdam a, qui itaque rem repudiandae nesciunt excepturi dolorum optio unde fugiat consequatur possimus! At quos quam numquam.</p>
        </footer>
    </div>
</body>
</html>

CSS

#container {
    width: 1000px;
    margin: 0 auto;
    font-size: 20px;
}
#header {
    background-color: deeppink;
    height: 100px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid black;
}

#main {
    background-color: deepskyblue;
    float: left;
    width: 70%;
    padding: 20px;
    border: 1px solid black;

}

#side {
    background-color: gold;
    float: right;
    width: 20%;
    border: 1px solid black;
    padding: 20px;
    margin-bottom: 20px;
}

#footer {
    background-color: greenyellow;
    width: 100%;
    clear: both;
    padding: 20px;
    border: 1px solid black;
    box-sizing: border-box;
}

3단 레이아웃

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3단 레이아웃</title>
    <link rel="stylesheet" href="./css/3단레이아웃.css">
</head>
<body>
    <div id="container">
        <header id="header">
            <h1>사이트 제목</h1>
        </header>

        <aside id="sideleft">
            <h2>사이드바1</h2>
            <ul>
                <li>항목1</li>
                <li>항목2</li>
                <li>항목3</li>
                <li>항목4</li>
            </ul>
        </aside>
        <main id="main">
            <h2>본문</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum rem soluta earum quod exercitationem a quis modi unde nesciunt blanditiis sit cumque, animi sequi, voluptate repudiandae quae iusto autem tempora.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum rem soluta earum quod exercitationem a quis modi unde nesciunt blanditiis sit cumque, animi sequi, voluptate repudiandae quae iusto autem tempora.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum rem soluta earum quod exercitationem a quis modi unde nesciunt blanditiis sit cumque, animi sequi, voluptate repudiandae quae iusto autem tempora.</p>
        </main>
        <aside id="sideright">
            <h2>사이드바2</h2>
            <ul>
                <li>항목1</li>
                <li>항목2</li>
                <li>항목3</li>
                <li>항목4</li>
            </ul>
        </aside>

        <footer id="footer">
            <h2>푸터</h2>
            <p>저작권 정보</p>
            <p>연락처 등</p>
        </footer>
    </div>
</body>
</html>

CSS

#container {
    width: 1200px;
    margin: 0 auto;
    font-size: 20px;
    border: 1px solid black;
    padding: 20px;
}
#header {
    background-color: deeppink;
    height: 100px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid black;
}

#main {
    background-color: deepskyblue;
    float: left;
    width: 50%;
    padding: 20px;
    border: 1px solid black;
    margin-bottom: 20px;
}

#sideright {
    background-color: gold;
    float: right;
    width: 18%;
    border: 1px solid black;
    padding: 20px;

}

#sideleft {
    background-color: gold;
    float: left;
    width: 18%;
    border: 1px solid black;
    padding: 20px;
    margin-right: 20px;
}

#footer {
    background-color: greenyellow;
    width: 100%;
    clear: both;
    padding: 20px;
    border: 1px solid black;
    box-sizing: border-box;
}

다단 레이아웃

텍스트를 column 속성으로 다단을 생성
다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성
column-count: 단의 개수를 설정
column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
column-gap: 단과 단사이의 여백을 설정
column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다단 레이아웃</title>
    <style>
        div, h2, p { margin: 0; padding: 0;}
        h2 { padding: 0 0 20px; text-align: center;}
        div.col {
            text-align: justify;
            padding: 20px;
            background-color: gold;
            border: 3px solid red;

            column-count: 3;
            column-gap: 30px;
            column-rule: 3px dashed red;
        }

        .col > h2 { column-span: all;}
    </style>
</head>
<body>
    <div class="col">
        <h2>다단 레이아웃</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam facilis nostrum veritatis reprehenderit illum quod architecto dignissimos soluta perspiciatis reiciendis quasi quibusdam vel!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam facilis nostrum veritatis reprehenderit illum quod architecto dignissimos soluta perspiciatis reiciendis quasi quibusdam vel!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam facilis nostrum veritatis reprehenderit illum quod architecto dignissimos soluta perspiciatis reiciendis quasi quibusdam vel!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam facilis nostrum veritatis reprehenderit illum quod architecto dignissimos soluta perspiciatis reiciendis quasi quibusdam vel!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam facilis nostrum veritatis reprehenderit illum quod architecto dignissimos soluta perspiciatis reiciendis quasi quibusdam vel!</p>
    </div>
</body>
</html>

Flex 레이아웃

수평정렬을 하기 위한 속성
display: flex

flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김)

flex-dicention: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성

row: 기본값, 가로로 배치

row-reverse: 가로로 배치(반대)

column: 세로로 배치

column-reverse: 세로로 배치(반대)

flex-flow: flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성

 **flex-flow**: row nowrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃1</title>
    <style>
        #container {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 3px solid red;
            display: flex;
            /* 기본값 nowrap */
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */

            /* flex-direction: row; 기본값 */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /*flex-direction: column-reverse;*/
            
            /* flex-flow: row-reverse nowrap; */
        }

        #container > div {
            width: 400px;
            border: 1px solid black;
            background-color: gold;
        }

        span {
            font-size: 50px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃1</h2>
    <div id="container">
        <div id="box1"><span>1</span></div>
        <div id="box2"><span>2</span></div>
        <div id="box3"><span>3</span></div>
    </div>
</body>
</html>

1. 기본값 2.wrap

3. wrap-revers 4. flex-dicention: column

justify-content: 플렉스 요소의 수평방향 정렬방식을 설정

flex-start: 기본값. 앞쪽에서부터 배치
flex-end: 뒤쪽에서부터 배치
center: 가운데 배치
space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

align-item: 플렉스 요소의 수직방향 정렬 방식을 설정

stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
baseline: 요소들이 텍스트 베이스라인 기준으로 정렬

align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정

order: 플렉스 요소의 순서를 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃2</title>
    <style>
        .wrapper{
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
        }
        
        .wrapper div {
            width: 50px;
            border: 2px solid black;
            background-color: gold;
        }

        #container {
            display: flex;
            /*justify-content: flex-start;  기본값 */
            /* justify-content: flex-end; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */

            /* align-items: stretch; 기본값 */
            align-items: flex-start;
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */

            #box2 { align-self: center;}

            #box1 { order: 4}
            #box2 { order: 1}
            #box3 { order: 5}
            #box4 { order: 2}
            #box5 { order: 3}
        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃2</h2>
    <div id="container" class="wrapper">
        <div id="box1">
            <p>1</p>
        </div>
        <div id="box2">
            <p>2</p>
        </div>
        <div id="box3">
            <p>3</p>
        </div>
        <div id="box4">
            <p style="font-size: 50px;">4</p>
        </div>
        <div id="box5">
            <p>5</p>
        </div>
    </div>
</body>
</html>

텍스트 라인을 기준으로 정

order로 인해 순서가 바뀌어있다.

align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식을 설정(flex-wrap의 값을 wrap으로 설정해야 함)

stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃3</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
        }

        .wrapper div {
            width: 150px;
            border: 2px solid black;
            background-color: gold;
        }

        #container {
            display: flex;
            flex-wrap: wrap;
            /* align-content: stretch; */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;

        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃3</h2>
    <div id="container" class="wrapper">
        <div>
            <p>1</p>
        </div>
        <div>
            <p>2</p>
        </div>
        <div>
            <p>3</p>
        </div>
        <div>
            <p>4</p>
        </div>
        <div>
            <p>5</p>
        </div>
    </div>
</body>
</html>

'코딩 > Web' 카테고리의 다른 글

CSS 우선순위와 Custom Properties, 애니메이션 (1)	2024.04.12
CSS 미디어 쿼리 (0)	2024.04.11
CSS z-index, float, clear (0)	2024.04.11
CSS Position (0)	2024.04.09
CSS 박스 모델 (0)	2024.04.09

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

개발일지

CSS 레이아웃, flex

2단 레이아웃

3단 레이아웃

다단 레이아웃

Flex 레이아웃

flex-dicention: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성

flex-flow: flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성

justify-content: 플렉스 요소의 수평방향 정렬방식을 설정

align-item: 플렉스 요소의 수직방향 정렬 방식을 설정

align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정

order: 플렉스 요소의 순서를 설정

align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식을 설정(flex-wrap의 값을 wrap으로 설정해야 함)

'코딩 > Web' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

CSS 레이아웃, flex

2단 레이아웃

3단 레이아웃

다단 레이아웃

Flex 레이아웃

flex-dicention: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성

flex-flow: flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성

justify-content: 플렉스 요소의 수평방향 정렬방식을 설정

align-item: 플렉스 요소의 수직방향 정렬 방식을 설정

align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정

order: 플렉스 요소의 순서를 설정

align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식을 설정(flex-wrap의 값을 wrap으로 설정해야 함)

'코딩 > Web' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역