5. brackets ~ 레이아웃 기초 내용

룰루루 2021. 4. 2. 21:23

2021. 4. 2. 21:23

1. <brackets> 프로그램

: Editor의 일종으로, Atom보다 편리한 기능들이 들어있는 HTML, CSS, Javascript 등에 사용할 수 있는 에디터이다.

=> 앞으로는 이 에디터를 쓸 것 같다.

여기에 Emmet 추가 프로그램을 설치하면 대략 5가지 이상의 기능을 편리하게 쓸 수 있다.

1) 태그 자동완성 by [Tab] 키

ex) html 입력하고 Tab 누르면:

<html></html> 자동 완성

2) 여러 개의 태그 자동완성 by (태그 이름)*(반복할 수) + [Tab] 키

ex) li*3 입력하고 Tab 누르면:

<li></li> 자동 완성

3) 여러 개의 태그 포함관계 완성 by (상위 태그)>(하위 태그)

ex) html > head > style 입력하고 Tab 누르면:

<html>

<head>

<style>

</style>

</head>

</html> 자동 완성

+ 2번과 3번 합치기도 가능

4) 다음 태그로 넘어가기 가능 by [Ctrl]+[Alt]+[→]

5) 미리보기 기능 : 번개 모양 아이콘 클릭

2. 레이아웃

2-1. 인라인 VS 블럭레벨

: 태그의 종류이다.

인라인(inline) : 해당 태그를 사용해도 한 줄에 여러 태그와 요소 사용 가능

블럭레벨(block-level) : 해당 태그를 사용하면 한 줄에 한 태그만 사용 가능

<html>
<head>
    <style>
        h1,a{border:1px solid deepskyblue}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
</body>
</html>

위처럼 <h1> 태그는 따로 줄바꿈을 하지 않았는데도 한 줄을 혼자 사용하고, <a> 태그의 테두리는 다른 태그들의 영역과 한 줄에 같이 표시된다. 이 차이가 인라인과 블럭레벨의 차이이다.

위처럼 기본값이 인라인인 태그가 있고 블럭레벨인 태그가 있다.... 그러나 이를 바꿀 수 있다!

=> <style> 태그 문법에서 display 속성을 이용하면 가능하다.

<html>
<head>
    <style>
        h1{border:1px solid indianred ; display:inline}
        a{border:1px solid indianred ; display:block}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
</body>
</html>

이번에는 a 태그가 한 줄을 전부 사용하고, h1 태그는 다른 요소/태그들과 한 줄을 공유하고 있다.

2-2. Box Model

인라인과 블럭레벨과도 연관되어 있다. 각 요소들 사이의 간격과 관련이 있다.

1. box model에는 크게 디섯 가지 요소가 있다.

1) border : 테두리. margin과 padding 사이의 간격을 의미

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;}
        #bb{display:block ; border : 20px solid gold ;}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>   
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

2) margin : 주로 화면의 양 끝과 block element의 사이 간격을 의미

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        margin : 50px}
        #bb{display:block ; border : 10px solid gold ;
        margin : 100px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>   
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

3) padding : border 테두리와 그 안의 텍스트의 간격을 의미

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        padding : 50px}
        #bb{display:block ; border : 10px solid gold ;
        padding : 100px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>  
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

4) width : 테두리 상자(border)의 가로폭.

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        width : 500px}
        #bb{display:block ; border : 10px solid gold ;
        width : 1000px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

5) height : 테두리 상자(border)의 세로폭. height를 고정했는데 텍스트의 양이 많으면 삐져나올 수 있다.

<html>
<head>
   <meta charset="utf-8">
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        height : 50px}
        #bb{display:block ; border : 10px solid gold ;
        height : 100px}
    </style>
</head>
<body>
    <h1>Hello User</h1>   
    Welcome to  <a href="https://google.com" target="_blank">Search</a> Engine!
    <p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p> 
    <p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>

2. inline display 와 border display에 따라서 적용되는 방식이 다르다

1) inline display의 경우, 4), 5)번인 width 와 height 속성이 적용되지 않는다.

2) margin의 기준이 '화면의 양 끝과 element의 사이' 가 아니라 '양 element의 간격'이다.

