repl.it [🚀 Check Point] 18-3. 레이아웃의 모든 것

position - relative, absolute, fixed

position: relative - 기존 위치 기준, 다른 요소에 영향을 미치지 않음
position: absolute - 다른 요소 기준(조상 중에서만 선택 가능), 포지션이 지정되어 있는 가장 가까운 조상 기준
position: fixed - 기준, 기준을 바꿀 수 없고 원래 자리를 남기지 않음

https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1 참고용


inline, inline-block, block

block

한 영역을 차지하는 박스 형태를 가지는 성질. 기본적으로 width값이 100%가 되며 라인이 새로 추가됨.

  • width와 height 값을 지정할 수 있다.

  • margin과 padding을 지정할 수 있다.

<aside>, <div>, <header>, <h1~>, <table>, <p>, <ul>, <video> 등이 있다.

inline

주로 텍스트를 주입할 때 사용되는 형태로, block처럼 width 값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가되지 않음. 높이 또한 폰트의 크기만큼 잡힘(line-height로 설정 가능).

  • width와 height를 명시할 수 없다.

  • margin은 위아래엔 적용되지 않는다.

  • padding - 좌우는 공간과 시각적인 부분이 모두 적용.
    위아래는 시각적으로는 추가되지만 공간을 차지하지는 않는다.

<a>, <span>, <img>, <b>, <input>, <br>, <textarea>, <button> 등이 있다.

<img> 요소는 inline 요소임에도 block의 특징(크기 조절 가능)을 가지고 있다.

https://blog.naver.com/cookr3/222049737641 참고용

inline-block

inline 요소와 block 요소의 특징을 모두 갖고 있는 요소.

  • 줄바꿈이 이루어지지 않는다.

  • block처럼 width와 height를 지정 할 수 있다.

  • 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

(참조 : https://seungwoohong.tistory.com/23)

+margin: auto와 text-align: center의 차이

margin: auto - 봉투 이미지를 가운데 정렬할 때

margin: auto는 노란봉투처럼 정렬대상이 block 요소인 경우, 즉 width 값이 있는 경우에 사용한다.
기본적으로 image는 사이즈가 있으니 margin 값으로 가운데 정렬을 하는듯.

text-align: center - '봉투를 열어봐!' 글자를 가운데 정렬할 때

text-align: center는 (width,height 값이 없는)inline 요소를 가운데 정렬할 때 사용한다. 즉, text 성질의 요소를 가운데 정렬할 때 사용한다.

(참조 : https://blog.naver.com/llovemilton/222187190951)


float

본래 해당 html 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어진 속성이지만, 현재 레이아웃 설계 과정에서 많이 쓰이는 위치 속성이다.

float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후 등장하는 요소들이 float 속성의 영향을 받지 않도록 설정해준다.

https://www.zerocho.com/category/CSS/post/5881edef636a7f0b8e8507d8 참고용

0개의 댓글