TIL.07

Layout의 모든것

layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것
웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.

1. Position

:: html 코드는 작성한 순서대로 페이지에 나타난다.
이때 CSS의 position property를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 배치시킬 수 있다.

• position: relative;
• position: relative;
• position: absolute; // position이 static이 아닌 parent를 기준으로 고정
• position: fixed; //해당 브라우저의 페이지를 기준으로 고정

2. inline과 inline-block, block

Block element vs. Inline element

1. 의의

(1) Block element

-대부분의 HTML element(요소)는 block요소에 해당하는 태그들이다.
ex. <header>, <footer>, <p>, <li>, <table>, <div>, <h1>등

-이 요소들은 '바로 옆(좌우측)에 다른 요소를 붙여 넣을 수 없다.'는 뜻이다.

(2) Inline element
ex. <span>, <a>, <img>
-요소끼리 서로 한 줄에, 바로 옆에 위치 할 수 있다.

2. display와 float

   Block 요소의 성질을 가진 태그일지라도 CSS를 사용하여 Inline 스타일로 바꾸도록 하는 CSS property로 display와 float 가 있다.

.block {
  float: left;
}

.block {
  display: inline-block;
}

해당 property에 위와 같은 값을 부여하면,
요소 옆에 위치하는 inline성질로 변하게 된다.

반대로 원래의 inline성질을 block으로 바꾸게 할 수도 있다.

 .inline{
   display: block;
 }

display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다. 이는 JavaScript와 결합하여 큰그림을 그릴때 사용한다.
요소를 보이게/안보이게 하는 효과랄까

3. float

_페이지 전체의 레이아웃을 잡을 때에 정말 중요했던,,, 도구

• float 속성: left, right, none 등

_float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다.
이 문제를 해결하기 위해

clear property를 사용한다.
<br class="clear">