<html>
<head>
    <style>
        #aa{display:block ; border : 10px solid forestgreen ;
        height : 50px ; margin : 100px ; padding : 20px  ; width : 300px}
        #bb{display:inline ; border : 10px solid gold ;
        height : 50px ; margin : 100px ; padding : 20px  ; width : 300px}
    </style>
</head>
<body>
    <h1 id="aa">Hello User</h1> 
    <a id="bb" href="https://google.com" target="_blank">rabindranath</a> tagore
</body>
</html>

2-3. Position(포지션)

: box model에서 각 컨텐츠 사이의 간격을 설정했다면, position은 각 요소를 배치할 위치를 설정한다.

position은 속성이고, 4가지 종류가 있다.

1. static

: 기본값. position이 설정되지 않은 상태. 자신이 속한 부모 태그와의 위치를 기준으로 한 상태!

2. relative

: static인 상태와 비교했을 때 얼마나 움직이는지를 설정. 부모 태그와의 기본 위치를 기준으로 얼마나 움직일지를 설정.

얼마나 움직이는지는 해당 element를 위/아래/왼쪽/오른쪽 으로 몇 px 움직일지로 설정하는데,

이때 이런 top/bottom/left/right 의 값을 offset(오프셋)이라고 한다.

(* position:relative 를 지정하지 않고 offset 값만 지정하면 반영되지 않는다.)

1) 오프셋을 지정할 때, 이동하려고 하는 방향과 반대 방향으로 지정해야 한다!

ex) 해당 요소를 왼쪽으로 이동시키려고 하면 offset을 right으로 지정

2) offset 적용 시 우선순위가 존재한다.

: top > bottom , left > right

ex) top 과 bottom 을 모두 지정한다면 top offset 값만 반영된다. left/right도 마찬가지.

<!DOCTYPE html>
<html>
  <head>
    <style>
      ol{border:3px dashed ; bordindexolor:deepskyblue}
        ul{text-align:center ; font-size:1rem}   
      #toright{position:relative ; left:150px}
      #toleft{position:relative ; right:150px}
      #totop{position:relative ; bottom:50px}
      #tobottom{position:relative ; top:50px}  
    </style>
  </head>
  <body>
   <ul>
    	<li id="totop">HTML</li>   <!-- 위로 이동 -->
    	<li id="toleft">CSS</li>   <!-- 왼쪽으로 이동 -->
    	<li style="font-weight:bold">JavaScript</li>   <!-- 아무 포지션 서식 적용 안 함 -->
    	<li id="toright">Python</li>   <!-- 오른쪽으로 이동 -->
    	<li id="tobottom">C</li>   <!-- 아래쪽으로 이동 -->
   </ul>
  </body>
</html>

3. absolute

: relative와는 다르게, 자신의 바로 위 부모가 아니라 자신의 부모 중 position 값이 static이 아닌 부모와의 위치를 기준으로 움직인다.

-> 그러므로 바로 위 부모와의 관계가 거의 끊긴다.

(그래서 border로 경계를 표시하면, 부모와 관계가 있을 때는 부모의 width를 따라가는 반면 관계가 끊긴다면 부모의 width를 따라가지 않고 딱 자신의 영역만큼으로 border의 너비가 제한된다. 소속이 애매해지기 때문임.)

cf) 만약 자신의 부모 태그(상위 태그)의 position 값이 전부 static이라면, 해당 태그의 offset 값은 최상위 태그인 <html> 태그의 위치를 기준으로 삼게 된다.

ex1) 기준 태그의 position 값이 absolute , 그 태그의 모든 상위 태그의 position은 static 일 때:

<html>
<head>
    <style>
        #parent{position:static}
        div{border:2px solid ; margin:20px ; text-align:center}
        #child{position:absolute ; left:0px ; top:0px ; background-color:coral}
    </style>
</head>
<body>
    <div>Coffee
        <div id="parent">Blended
            <div>Smoothie
                <div>Mango Smoothie</div>
                <div>Strawberry Smoothie</div>
            </div>
            <div>Frappchino
                <div>Mocha Frappchino</div>
                <div id="child">Zavachip Frappchino</div>
            </div>
        </div>
    </div>
</body>
</html>

