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 수업 - float 2 : holy grail layout 본문

CSS

[생활코딩] CSS 수업 - float 2 : holy grail layout

목표는 커리 2021. 3. 29. 04:48
728x90
SMALL

css 적용 안 했을때

<!doctype html>
<html>
    <head>
        <style>

        </style>
    </head>
    <body>
      <header>
       <h1>
           CSS
       </h1>
       </header>
       <nav>
        <ul>
            <li>position</li>
            <li>float</li>
            <li>flex</li>
        </ul>
        </nav>
        <article>
        <h2>
            float
            </h2>
        </article>    
           <aside>
            ad
            </aside>
            <footer>
            footer</footer>
    </body>
</html>

css41

nav와 article에 선 그어서 둘 다 커져도 선 유지하기

<!doctype html>
<html>
    <head>
        <style>
            header{
                border-bottom: 1px solid gray;
            }
            nav{
                float: left;
                width: 120px;
                border-right: 1px solid gray;

            }
            article{
                float:left;
                width: 300px;
                border-left: 1px solid gray;
            }
            aside{
                float: left;
                width: 120px;
            }
            footer{
                clear: both;
                border-top: 1px solid gray;
                text-align: center;
                padding: 20px;
            }
        </style>
    </head>
    <body>
      <header>
       <h1>
           CSS
       </h1>
       </header>
       <nav>
        <ul>
            <li>position</li>
            <li>float</li>
            <li>flex</li>
        </ul>
        </nav>
        <article>
        <h2>
            float
            </h2>
            와글와글
        </article>    
           <aside>
            ad
            </aside>
            <footer>
            footer</footer>
    </body>
</html>
  • border-right, border-left를 줘서 nav, article 어느 것이 커져도 선을 유지하기

css42

css는 테두리를 포함해서 계산한다.

  • 너무 복잡하다.
  • 각각의 엘레먼트들의 크기를 계산하는게 box-sizing
<!doctype html>
<html>
    <head>
        <style>
            *{
                box-sizing: border-box
            }
            .container{
                width: 540px;
                border: 1px solid gray;
                margin:auto;
            }
            header{
                border-bottom: 1px solid gray;
            }
            nav{
                float: left;
                width: 120px;
                border-right: 1px solid gray;

            }
            article{
                float:left;
                width: 300px;
                border-left: 1px solid gray;
                border-right: 1px solid gray;
                margin-left: -1px;
            }
            aside{
                float: left;
                width: 120px;
                border-left: 1px solid gray;
                margin-left: -1px;
            }
            footer{
                clear: both;
                border-top: 1px solid gray;
                text-align: center;
                padding: 20px;
            }
        </style>
    </head>
    <body>
     <div class="container">
      <header>
       <h1>
           CSS
       </h1>
       </header>
       <nav>
        <ul>
            <li>position</li>
            <li>float</li>
            <li>flex</li>
        </ul>
        </nav>
        <article>
        <h2>
            float
            </h2>
            와글와글
        </article>    
           <aside>
            ad
            </aside>
            <footer>
            footer</footer>
        </div>
    </body>
</html>

css43

728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 - filter  (0) 2021.03.31
[생활코딩] CSS 수업 - 배경  (0) 2021.03.30
CSS 수업 - float 1  (0) 2021.03.26
CSS 수업 : mediaquery 1 - 기본  (0) 2021.03.25
CSS 수업 - Multi column  (0) 2021.03.24
'CSS' Related Articles more
Comments