250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - flex 4 : holy grail layout 본문

CSS

CSS 수업 - flex 4 : holy grail layout

목표는 커리 2021. 3. 22. 04:33
728x90
SMALL

css36

<!doctype>
<html>
    <head>

    </head>
    <body>
        <div class="container">
           <header>
               <h1>생활코딩</h1>
           </header>
            <section>
                <nav>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </nav>
                <main>
                    생활코딩은 일반인을 위한 코딩 수업입니다.
                </main>
                <aside>
                    AD
                </aside>
            </section>
            <footer>
                <a href="https://open">홈페이지</a>
            </footer>
        </div>    
    </body>
</html>

css37

<!doctype>
<html>
    <head>
        <style>
            .container{
                display:flex;
                flex-direction: column;
            }
            header{
                border-bottom: 1px solid gray;
                padding-left: 20px;
            }
            footer {
                border-top: 1px solid gray;
                padding-left: 20px;
                text-align: center;
            }
            .content{
                display: flex;
            }
            .content nav{
                border-right: 1px solid gray;
            }
            .content aside{
                border-left: 1px solid gray;
            }
            nav, aside {
                flex-basis: 150px;
                flex-shrink: 0;
            }
            main{
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
           <header>
               <h1>생활코딩</h1>
           </header>
            <section class="content">
                <nav>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </nav>
                <main>
                    생활코딩은 일반인을 위한 코딩 수업입니다.
                </main>
                <aside>
                    AD
                </aside>
            </section>
            <footer>
                <a href="https://open">홈페이지</a>
            </footer>
        </div>    
    </body>
</html>

css38

  • flex를 줘서 가운데 내용만 화면이 커질때 커지고 작아지는 속성을 부여한다. nav와 광고부분은 크기를 그대로 유지한다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - Multi column  (0) 2021.03.24
CSS 수업 - flex 5 : 기타 속성 들  (0) 2021.03.23
CSS 수업 - flex 3 : basis & grow & shrink  (0) 2021.03.19
CSS 수업 - flex 2 : basic  (0) 2021.03.18
CSS 수업 - flex 1 : intro  (0) 2021.03.17
'CSS' Related Articles more
Comments