: 해당 태그(Zavachip Frappuchino)는 offset 값이 상하좌우로 0px인데, 화면 맨 상단에 위치해 있으므로 <html> 태그를 기준으로 값을 정했음을 알 수 있다.

ex2) 기준 태그의 position 값이 absolute, html 다음으로의 상위 태그의(body 태그 제외) position이 absolute이고 나머지는 static일 때:

<html>
<head>
   <meta charset="utf-8">
    <title>Example</title>
    <style>
        #parent{position:absolute}
        div{border:2px solid ; margin:20px ; text-align:center}
        #child{position:absolute ; left:0px ; top:0px ; background-color:coral}
    </style>
</head>
<body>
    <div>Coffee
        <div id="parent">Blended
            <div>Smoothie
                <div>Mango Smoothie</div>
                <div>Strawberry Smoothie</div>
            </div>
            <div>Frappchino
                <div>Mocha Frappuchino</div>
                <div id="child">Zavachip Frappuchino</div>
            </div>
        </div>
    </div>
</body>
</html>

: 이번엔 기준값이 화면 좌상단이 아니라, #parent 가 적용된 Blended 부모 태그로 바뀌었다.

그런데 아까는 각 태그 요소들이 화면 폭을 다 채운 데에 비해, 지금은 position:absolute 인 Blended 요소를 포함한 하위 요소들은 화면 폭을 다 채우지 못한다.

        #parent{position:relative}

parent id의 속성을 relative로 바꾸면, Zavachip의 위치는 그대로이나 나머지 요소들은 다시 화면 폭을 그대로 채운다.

=> position:relative 와 position:absolute 의 차이는 단순히 자식 태그의 위치 기준이 바로 위의 부모 태그인지, position:static 이 아니면서 그나마 가장 가까운 부모 태그인지 만의 차이가 아닌 것이다. 화면상의 정렬에도 둘의 차이가 있다!

<정리>

1. relative 와 absolute 의 차이는 자식 태그의 위치가 누구를 기준으로 하는지이다.

1) relative : 바로 위의 부모 태그

2) absolute : 바로 위가 아닐 수도 있다. position:static 이 아니면서 가장 가까운 부모 태그를 기준으로 한다.

* 즉 position:absolute 또는 position:relative 인 가장 가까운 부모 태그의 위치를 기준으로 한다.

** 그러나 이 둘도 다르다. (자식 태그의 위치 기준이 최상위 html 태그가 아닐 경우에만 두 경우가 다름)

2-1) absolute : 요소들이 화면에 꽉 차게 정렬되지 않음

2-2) relative : 요소들이 화면에 꽉 차게 조절되어 정렬됨

4. fixed

: 스크롤바를 내려도 해당 element를 지정한 위치에 고정시켜 주는 '속성'이다.

absolute, relative와 마찬가지로 left, top 등으로 위치를 지정한다.

absolute와 비슷한 점 : 사용하면 바로 위 부모 태그와의 관계가 끊긴다. -> 해당 태그/element의 영역이 딱 그 안의 텍스트만 포함하는 범위로 제한된다.

<html>
<head>
    <style>
        #fix{position:fixed ; left:10px ; top:10px ; background-color:black ; color:white}
        #plus{position:fixed ; right:20px ; top:50px ; background-color:black ; color:limegreen}
    </style>
</head>
<body>
  <h1 style="text-align:center">KSY</h1>  <!-- 고정하지 않은 영역-->
   <h2 id="fix">CornSalad</h2>  <!-- 고정한 영역 1 -->
   <h4 id="plus">Most Delicious Appetizer Ever</h4>  <!-- 고정한 영역 2 -->
    <p style="margin-top:70px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex animi officia fugit molestias. Delectus odit, numquam reprehenderit eius adipisci illo, minus impedit voluptas excepturi aspernatur debitis labore, quasi dolore tempore. Reprehenderit voluptatibus accusantium consectetur sapiente sequi culpa eligendi totam aliquam libero, non modi nisi aperiam delectus ad sunt natus ex fuga quibusdam, debitis ratione est vel! Itaque eaque molestias fuga ab doloremque at, fugit ullam quia, debitis corporis ad, deserunt possimus distinctio qui? Perspiciatis explicabo optio aspernatur ducimus cum facere libero ab modi iure reiciendis perferendis praesentium voluptas voluptatibus, ullam, nemo veniam necessitatibus obcaecati tenetur similique consequatur voluptate.</p>
   
