본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] 레이아웃

레이아웃

다양한 디바이스에 따라 다양한 레이아웃의 유형을 배웁니다.


레이아웃의 종류

고정형 레이아웃(Fixed Layouts)

사이즈가 정해져 있는 고정형 레이아웃입니다. 사이즈가 정해져 있기 때문에 브라우저의 너비를 줄이면 스크롤바가 나타납니다.

유동형 레이아웃(Fluid Layouts)

사이즈가 화면 크기에 따라 변하는 레이아웃입니다. 화면 크기에 따라 변하지만 브라우저 너비가 작아지면 가독성에 문제가 생깁니다.

적응형 레이아웃(Adaptive Layouts)

특정한 디바이스에 따라 고정된 레이아웃을 설정하는 레이아웃입니다. 즉 각각의 디바이스에 따라 고정된 레이아웃 형태로 레이아웃이 변경됩니다.

반응형 레이아웃(Responsive Layouts)

화면 크기에 따라 레이아웃을 유연하게 조정하고 CSS 미디어쿼리를 사용한 복합적인 레이아웃입니다.

Sample1

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
 
 
 
 
 
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout 방식1</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,700,900&display=swap" rel="stylesheet">
    <style>
        *, *::after, *::before {box-sizing: border-box;}
        * {margin: 0; padding: 0;}
        body {
            background-color: #111;
            color : #000;
            font-family: 'Lato';
        }
        .wrap h1 {
            font-size: 75px;
            padding: 5%;
            color : #dc6e25;
        }
        .contents {
            width: 100%;
            margin: 20% 0 30%;
        }
        .content-item { 
            width: 1000px; 
            margin: 0 auto;
            max-width: 90%;
            position: relative;
            margin: 10% 0 20%;
        }
        .content-item:nth-child(even){
            margin-left: auto;
        }
        .content-item-title {
            text-align: right;
            font-weight: 300;
            text-transform: capitalize;
            color: #999;
        }
        .content-item:nth-child(even) .content-item-title {
            text-align: left;
        }
        .content-item-num {
            position: absolute; top: -250px; right: -10vw; 
            font-size: 25vw; opacity: 0.03; line-height: 1;
            font-weight: 100; 
            color: #fff;
        }
        .content-item:nth-child(even) .content-item-num {
            right: auto; left: -150px;
        }
        .content-item-imgWrap {
            position: relative;
            overflow: hidden;
            width: 1000px;
            padding-bottom: 57%;
            z-index: 10;
        }
        .content-item-img {
            height: 500px;
            position: absolute;
            width: 100%;
            background-size: cover; 
            background-position: 50% 0;
        }
        .content-item-desc { 
            margin-top: -120px;
            margin-right: -100px;
            font-size: 80px; line-height: 1.2;
            font-weight: 600;
            text-transform: uppercase;
            color: #fff;
            text-align: right;
            word-break: keep-all;
            position: relative; z-index: 20;
        }
        .content-item:nth-child(even) .content-item-desc {
            text-align: left; margin-right: 0; margin-left: -100px;
        }
        #section1 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so01.jpg);}
        #section2 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so02.jpg);}
        #section3 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so03.jpg);}
        #section4 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so04.jpg);}
        #section5 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so05.jpg);}
        #section6 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so06.jpg);}
        #section7 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so07.jpg);}
        #section8 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so08.jpg);}
        #section9 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so09.jpg);}
    </style>
</head>
<body>
    <div class="wrap">
        <h1>Parallax Scrolling</h1>
        <div class="contents">
            <section id="section1" class="content-item">
                <span class="content-item-num">01</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">높은 목표를 세우고, 스스로 채직찔한다.</p>
            </section>
            <section id="section2" class="content-item">
                <span class="content-item-num">02</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
            </section>
            <section id="section3" class="content-item">
                <span class="content-item-num">03</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
            </section>
            <section id="section4" class="content-item">
                <span class="content-item-num">04</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">기본을 중요하게 생각한다.</p>
            </section>
            <section id="section5" class="content-item">
                <span class="content-item-num">05</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">천 마디의 말보다 하나의 행동이 더 값지다.</p>
            </section>
            <section id="section6" class="content-item">
                <span class="content-item-num">06</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
            </section>
            <section id="section7" class="content-item">
                <span class="content-item-num">07</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">내 스타일을 다른 사람에게 강요하지 않는다.</p>
            </section>
            <section id="section8" class="content-item">
                <span class="content-item-num">08</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">나 자신의 이익을 위해 다른 사람을 이용하지 않는다.</p>
            </section>
            <section id="section9" class="content-item">
                <span class="content-item-num">09</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">다른 사람의 의견도 존중한다.</p>
            </section>
        </div>
    </div>
