[CSS 디스플레이 && 포지션 속성 ] 디스플레이 속성, 포지션

안녕하세요~ 오늘은 디스플레이 속성과 간단한 포지션 속성에 대해 알아보겠습니다. 

디스플레이(display) 속성
우리가 디스플레이라고 화면 보통 TV를 떠오르시거나 화면을 생각하시게 됩니다. 

맞습니다. CSS에서 display 속성은
HTML 요소가 화면에 어떻게 표시될지를 결정하는 중요한 속성이고,  이 속성을 통해 요소의 크기, 위치, 레이아웃 등을 조절할 수 있습니다

그럼 간단한 display 속성의 값에 대한 개념을 소개하겠습니다.

display : block; 
요소가 차지하는 공간을 완전히 채우고, 다음 요소는 새로운 줄에서 시작합니다.  전에 배웠던 블록 태그 아시나요? 같은 맥락이라고 생각하시면 됩니다. 

display : inline; 
요소가 텍스트처럼 한 줄에 배치됩니다. 하지만 인라인 요소는 높이와 너비를 지정할 수 없습니다. 

display : inline-block; 
inline과 block의 특징을 모두 가지고 있습니다. 한 줄에 배치되지만, 높이와 너비를 지정할 수 있습니다.
예를 들면 웹 페이지에 버튼같은 요소를 표시할 때 사용이 되겠죠? 

포지션(position) 속성 
혹시 포지션이라는 단어를 들어보셨나요? 축구에서도 포지션(위치)라는 것이 있듯이 CSS에서도 위치에 대한 스타일을 지정할 때 속성을 말합니다.

포지션 속성 특징
1️⃣ 요소의 위치를 정의할 때 위치의 정보를 직접 정의한다
2️⃣ 기준점으로 부터 부모의 요소가 될 수 있다.
3️⃣ 요소의 위치에 영향을 주지 않게 된다. 영역의 영향을 주지 않게 된다.

4️⃣ 요소간의 위치가 겹치게 스타일을 적용할 수 있다.

포지션 속성 주요 값

top, left, right, bottom 네 개의 속성을 가지고 위치를 이동시킬 수 있다. 포지션 속성이 있어야 사용할 수 있다.

 

position: static;  -  요소가 문서의 일반적인 흐름에 따라 배치됩니다. 즉, 다른 요소들과의 관계에 따라 자동으로 위치가 결정됩니다.

position: relative;  - 위치의 기준점은 본인의 요소의 위치로 부터 이동
position: absolute; -  부모의 요소 중 relatvie의 속성을 가지고 있는 요소로부터 기준점
position: fixed;  - 요소를 브라우저 창에 고정시킵니다. 스크롤을 해도 요소의 위치는 변하지 않습니다.

이렇게 이번에는 디스플레이 속성과 포지션 속성에 대해 알아보았습니다. 감사합니다