</body>
</html>

: 스크롤을 내리면 지정한 영역만 계속 고정되어 있다.

2-4. Float

1. float & clear

1) float 속성

이미지를 자연스럽게 배치하는 데 주로 사용하지만, 레이아웃에도 사용되는 '속성'.

정확히는 이미지 태그 <img>에 지정하면 해당 이미지와 영역이 겹치는 다른 element들로 하여금 해당 이미지의 영역을 비껴가게 해 준다.

-> 이미지를 왼쪽에, 해당 글은 바로 오른쪽에 배치하는 등의 연출이 가능하다.

float에는 2가지 값을 지정할 수 있다 : left 또는 right

left : 이미지를 왼쪽에 정렬

right : 이미지를 오른쪽에 정렬

2) clear 속성

float 속성을 무력화시킨다.

* float 속성은 img 태그(다른 element가 '피해가게 할' 대상)에 적용하지만,

<-> clear 속성은 다른 태그('그 element를 피하는 대상') 에 적용한다. (ex. p 태그)

주로 <style> 태그 안 img 태그에는 float 속성을 일반적으로 적용하고, float 속성을 적용하고 싶지 않은 일부 단락에 clear 속성을 적용하는 것으로 보인다.

clear에는 3가지 값을 지정할 수 있다 : left , right , both

left : float의 값이 left인 경우에만 float 속성을 무력화

right : float의 값이 right인 경우에만 float 속성을 무력화

both : float의 값에 상관없이 float 속성을 무력화 -> 셋 중에 가장 많이 쓰임

<html>
<head>
   <meta charset="utf-8">
    <title>Example</title>
    <style>
        img{width:200px ; float:right ; margin:15px}    
    </style>
</head>
<body>
   <img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank"> 
   <!-- float만 설정, clear 는 설정 안 함-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
   <img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank">
   <!-- float와 clear 모두 설정되어서 float 설정이 무력화됨-->   
    <p style="clear:both">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>           
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
</body>
</html>

위 이미지는 float 설정이 적용되어서 텍스트와 같이 나타나고, 아래 이미지는 float 속성이 적용되었지만 clear 속성으로 무력화되어서 기존의 html처럼 같은 줄에 텍스트와 이미지가 나타나지 않고 있다.

2. holy grail layout

: '최적의 구현' 이라는 의미로, 웹사이트를 가장 잘 나타내는 구현 방식을 찾는 것은 매우 어렵다는 뜻에서 나온 말인 듯

보통 웹사이트는 이런 식의 구현을 많이 사용하는데, 이는 기존의 HTML 태그만을 사용해서는 불가능했고, CSS에 와서야 float, clear 등의 속성을 이용하면서 가능해졌다.

<holy grail layout> 만드는 방법

1) 각 태그에게 적절한 역할 부여하기

: header, navigation bar, main content, ad, footer 등 다양한 부분으로 이루어져 있는데, 각 영역의 내용을 태그로 구분해줘야 한다.

* 단 임의로 태그를 사용하고 id나 class를 정의하는 것보다 기존에 존재했고 여러 영역/구성의 의미를 담은 html 태그를 사용하는 것이 더 바람직하다.

b/c 태그에는 그 내용이 전체 본문에서 어떤 역할을 하는지가 포함되어 있다.

cf) 바람직하지 못한 경우 : 제목을 head 태그로 표현하지 않고 strong, font-size 등으로 겉으로만 제목처럼 보이게 하기

그런 의미에서 각 영역의 역할을 나타내기에 적절한 html 태그들이 있다:

* 이 태그들을 그냥 html에서 사용하면 전혀 구분되지 않는다. 이 태그는 '의미상' 사용하고, 이를 시각적으로 구분짓는 것은 2단계에서 할 일이다.

-<header> : header. 페이지의 맨 위에 오는 중요한 핵심 내용을 나타내는 부분을 담당하는 태그

-<nav> : navigation bar. 왼 쪽의 목차나 다른 페이지를 안내하는 영역을 담당하는 태그

-<article> : (꼭 이 태그를 쓰는 것만은 아님) 여러 내용이 있을 때, 각각 다른 주제로 글을 구분하기 위해 사용하는 태그

