CSS : Layout의 모든 것

📌layout 이란?

웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.

display는 layout을 적절하게 조정하는 중요한 속성이라고 볼 수 있다. 모든 요소들은 속성에 의거하여 기본값을 가지고있는데, 기본값은 대부분 block 혹은 inline 요소들로 구성되어있다.

block요소는 block-level요소라고 불리며, line요소는 inline-level이라고 말한다.

📌block

div 태그는 block-level의 표준이다. 무조건 한 줄을 점유하고 있기 때문에 block-level은 새로운 줄에서 시작하며, 왼쪽에서 오른쪽으로 최대한 확장된다.

``` - width/height 적용불가 - margin/padding-top/bottom 적용불가 - line-height를 원하는대로 사용할 수 없다.

📌inline

대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.

  <span>
  span태그는 가장 표준의 inline요소이다. 
  span은 문장의 흐름을 방해하지 않으면서 텍스트를 감싸주는 역할을 한다. 
  <a> 
  a태그는 가장 공공연한 inline요소이다.

• width/height 적용불가
• margin/padding-top/bottom 적용불가
• line-height를 원하는대로 사용할 수 없다.

inline-block

inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있디.

• width/height 적용 가능
• margin/padding-top/bottom 적용 가능
• line-height 적용 가능

📌position

position 속성은 태그를 어떻게 위치시킬지를 정의하며, 5가지의 값을 갖는다.

• static:기본값, 다른태그와의 관계에 의해 자동 배치되며 위치를 임의로 설정해 줄 수 없다.
• relative: 원래 있던 위치를 기준으로 좌쵸를 지정한다.
• absolute: 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준(부모)으로 위치가 결정된다.
• fixed: 원래의 위치와 상관없이 위치를 지정할 수 있지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다. 스크롤과 상관없이 항상 문서를 최 좌측 상단을 기준으로 좌표를 고정
• inherit: 부모태그의 속성값을 상속 받는다.

좌표를 지정을 해주기 위해서는 left, right, top, bottom속성과 함께 사용한다.
*position을 absolute나 fixed로 설정할 때 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.

📙 absolute와 relative

relative인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다.

728x90

반응형

'DEV' 카테고리의 다른 글

DOM & EVENT  (0)	2024.10.20
Responsive Web : 반응형 웹사이트  (2)	2024.10.20
Semantic Web과 Semantic Tag  (2)	2024.10.20
[Github] git token : personal access (깃 토큰 인증) / git push error 해결  (0)	2024.10.20
JavaScript : Object  (0)	2024.10.20