css 레이아웃 연습 (2단, 3단, 다단, flex)

1. 2단 레이아웃 연습하기

다음과 같은 html 화면이 나오도록 코드를 작성해 보자.

 

① html 작성

• 전체 요소를 가운데 정렬하기 위해 모든 요소를 감싸는 큰 div(container) 만들기
• header-사이트 제목, main-본문, aside-사이드바, footer 시맨틱 태그 만들기
• div 안에 들어갈 h 속성과 p 태그, ul>li 태그 설정하기

 

② css 작성 전 id 값 설정하기

<div id="container">
    <header id="header">
        <h1>사이트 제목</h1>
    </header>
    <main id="contents">
        <h2>본문</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima incidunt recusandae voluptatum? Fugit commodi recusandae voluptatum consequatur debitis harum voluptatibus ipsum? Maiores, cum voluptate quo nobis iure nesciunt reiciendis alias.</p>
    </main>
    <aside id="sidebar">
        <h2>사이드바</h2>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore veniam rerum eaque beatae explicabo quaerat quibusdam, nisi fuga dolores iure fugit accusantium suscipit, consequuntur neque nihil? Recusandae aut harum nobis?</li>
        </ul>
    </aside>
    <footer id="footer">
        <h2>푸터</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maiores accusantium sapiente natus laborum, saepe eaque cumque alias iste. Vitae quas tempore quaerat quae aliquam voluptatibus assumenda qui consequuntur beatae!</p>
    </footer>
</div>

 

 

③ css 스타일 적용하기

• 전체 요소들을 감싸는 #container 너비 설정, 마진을 이용한 가운데 정렬
• header 테두리 설정, 패딩 설정, 배경색, 아래 요소와의 마진(bottom) 설정
• main 테두리 설정, 너비 설정, 패딩 설정, 배경색, float 속성(left) 설정
• aside 테두리 설정, 너비 설정, 패딩 설정,  배경색, float 속성(left) 설정, 아래 요소와의 마진(bottom) 설정
• footer 테두리 설정, 패딩 설정, float 속성에 영향을 받지 않도록 clear 설정, 배경색

#container {
    width: 1000px;
    margin: 0 auto;
}

header {
    border: 1px solid gray;
    padding: 20px;
    background-color: deeppink;
    margin-bottom: 20px;
}

main#contents {
    border: 1px solid gray;
    width: 700px;
    padding: 20px;
    background-color: deepskyblue;
    float: left;
}

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

footer#footer {
    border: 1px solid gray;
    clear: both;
    padding: 20px;
    background-color: greenyellow;
}

 

 

2. 3단 레이아웃 연습하기

다음과 같은 html 화면이 나오도록 코드를 작성해 보자.

 

① html 작성

• 전체 요소를 가운데 정렬하기 위해 모든 요소를 감싸는 큰 div(container) 만들기
• header-사이트 제목, aside-왼쪽 사이드바, main-본문, aside-오른쪽 사이드바, footer 시맨틱 태그 만들기
• div 안에 들어갈 h 속성과 p 태그, ul>li 태그 설정하기

 

② css 작성 전 id 값 설정하기

<div id="container">
    <header id="header">
        <h1>사이트 제목</h1>
    </header>
    <aside id="left-sidebar">
        <h2>사이드바</h2>
        <ul>
            <li>항목1</li>
            <li>항목2</li>
            <li>항목3</li>
            <li>항목4</li>
        </ul>
    </aside>
    <main id="contents">
        <h2>본문</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima incidunt recusandae voluptatum? Fugit commodi recusandae voluptatum consequatur debitis harum voluptatibus ipsum? Maiores, cum voluptate quo nobis iure nesciunt reiciendis alias.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima incidunt recusandae voluptatum? Fugit commodi recusandae voluptatum consequatur debitis harum voluptatibus ipsum? Maiores, cum voluptate quo nobis iure nesciunt reiciendis alias.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima incidunt recusandae voluptatum? Fugit commodi recusandae voluptatum consequatur debitis harum voluptatibus ipsum? Maiores, cum voluptate quo nobis iure nesciunt reiciendis alias.</p>
    </main>
    <aside id="right-sidebar">
        <h2>사이드바</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>

 

 

③ css 스타일 적용하기

• 전체 요소들을 감싸는 #container 너비 설정, 마진을 이용한 가운데 정렬
• header 테두리 설정, 패딩 설정, 배경색, 아래 요소와의 마진(bottom) 설정
• 왼쪽 aside 테두리 설정, 너비 설정, 패딩 설정, 배경색, float 속성(left) 설정
• main 테두리 설정, 너비 설정, 패딩 설정, 배경색, float 속성(left) 설정, 아래 요소와의 마진(bottom) 설정
• 오른쪽 aside 테두리 설정, 너비 설정, 패딩 설정,  배경색, float 속성(left) 설정
• footer 테두리 설정, 패딩 설정, float 속성에 영향을 받지 않도록 clear 설정, 배경색