-<aside> : 부수적인 내용을 나타내는 태그

-<footer> : 글의 맨 마지막, 밑 부분에 나오는 영역을 담당하는 태그

2) 시각적으로 각 태그의 영역을 구분하기 : float , clear 속성 이용

[주의1] 레이아웃에서 같은 줄을 공유하는 부분은 navigation bar, main content, ad 영역이고 나머지 header이랑 footer 영역은 다른 영역과 너비를 공유하지 않게 해야 한다.

-> 위 세 영역에 float 속성을 적용한다.

+) 통상적으로 내용은 위->아래, 왼쪽->오른쪽으로 작성되므로 맨 왼 쪽에 오는 영역(navigation bar) 부터 float 효과를 주고, 방향을 left로 지정한다.

[주의2] 여러 영역이 삐져나오지 않기 위해선 float와 width를 같이 지정해야 한다.

[주의3] 마지막의 footer 영역은 float효과의 영향을 받으면 안 되므로, clear:both 속성을 이용해서 float 효과를 무력화시킨다.

[주의4] float 속성 적용한 세 영역을 구분하는 border를 설정하는데, 어떤 영역이 더 긴지에 상관없이 해당 border가 header과 footer 영역 사이를 모두 이을 수 있게 해야 한다.

[주의5] 창 사이즈를 조절하다가 간격이 좁아지면 float 속성이 깨지고 레이아웃이 흐트러진다.

-> 본문 전체의 너비를 고정시키는 방법을 사용할 수 있다.

* 창의 사이즈에 따라서 레이아웃의 크기가 자동 조절되는 것도 바람직하지만, 아직은 구현할 수 없다.

* 이때 border의 두께 값이 전체 테두리에 포함되지 않는다. 이를 고려해야 한다.

(페이지 우클릭 -> 검사 에서 각 영역의 width, border width를 확인할 수 있지만 너무 번거롭다.

=> box-sizing 방법은 border width를 각 영역의 width를 더할 때 같이 포함시키는 방법을 알려준다.)

ex) 한 영역의 너비가 300px, border가 50px이면 총 너비는 350px이므로 주의해야 한다.

* flex : 창의 넓이 등 다양한 변화 상황에서 레이아웃을 좀 더 쉽게 짤 수 있도록 도와준다. [심화과정]

* margin:auto 로 설정하면 해당 element를 가운데 정렬시키는 것과 같은 효과를 낼 수 있다!

<실습>

<html>
<head>
   <meta charset="utf-8">
    <title>Holy Grail Layout</title>
    <style>
        h1{text-align:center ; background-color:black ; color:white}
        .fix{width:700px ; border:1px solid black ; margin:auto}
        header{border-bottom:1px solid black ; text-align:center}
        nav{float:left ; border-right:1px solid black ; margin-right:0px ; width:150px ; padding:10px}
        article{float:left ; border-left:1px solid black ; border-right:1px solid black ; width:350px ; margin-left:-1px ; margin-right: 0px ; padding:20px }
        aside{float:left ; border-left:1px solid black ; width:100px ; padding:10px ; margin-left:0px}
        footer{clear:both ; border-top:1px solid black ; padding:20px ; text-align:center}
    </style>
</head>
<body>
<div class="fix">
<header><h1>Italian Food</h1><p>Qui eos a aut cum obcaecati sint sit, laborum. Autem, in neque.</p></header>
<nav><ul>
    <li>Pasta</li>
    <li>Pizza</li>
    <li>Risotto</li>
    <li>Salad</li>
    <li>Steak</li>
