CSS 레이아웃

 

 

 

 

1. display

   - html 요소가 차지하는 공간을 결정하는 CSS 요소입니다.

   - 각 html 요소는 display가 지정되어 있으며, CSS 에서 새롭게 지정해 줄 수도 있습니다.

 

   inline

      - span 태그 등이 여기에 속합니다.

      - 내부 콘텐츠의 크기가 영역의 크기이며, 임의로 크기를 지정할 수 없습니다.

      - margin, padding의 top/bottom 을 지정하지 못합니다.

 

   block

      - div 태그, p 태그가 여기에 속합니다

      - 영역의 크기를 width, height로 지정할 수 있습니다.

      - width를 지정하지 않으면 가로 전체를 차지합니다.

      - 여러가지 요소가 세로로 배치됩니다.

 

   inline-block

      - input 태그가 여기에 속합니다.

      - 영역의 크기를 width, height로 지정할 수 있습니다.

      - 여러 요소가 가로배치가 됩니다.

 

 

 

 

2. display: none 과 visibility: hidden

   none

      - html 요소를 없애는 속성입니다.

      -  display : none; 은 레이아웃 자체에서 요소를 없애버리기 때문에,

            width와 height를 가지고 있더라도 적용되지 않습니다.

   visibility : hidden

      - html 요소를 안보이게 하는 속성입니다. 

      - none과의 차이점

         visibility:hidden; 은 단순히 보이지만 않게 하는것이므로, 지정된 width와 height를 가지고 구역을 차지하고 있습니다.

 

 

 

 

3. float

   - 기본적인 블록 또는 인라인의 계산방법을 무시하고 별도의 배치 효과를 가지게 하는 속성입니다.

   - 보통 기사(article)와 같이 사진과 글이 어울리게 만드는데 사용합니다.

   - display: flex 가 나온 이후로는 잘 사용하지 않습니다.

   none

   - 본인이 차지할 수 있는 영역을 모두 차지합니다.

   left & right

   - 요소를 왼쪽 / 오른쪽으로 이동시키고, 텍스트 요소 등의 추가 내용은 오른쪽/왼쪽으로 이동시킵니다.

 

 

 

 

4. position

   - Normal Flow

      : 레이아웃을 변경하지 않았을 경우 웹페이지 요소가  일반적으로 레이아웃을 배치하는 흐름

   - Position

      : 웹 페이지 상에 요소를 배치하는 방법

      1) static : position의 기본값, normal flow 에 따라 위치를 조절합니다.

 

      2) relative : 요소를 normal flow에 따라 배치한 이후에,

         자기자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.

         - 반대되는 두 속성을 같이 사용하면 한쪽이 무시됩니다.

            - top과 bottom이 같이 있는 경우 bottom이 무시됩니다.

            - left와 right를 같이 사용한경우 right가 무시됩니다.

 

      3) absolute : 요소를 normal flow에서 제거하고 페이지 레이아웃에 공간도 배정하지 않습니다.

         자신에게 가장 가까운 부모 블록을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.

         - 부모 블록 중 position이 static이 아닌 요소를 찾아 기준점으로 삼습니다.

         - 반대되는 두 속성을 같이 사용하면 한쪽이 무시됩니다.

            - top과 bottom이 같이 있는 경우 bottom이 무시됩니다.

            - left와 right를 같이 사용한경우 right가 무시됩니다.

 

      4) fixed : 요소를 normal flow에서 제거하고 페이지 레이아웃에 공간도 배정하지 않습니다.

         뷰포트를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.

         - scroll을 해도 화면에 고정됩니다.

         - 항상 화면에 보이는 navigation bar, 또는 floating button 등을 만드는 데 사용합니다.

 

      5) sticky : 요소를 normal flow에 따라 배치한 이후, 해당 위치보다 스크롤을 내리는 경우

         fixed와 같이 변합니다. 

         - 스크롤이 해당 레이아웃보다 위에 있는경우 relative, 레이아웃보다 아래에 있는경우 fixed로 변합니다.

 

 

 

 

5 . overflow

   - 레이아웃 내부의 내용이 레이아웃을 침범하는경우의 스타일을 설정하는 속성입니다.

   1) visible : overflow의 기본값입니다. 레이아웃을 무시하고 내용이 뚫고 나옵니다.

   2) hidden : 레이아웃을 침범하는 내용은 잘려져서 보이지 않습니다.

         하지만 스크롤 컨테이너이므로 코드를 사용해 스크롤(offsetLeft 속성) 할 수는 있습니다.

   3) clip : hidden처럼 레이아웃을 침범하는 내용은 잘려져서 보이지 않습니다.

         하지만 hidden과는 다르게 코드를 사용한 스크롤링조차 막습니다.

   4) scroll : 레이아웃에 스크롤이 추가됩니다.

   5) auto : 브라우저가 자동으로 선택해줍니다.

 

 

 

 

6. z-index

 

   - z 축 기준의 위치를 지정합니다.

   - 두개 이상의 레이아웃이 겹칠 때, z축이 큰 값이 앞에 위치합니다.

   - static인 경우 먼저 생성된 레이아웃보다 나중에 생성된 레이아웃이 우선권을 가집니다.

   - static 보다 다른 position이 적용된 요소들이 우선권을 가집니다.

   - 동일한 position인 경우도 나중에 생성된 레이아웃이 우선권을 가집니다.