#container {
    width: 1000px;
    margin: 0 auto;
}

header {
    border: 1px solid gray;
    padding: 20px;
    background-color: deeppink;
    margin-bottom: 20px;
}

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

main#contents {
    border: 1px solid gray;
    width: 535px;
    padding: 20px;
    background-color: deepskyblue;
    float: left;
    margin-bottom: 20px;
}

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

footer#footer {
    border: 1px solid gray;
    clear: both;
    padding: 20px;
    background-color: greenyellow;
}

 

 

3. 다단 레이아웃 연습하기

column 속성

• column-count: 다단의 개수 설정
• column-gap: 다단 사이 공백 설정
• column-rule: 다단 사이 선 효과
• cloumn-span: 다단 속성 제외

/* CSS */
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;}

<!-- HTML -->
<div id="col">
    <h2>다단 레이아웃</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur voluptatum veritatis dicta, ab, doloribus ipsum repellat quam molestias omnis corrupti consequatur blanditiis rerum mollitia sed fuga numquam quae quo reprehenderit.
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis alias voluptatum nulla nostrum neque quia ipsa iste maiores rerum, itaque atque perferendis. Voluptatibus omnis provident hic impedit corrupti iure recusandae!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos amet fugit, assumenda vero, tempore enim beatae quam impedit natus voluptatibus optio illum cum dicta consectetur consequatur explicabo error odio.
    </p>        
</div>

코드 적용 화면

 

4. flex 속성

• html 요소들을 수평 또는 수직 방향으로 정렬하여 레이아웃 설정을 보다 유연하게 도와주는 설정이다.
• 일반적으로 부모 요소를 flex container라 하고 그 안의 자식 요소들을 flex items라 칭한다.

<flex container 속성: item 정렬 방법을 설정할 때 사용>

• display: flex
• flex-wrap
  • nowrap(기본값): 컨테이너를 넘어가도 해당 크기에 맞춤
  • wrap: 요소 여유 공간이 없으면 다음 줄로 넘겨서 줄바꿈
  • wrap-reverse: wrap과 동일하지만 위쪽으로 넘겨서 줄바꿈

• justify-content
  • flex-start(기본값): item을 왼쪽 끝부터 수평으로 정렬
  • flex-end: item을 오른쪽 끝부터 수평으로 정렬
  • center: 가운데 정렬
  • space-between: 맨앞, 맨뒤 item을 넣고 사이에 여유 공간을 둔 채로 나머지 item 정렬
  • space-around: 맨앞, 맨뒤 공백을 두고 일정한 공간을 사이에 넣은 채로 item 정렬

• align-items
  • stretch(기본값): 수직으로 item을 꽉 채워서 정렬
  • flex-start: 맨위에서부터 item 채움
  • flex-end: 맨밑에서부터 item 채움
  • center: 가운데 정렬
  • baseline: 텍스트 베이스라인 기준으로 정렬

baseline 위치 확인을 위해 box4 font-size:30px 적용하였음

 

 

<flex items 속성: item 간의 비율과 순서를 정할 때 사용>

• order: item 순서 설정
• flex: item 비율 설정

 

/* CSS */
/* flex-wrap 연습 */
#container1 {
    width: 600px;
    height: 300px;
    margin: 0 auto;
    border: 3px solid red;
    display: flex;
    /* flex-wrap: ; */
}
#container1>div {
    width: 200px;
    border: 1px solid black;
    background-color: gold;
}
span {
    font-size: 30px;
    font-weight: bold;
    padding: 20px;
}

<!-- HTML -->
<!-- flex-wrap 연습 -->
<div id="container1">
    <div><span>1</span></div>
    <div><span>2</span></div>
    <div><span>3</span></div>
</div>

---

/* CSS */
/* justify-content, align-items 연습 */
#container2 {
    width: 600px;
    height: 200px;
    margin: 0 auto;
    border: 3px solid red;
    display: flex;
    /* justify-content: ; */
    /* align-items: ; */
}
#container2>div {
    width: 50px;
    border: 3px solid black;
    background-color: gold;
}

/* order, flex 연습 */
#box1 { order: 4; flex: 50%;}
#box2 { order: 1; flex: 30%;}
#box3 { order: 5;}
#box4 { order: 2;}
#box5 { order: 3;}

<!-- HTML -->
<!-- justify-content, align-items, order, flex 연습 -->
    <div id="container2">
        <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>4</p>
        </div>
        <div id="box5">
            <p>5</p>
        </div>
    </div>