</ul></nav>
    <article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid numquam iusto fugit quia ea ipsum sint earum alias tempore quibusdam, voluptatibus suscipit nisi, saepe et adipisci amet. Deleniti vitae nisi, ullam quod voluptatum doloremque facilis corrupti omnis, consequuntur blanditiis cupiditate itaque voluptatem minima odit quo soluta id sapiente! Voluptate dolore fuga autem sit omnis, consequatur quia pariatur qui non tenetur eum expedita provident a nisi repellat iste, sequi accusamus maiores molestias et labore ratione illo, minus perspiciatis. Architecto nemo itaque facilis nam excepturi reiciendis nostrum ducimus sunt rerum. Doloremque quidem veniam rem delectus, facere aliquam nam nemo quisquam? Laborum eos qui voluptatem, culpa amet officia in dicta, quibusdam numquam modi at repellendus fugiat est consequuntur porro illum dignissimos maiores deleniti? Deserunt assumenda dolorem provident fugiat, natus, modi facere itaque amet ipsum, omnis dolore, animi quis sed atque consectetur magni.</p><p> Accusantium ab numquam adipisci doloremque necessitatibus fugit minima, illum totam odit veniam ducimus voluptatem sunt tempora, culpa voluptates commodi vitae consequuntur ipsum dicta! Pariatur, voluptates, velit. Deserunt tenetur eum autem suscipit harum sequi reprehenderit totam officiis, quis corporis nam, exercitationem ut fugiat aperiam consequatur dicta eaque omnis qui quas, aut porro dolores a. Quos necessitatibus eius illum nesciunt et, fugit itaque est provident sunt eligendi non animi corporis officiis atque modi dolores nulla nemo, numquam excepturi, consectetur.</p><p> Asperiores, nihil excepturi. Nesciunt tenetur eaque voluptatem deleniti aperiam quisquam accusantium, maxime placeat voluptates velit expedita, cumque, obcaecati, quae repellendus. Et nulla, in cum nisi itaque ea, doloremque magnam deleniti dolore doloribus asperiores nobis ipsa aliquam corporis vero, rerum, hic accusamus.</p><p> Laborum provident cupiditate harum perferendis voluptate fuga laudantium animi et tenetur veniam, vitae maxime distinctio doloribus quisquam delectus unde tempora, sunt nam recusandae a saepe inventore. Minima, saepe. Culpa repellat qui totam similique earum aspernatur molestiae debitis atque aperiam vitae in excepturi expedita veniam adipisci, velit voluptatibus exercitationem asperiores nostrum quod distinctio. Alias, consectetur sed optio voluptatum recusandae, aliquid repellat deserunt consequuntur delectus vero, exercitationem facere quidem. Perspiciatis reprehenderit omnis sit ducimus voluptates, quasi recusandae a, eligendi, maiores labore ipsam natus laborum vero at dicta. Ipsa velit dolor quis asperiores illum obcaecati repudiandae dicta magni, adipisci fugit voluptate eaque, quos, assumenda aut. Nisi quas velit nihil voluptate culpa qui architecto, voluptatibus, esse minima corporis dicta pariatur eius. Amet corporis necessitatibus quia, inventore neque!</p><p> Voluptatem rem id architecto sed animi libero asperiores officia reprehenderit! Quae accusamus illo beatae et dignissimos dolore sed optio eligendi amet. Aliquam architecto ipsam facilis, exercitationem laboriosam dolor mollitia suscipit. Fugit quo, eum possimus. Corporis officiis, rerum facere sequi dolore sed iste, mollitia praesentium repellendus ratione est tenetur. Molestiae iure beatae, delectus quasi, ipsum at! Quasi eius minus ex, minima rem voluptates velit, non deleniti voluptas error, modi possimus qui iusto numquam vero, sed maiores! Nostrum, illo magnam iusto architecto id esse voluptatum repellat! Impedit fugiat quidem esse itaque. Hic inventore voluptatem id dolorem esse, voluptas perferendis, facilis autem voluptates nesciunt commodi ab dignissimos accusantium qui ex sequi tempora numquam, consequatur et nulla itaque non neque eius deserunt? Eveniet, necessitatibus.</p></article>
<aside> Nisi perferendis pariatur provident, blanditiis aliquam aspernatur expedita earum sit eos rerum voluptates vero, soluta laborum necessitatibus beatae non sequi nobis recusandae.</aside>
<footer>Molestias nisi vitae officia id, explicabo praesentium!</footer>
    </div>
</body>
</html>

'front-side > CSS' 카테고리의 다른 글

7. 레이아웃 (0)	2021.04.07
6. 레이아웃 추가(심화)내용 (0)	2021.04.05
4. 타이포그래피-font ~ 조화 (0)	2021.04.01
3. 선택자 fin ~ 타이포그래피 (0)	2021.03.30
2. 선택자 (0)	2021.03.29

아스