[CSS] 배치 스타일

요소의 배치 속성

  ① 블록 라벨 요소

      - 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소

  

  ② 인라인 레벨 요소

      - 줄을 차지하지 않는 요소

      - 화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 나머지 공간에는 다른 요소 가능

 

선택자 { display : none | block | inline | inline-block | flex ; }

 

  - none : 숨김

  - block

      : 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지함

      · width, height, margin, padding 속성을 지정할 수 있음

  - inline

      : 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됨

      · block 속성 값과의 차이점

          : width, height, margin, padding 속성을 지정할 수 없음

  - inline-block

      · inline 요소처럼 줄바꿈 없이 나란히 배치됨

      · block 요소처럼 width, height, margin, padding 속성을 지정할 수 있음

  - flex

      · 플렉스 박스 레이아웃 : https://young0105.tistory.com/63

 

 

---

요소를 왼쪽/오른쪽에 떠 있게 배치 (어울림 배치)

선택자 { float : left | right | none ; }

 

  - left : 요소를 문서의 왼쪽에 떠 있게 만듦

  - right : 요소를 문서의 오른쪽에 떠 있게 만듦

  - 동일하게 지정된 경우, 나란히 배치됨

 

float 속성 무효화

선택자 { clear : none | left | right | both ; }

 

  - left : left로 설정된 float 요소에 대한 영향을 받지 않음

  - right : right로 설정된 float 요소에 대한 영향을 받지 않음

  - both : float 요소에 대한 영향을 받지 않음

 

 

반응형

728x90

---

요소 위치 지정

선택자 { position : static | relative | absolute | fixed ; }

 

  - static 

      : 요소의 문서의 흐름에 맞춰 배치함

      · 위치를 지정하는 left, top 등의 속성이 적용되지 않음

  - relative

      : 다른 요소에 대한 상대적인 위치를 사용함

      · 위치를 지정하는 left, top 등의 속성을 사용할 수 있음

  - absolute 

      : 원하는 위치를 지정해 배치함 

      · left, top, right, bottom 속성으로 네 모서리에서 얼마나 떨어져 있는지 지정 가능

  - fixed

      : 지정한 위치에 고정해 배치함 (브라우저 기준)

      · 좌표 기준 : 왼쪽 위 꼭짓점 (0, 0)

      · 화면에서 요소가 잘릴 수도 있음

      · 화면을 스크롤하더라도 계속 같은 위치로 고정됨

 

/* 부모 선택자 내부를 기준으로 위치를 설정해서 배치하기 */

부모선택자 { position : relative ; }

자식선택자 {
    position : absolute ;
    /* 위치 설정 */
    top | left | right | bottom : ... ; 
}

 

 

---

요소를 숨기거나 보이게 하기

선택자 { visibility : visible | hidden | collapse ; }

 

  - visible (기본값)

      : 화면에 요소를 표시함

  - hidden 

      : 화면에서 요소를 숨김

      · 요소가 차지하는 크기는 그대로 유지됨 → 다른 요소들의 배치에 영향을 미침

  - collapse 

      : 표의 행, 열 등에서 지정하면 서로 겹치도록 조절함

          → 그 외의 영역에서 사용하면 hidden 속성 값처럼 처리됨

 

 

---

요소 쌓기

선택자 { z-index : 순서숫자 ; }

 

  - 순서숫자 값이 클수록, 값이 작은 요소보다 위에 쌓임