###d

Display 속성

display는 css에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티이다.

display 속성은 요소를 어떻게 보여줄지를 결정한다.

---

none : 보이지 않음

요소를 렌더링하지 않도록 설정한다.

---

block : 블록 박스

div 태그, p태그, h태그#, li태그 등이 block에 해당된다.

block은 기본적으로 가로 영역을 모두 채우며, block요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보여진다.
이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이다.

---

inline :인라인 박스

span 태그 / b 태그 / i 태그 / a 태그 등이 inline에 해당된다.

block과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다.
word 같은 문서에서 bold italic 등등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다.

---

inline-block : block과 inline의 중간형태

block과 inline의 중간 형태라고 볼 수 있다.
줄 바꿈이 일어나지 않지만 크기를 지정 할 수 있다.

---

Position 속성

css에서 position속성은 문서 상에 요소를 배치할 최종 위치를 결정한다.

position 속성은 요소의 정확한 위치 지정을 위하여 top,left,bottom,right 속성과 함께 사용된다.

---

position:static

position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.

속성이 static인 요소는 html 문서 상에서 원래 있어야 하는 위치에 배치된다.

속성이 static일때는 top,left,bottom,right 속성값은 무시된다.

position:relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치 할 수 있게된다.

요소를 "원래 위치"를 기준으로 상대적(relative)으로 배치해준다.

요소의 위치 지정은 top,left,bottom,right 속성을 이용해서, 요소가 원래 위치에 있을때 상하좌우로부터 얼마나 떨어지게 할 지를 지정 할 수있다.

position:absolute

position 속성 값중 가장 난해한 속성값이다.

속성을 absolute로 지정하면

position:fixed

position 속성을 fixed로 설정하게 되면 브라우저 화면에서 고정되어 스크롤하더라도 화면의 특정 부분에 고정되어 움직이지 않는 UI를 구현 할 수있다.

이는 fixed속성 값의 배치 기준이 자신이나 부모 요소가 아닌 브라우저 전체 화면이기 때문이다.

---

-후기 css는 배울수록 더 어려워지는 것 같다.
2022.10.18 23:31 Dave Ahn