✅display 속성

display 속성으로 요소를 inline 또는 block 으로 변경할 수 있다. 또한 flex, grid로 자식 요소를 배치할 때 사용할 레이아웃을 설정할 수 있다.

1. display - inline, block, inline-block

• inline요소
  • 영역의 크기가 내부 콘텐츠 크기로 정해진다.
  • 여러 요소가 가로배치가 된다.

span은 inline의 대표적인 요소라고 할 수 있다. span태그에 width와 height 값을 지정했지만 안에 내용(content)에 따라 크기와 높이가 지정되는 것을 볼 수 있다.

• block요소
  • 영역의 크기를 width와 height로 지정할 수 있다.
  • width를 지정하지 않으면 가로 전체를 차지한다.
  • 여러 요소가 세로 배치가 된다.

div는 block요소이다. width와 height값을 지정했을 때 적용되는 것을 확인할 수 있다.
block요소이기 때문에 다음 공간이 충분하지만 block요소는 가로 전체를 차지하기 때문에 다음줄로 내려가는 것을 확인할 수 있다.

• inline-block요소
  • 가로, 세로를 지정할 수 있고 margin, padding도 정상적으로 적용된다.
  • 흐름대로 가로로 배치가 된다.

container로 감싼 div태그 3개를 inline-block 요소로 변경하였다. container width는 90px, inline-block div의 width는 40px이다. 따라서 한줄에 2개가 위치하고 그 아래에 1개가 위치하는 것을 확인할 수 있다.

2. 요소를 없애는 방법

• display : none
  • display : none을 함으로써 "display속성을 사용하지 않는다" 라고 해석할 수 있다.
  • display : none은 코드상으로는 존재하지만 실제 화면으로는 보이지가 않는다.

• visibility : hidden
  • visibility 속성은 요소를 요소를 보이거나 숨기게 하는 속성이다.
  • 요소는 기본적으로 visibility : visible이 기본값이다.
  • value를 hidden으로 할 경우 코드상으로는 보이지만 실제 화면에서는 보이지 않지만 그 요소가 차지하는 영역은 숨기지 않는다.

1번째 div태그는 visibility : hidden을 적용하였고 3번째 div태그는 display:none을 적용하였다. 1번째 div태그는 내용은 보이지 않지만 영역은 차지하는 것을 확인할 수 있고 3번째 div태그는 영역조차 차지하지 않는 것을 확인할 수 있다.

3. float

• float
  • 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야함을 지정한다.
  • 쉽게 말해서, 좌,우 중 어느쪽으로 배치할지 지정하는 속성이다.
  • value를 hidden으로 할 경우 코드상으로는 보이지만 실제 화면에서는 보이지 않지만 그 요소가 차지하는 영역은 숨기지 않는다.

4. position

• position
  • 문서상에 요소를 배치하는 방법을 지정한다. 위치를 지정하는 요소이다.
  • 쉽게 말해서, 좌,우 중 어느쪽으로 배치할지 지정하는 속성이다.
  • value를 hidden으로 할 경우 코드상으로는 보이지만 실제 화면에서는 보이지 않지만 그 요소가 차지하는 영역은 숨기지 않는다.
  • 기본값은 static이다.
  • top, left, right, bottom 속성으로 요소를 배치할 최종 위치를 결정한다.

• position - relative
  • 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
  • 오프셋은 다른 요소에는 영향을 주지 않는다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
  • 쉽게 생각하면, 자기 자신을 기준으로 삼는것이다.

• position - absolute
  • 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
  • 제일 가까운 부모요소를 기준으로 위치를 지정한다.
  • 따라서, 대부분 영역 부모 요소를 relative로 지정하고 안에 내용을 absolute로 적용하고 한 세트로 사용을 한다.

제일 상위에 있는 div의 position을 relative로 적용하고 하위 요소 div를 absolute로 잡으면 하위 요소 div는 상위 요소 div위치를 기준으로 위치를 지정한다.

• position - fixed
  • 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
  • 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
  • fixed는 뷰포트를 기준으로 삼는다.

fixed로 적용하였을 때 스크롤을 아무리 내려도 lorem 내용 공간이 그대로 있는 것을 확인할 수 있다.

• position - sticky
  • 스크롤 동작이 존재하는 경우 가장 가까운 조상에 달라붙는다.
  • 자기 위치에 있다가 스크롤이 되면 top, left등 지정한 위치에 위치하고 자기 위치를 다시 찾으면 자기 자리에 위치한다.
  • 특정 위치에서 위치를 지나갔을 때 fixed처럼 동작하게 하고 싶다 라는 목적이 있을 때 사용한다.
  • 스크롤 되는 부모의 하위에 해야 적용이 된다. 부모의 하위에 하위에는 적용이 되지 않는다.

sticky를 적용한 예시이다. top 0을 적용함으로써 기존 위치에 있다가 스크롤을 내릴 때 해당 요소가 보이지 않는 시점에서 맨위에 위치하는걸 확인할 수 있다. 스크롤을 올려서 다시 자기 자리에 위치하게 되면 제자리를 찾는 것을 확인할 수 있다.

5. overflow

• overflow
  • 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다. overflow-x, overflow-y의 값을 설정한다.
  • overflow는 단축속성이다. overflow : overflow-x, overflow-y
  • 키워드 하나만 작성하면 x,y 둘 다 속성값으로 적용된다.
  • overflow 값 : visible, hidden, scroll, auto
  • visible : overflow가 되어도
  • hidden : overflow가 된 내용은 안보이게 한다.
  • scroll : overflow가 되면 넘치는 내용을 scroll하여 볼 수 있게 한다.
  • auto : 자동으로 적용하게 한다. auto로 하면 scroll로 적용이 된다.

6. z-index

• z-index
  • 위치 지정 요소와 그 자손 또는 하위 플렉스 아이템의 z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.