HTML> position, block & inline

오늘은 HTML 에서 레이아웃 구성에 중요한 축들 중 하나인 inline, block 요소와 position 속성에 대해 정리를 해보려한다.🤔 상당히 자주 사용하는 속성이지만 제대로 설명하거나 정의하기는 어려운 내용인듯🤪

inline & block 요소

HTML에서 inline 요소와 block 요소는 각각의 다른 특징을 지니고 있는데 일단 HTML의 태그들이 어떤 요소에 해당하는 지 부터 확인해보려한다.

• block 요소
  <h1> ~ <h6> <table> <ul> <ol> <p> <video> <form> <header> <hr> <div> <canvas> <blockquote> <aside> <article>
  이보다 많은 태그들이 존재하지만 이런 태그들이 존재한다.

• inline 요소
  <a> <span> <i> <img> <b> <code> <map> <button> <strong> <input> <textarea>
  inline 요소 또한 더 많은 태그들이 존재한다.

나열해 두고 보니 block요소는 확실히 한 블록을 차지할만한 태그들이 많고 inline요소에는 내부 삽입요소 로써 동작하는 input a button 등의 태그가 많다는 걸 확인할 수 있다.

block 요소

block 요소는 한 영역을 전부 박스형태로 차지하는 요소들 이다. 그 때문에 별도의 값 지정을 안할시에는 width값이 100%로 됩니다. 해당 태그의 라인을 전부 차지합니다. height width 와 같은 크기 조정이 가능하고 margin padding 과 같은 여백 지정이 전부 가능하다.

inline 요소

inline 요소는 기본적으로 대상의 요소 길이 만큼만의 영역이 자동으로 설정되고 새로운 라인을 생성하며 차지하지도 않는다. (ex: 인라인 요소만 3개를 붙여 작성시 3가지 요소들이 각 줄씩 3줄이 표현되는 것이 아닌 한 줄에 3요소가 모두 표현) 높이 또한 폰트의 크기만큼만 자동설정 된다. width height 와 같은 크기 명시가 불가능하고 margin 의 위 아래 여백 역시 무시된다. padding은 좌 우는 잘 적용되지만 위 아래는 시각적으로만 추가되고 공간을 차지하지는 않는다고 한다.

inline-block

inline-block 요소는 block과 inline을 적절히 섞어 놓은 요소이다. inline-block 은 inline와 같이 줄바꿈이 되지않고 width와 height의 지정이 가능한데 만약 지정하지 않을 시엔 inline처럼 요소의 길이만큼만 영역을 차지한다.

position

포지션 속성의 가장 포인트는 요소의 위치를 원하는 곳으로 조절하기 위해 기준을 어느 기준으로 삼느냐가 가장 중요한 포인트이고 background-position 과 다른점이다. (background-position은 단순히 좌표로 배치함)

static : 위치를 조절할 수 없고 기준이 없음을 선언 (디폴트 값)
relative : 대상 자신을 기준으로 상대 좌표를 사용하여 배치함
absolute : 위치 상의 부모 요소를 기준으로 상대 좌표를 사용하여 배치함
fixed : 뷰포트(브라우저)를 기준으로 대상을 항상 보이게끔 고정함

위의 두 그림이 가장 이해하기좋은 예제인 것 같아 MDN에서 가져왔다.

relative 는 대상 자신을 기준으로 삼기때문에 원래 있던 곳에서 상대 좌표로 배치가 되는 것을 볼 수 있다.

absolute 는 위치 상의 부모 요소를 기준으로 좌표를 사용하기 때문에 MDN의 예시에서는 뷰포트를 기준으로 해당 좌표에 배치가 된 것을 확인할 수 있다.

위치 상 이라는 표현이 그냥 부모 요소를 기준으로 배치하는 것과 다른 점은 만약 1 2 3 4 박스를 모두 포함하는 부모 박스가 있다고 가정해볼 때, 2번째 박스가position: abosulte 가 되면 무조건 부모 박스를 기준으로 위치를 정하는 것이 아니라 부모 박스에 포지션 값(기준) 이 있는지 확인한 후에 존재할 때 그 부모를 기준으로 배치한다. 없을 시엔 그 부모의 부모로 계속 탐색을 이어가는데 만약 존재하지 않을 경우엔 뷰포트 기준으로 설정된다.

이런 이유로 원하는 대상에 position: abosulte 를 부여하고 싶을 때는 부모 태그에 가장 무난한 relative를 부여한다. (부모의 position 속성이 디폴트 값인 static 상태 일 경우엔 기준이 되지 못함으로 그 부모의 부모로 탐색을 이어나감) 그럼 외부적으로 눈에 보이는 변화는 없지만 원하는 태그를 손쉽게 조절할 수 있다.

fixed 는 뷰포트(브라우저)를 기준으로 배치하기 때문에 부모 태그에 position 값이 존재함과 상관없이 뷰포트를 기준으로 배치를 하게된다.

이 외에 sticky 속성이 있는데 보면 무슨 얘기인지 이해가 쉽지만 말로 설명하기 가장 어려운 속성인듯 하다.🤪

sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
- MDN 발췌 -

MDN의 정의가 개인적으론 어렵게 느껴지는데 position: sticky 를 사용시에 평소에는 디폴트 값인 position: static 과 마찬가지로 일반적인 흐름을 따르다가, 스크롤 위치가 정해진 한계에 이르면 그때 부터는 fixed 속성과 같이 화면에 고정할 수 있는 속성이다. 비교적 최근에 많이 사용하게된 속성인데 sticky 속성을 활용시 최근 등장하는 멋진 웹사이트를 구현하는데 많은 도움이 되는 것 같다. 주의할 점은 IE 11 브라우저와 안드로이드 4.x 이하 버전에서는 지원하지 않는다. 그래도 지원하지 않는 브라우저에선 static 으로 동작해도 크게 어색하지 않기 때문에, 최신 웹사이트에선 멋있게 표현되고 구 버전에서는 큰 오류없이 어색하지 않게 잘 넘어갈 수 있는 좋은 속성인 것 같다.