</body>
</html>

 

Sample2

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
 
 
 
 
 
 
 
 
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout 방식2</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,700,900&display=swap" rel="stylesheet">
    <style>
        *, *::after, *::before {box-sizing: border-box;}
        :root {font-size: 16px;}
        body {
            margin: 0;
            --color-text : #dc6e25;
            --color-link : #000;
            --color-bg : #111;
            --imgwidthmax: 550px;
            --aspect-ratio: 32/17;
            color: var(--color-link);
            background-color: var(--color-bg);
            font-family: 'Lato', sans-serif;;
        }
        .wrap h1 {
            font-size: 5rem;
            padding: 3rem;
            color: var(--color-text);
        }
        .contents {
            width: 100vw;
            margin: 25vh 0 30vh;
        }
        .content-item { 
            --imgwidth: calc(var(--imgwidthmax) * var(--aspect-ratio));
            width: var(--imgwidth);
            margin: 0 auto;
            max-width: 90vw;
            position: relative;
            margin: 10% 0 20%;
            will-change: transform;
        }
        .content-item:nth-child(even){
            margin-left: auto;
        }
        .content-item-num {
            position: absolute; top: -13vw; right: -10vw; 
            font-size: 25vw; opacity: 0.03; line-height: 1;
            font-weight: 100; 
            color: #fff;
        }
        .content-item:nth-child(even) .content-item-num {
            right: auto; left: -7vw;
        }
        .content-item-title {
            text-align: right; font-weight: 300; text-transform: capitalize;
            color: #999;
        }
        .content-item:nth-child(even) .content-item-title {
            text-align: left;
        }
        .content-item-imgWrap {
            position: relative;
            --imgwidth: 100%;
            margin: 0 auto;
            overflow: hidden;
            width: var(--imgwidth);
            padding-bottom: calc(var(--imgwidth) / (var(--aspect-ratio)));
            will-change: transform;
        }
        .content-item-img {
            --overflow: 40px;
            height: calc(100% + (2 * var(--overflow)));
            position: absolute;
            top: calc( -1 * var(--overflow));
            width: 100%;
            background-size: cover; 
            background-position: 50% 0;
            will-change: transform;
        }
        .content-item-desc { 
            margin-top: -8vw;
            margin-right: -10vw;
            padding: 3vw;
            font-size: 6vw; line-height: 1.2;
            font-weight: 600;
            text-transform: uppercase;
            color: #fff;
            text-align: right;
            word-break: keep-all;
            position: relative; z-index: 20;
        }
        .content-item:nth-child(even) .content-item-desc {
            text-align: left; margin-right: 0; margin-left: -10vw;
        }
        
        #section1 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so01.jpg);}
        #section2 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so02.jpg);}
        #section3 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so03.jpg);}
        #section4 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so04.jpg);}
        #section5 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so05.jpg);}
        #section6 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so06.jpg);}
        #section7 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so07.jpg);}
        #section8 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so08.jpg);}
        #section9 .content-item-img {background-image: url(http://flairgale.cafe24.com/para/images/so09.jpg);}
    </style>
</head>
<body>
    <div class="wrap">
        <h1>Parallax Scrolling</h1>
        <div class="contents">
            <section id="section1" class="content-item">
                <span class="content-item-num">01</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">높은 목표를 세우고, 스스로 채직찔한다.</p>
            </section>
            <section id="section2" class="content-item">
                <span class="content-item-num">02</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
            </section>
            <section id="section3" class="content-item">
                <span class="content-item-num">03</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
            </section>
            <section id="section4" class="content-item">
                <span class="content-item-num">04</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">기본을 중요하게 생각한다.</p>
            </section>
            <section id="section5" class="content-item">
                <span class="content-item-num">05</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">천 마디의 말보다 하나의 행동이 더 값지다.</p>
            </section>
            <section id="section6" class="content-item">
                <span class="content-item-num">06</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
            </section>
            <section id="section7" class="content-item">
                <span class="content-item-num">07</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">내 스타일을 다른 사람에게 강요하지 않는다.</p>
            </section>
            <section id="section8" class="content-item">
                <span class="content-item-num">08</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">나 자신의 이익을 위해 다른 사람을 이용하지 않는다.</p>
            </section>
            <section id="section9" class="content-item">
                <span class="content-item-num">09</span>
                <h2 class="content-item-title">advice</h2>
                <div class="content-item-imgWrap">
                    <div class="content-item-img"></div>
                </div>
                <p class="content-item-desc">다른 사람의 의견도 존중한다.</p>
            </section>
        </div>
    </div>
</body>
</html>

 

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기