1. position 속성 - relative, absolute, fixed
-
Position 속성
태그를 어디에 어떻게 위치시킬지 관여하며 5개의 값을 갖는다. -
static :
다른 태그와의 관계에 의해 일반적인 문서 흐름에 따라 자동으로 배치되며 임의로 설정할 수 없다. -
relative :
별 다른 속성을 적용하지 않으면 static과 동일하게 작동하며 top, bottom, right, left 값을 적용하면 원래 있던 위치를 기준으로 좌표를 지정한다.
또한, 위치를 이동시키는 용도로 사용되는 것 외에 absolute를 적용하는 요소의 기준이 된다. -
absolute :
relative, absolute, fixed 속성이 선언 된 부모 태그를 기준으로 배치한다.
부모 태그에 위치를 지정한 요소가 없다면 문서 본문을 기준으로 배치되어 페이지 스크롤을 따라 움직인다.
최종 위치는 top, bottom, right, left 값이 결정하며 다른 요소가 선점한 위치 위에 덮어 씌워진다. -
fixed :
부모 태그의 position 속성과는 상관 없이 사용자가 보고 있는 화면(=뷰포트)을 기준으로 항상 고정된 자리에서 스크롤을 따라온다.
최종 위치는 top, bottom, right, left 값이 결정하며 다른 요소가 선점한 위치 위에 덮어 씌워진다. -
sticky :
평소엔 문서 안에서 static처럼 일반적인 흐름에 따르나 스크롤의 위치가 미리 설정한 위치에 도달하면 fixed처럼 위치를 고정하고 스크롤을 따라 움직인다.
만약 스크롤이 sticky를 적용한 요소의 부모 태그의 영역을 지나면 다시 static처럼 일반적인 흐름에 따라 고정이 풀림 = sticky를 선언한 태그의 부모 태그 영역 안에서만 고정된다는 뜻.
사용하기 전 본문보다 height가 작아야하며 높이값과 함께 top, left와 같은 위치값을 "필수로" 지정해둬야 한다.
특이사항으로 브라우저에 따라 overflow:hidden or auto일 때 작동되지 않을 수 있고 IE에선 지원하지 않는다.
2. inline, inline-block, block 에 대해서
-
Display 속성 :
요소를 어떻게 보여줄지 결정하며 태그마다 기본값이 다르다. -
none :
요소를 보이지도 않게하고, 영역을 차지하지도 않게 한다. -
block :
기본적으로 가로 영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈 되어 표시된 것 .
width, height, margin, padding을 지정할 수 있으며 block 요소 다음에 등장하는 요소가 해당 block 요소의 좌우에 배치될 수 있어도 항상 다음 줄에 배치된다.
div, p, h, li 태그 등이 해당됨.
-
inline :
block과 다르게 inline 요소끼리는 같은 라인에 위치하며 글자나 문장에 효과를 주기 위해 존재하는 단위라고 볼 수 있다.
inline 요소를 채우고 있는 내용만큼의 가로너비를 가지며 width, height를 지정할 수 없고 좌우 margin, padding만 줄 수 있다.(line-height로 상하여백을 주는 것은 가능)
span, b, i, a, img, input 등이 해당된다.
*** block 요소는 inline 요소를 품을 수 있으나 inline 요소 안에 block 요소를 넣을 경우 block 요소가 튀어나오게 된다. -
inline - block
block과 inline의 중간 형태로 inline처럼 줄바꿈이 일어나진 않지만 width, height, margin, padding 등으로 크기를 지정할 수 있다.
요소 간 여백을 제어하기 힘들고 화면 크기에 따라 요소들이 정렬되지 않을 수 있어 flex를 사용한다. -
visibility
요소가 웹 페이지에 표현될지 안될지만 결정한다.
웹 페이지에 표현되진 않더라도 레이아웃은 여전히 존재하고 코드 내에도 존재한다.
자바스크립트와 함께 사용할 시 복잡한 메뉴나 레이아웃 표현이 가능하다. -
opacity
요소의 투명도를 0부터 1사이 값으로 설정할 수 있으며 0에 가까울수록 투명해진다.
.Reference
https://engkimbs.tistory.com/922
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model
<>
