CSS position, z-index, overflow 요약 정리

 

CSS position, z-index, overflow 요약 정리를 해보겠습니다.

 

position은 원래 태그가 가진 위치값을 자기 자신이나 부모, 뷰포트 등을 기준으로 요소를 배치할 수 있게 합니다.

 

또한 z-index로 깊이를 달리할 수 있고, overflow로 넘치는 내용물을 자를 수 있습니다.

 

평면에서의 배치, 깊이로서의 배치, 넘치는 내용 잘라내기라고 이해하시면 쉽습니다.

 

 

 

 

position

 

position 명령으로는 static, relative, absolute, fixed를 할 수 있습니다.

 

div{

position : absolute;

left : 0px;

top : 0px;

}

 

이런 식으로 left, right, top, bottom 위치를 지정할 수 있습니다.

 

• static : 원래 요소들이 가지는 기본값입니다. 정적이며, 스스로 기준이됩니다.
• relative : 기본값을 기준으로 상대적 위치를 지정합니다. (left : 50px하면 기본값 left 0에서 50px 오른쪽에 위치하게 됩니다.)
• absolute : 부모나 조상을 기준으로 위치를 지정합니다. (left : 50px하면 부모의 위치를 기준으로 50px 오른쪽에 위치하게 됩니다.)
• fixed : 뷰포트를 기준으로 위치를 지정합니다. 뷰포트는 문서가 보여지는 화면을 뜻합니다.

 

relative는 원래 본인의 위치에서 벗어나게 배치하기 위해 사용하기도 하지만, absolute의 부모로서 위치를 고정하고 부모임을 다른 코딩 협업자들에게 알리기 위해 사용하기도 합니다.

 

absolute의 부모는 상위의 static 성질의 요소를 자동으로 찾고 보통 직계 부모로 인식이 되지만 알아보기 쉽게 한다고 생각하면 됩니다.

 

 

absolute는 전체 화면 딤이나 팝업, 드롭다운 메뉴, 슬라이드 등 부모를 기준으로 한 정렬에 유용하게 사용됩니다.

 

참고로 absolute를 준 요소에 부모가 없어도 body가 큰 부모이므로 body를 기준으로 위치가 설정됩니다.

fixed는 반응형 사이트를 만들 때 UI의 위치 등 전체 화면을 기준으로 요소를 고정시킬 때 많이 사용합니다.

 

 

z-index

z-index는 쉽게 말해서 포토샵의 레이어라고 이해하면 쉽습니다.

 

종이를 겹치듯이 계층의 깊이를 구분하여, 어느것을 앞에 놓고 뒤에 놓을지 결정합니다.

 

z-index를 이용해서 요소를 뒤로 보냈다가 투명도를 조절해 앞으로 튀어나오게 할 수도 있습니다.

 

 

overflow

overflow는 요소의 내용물이 박스 영역을 넘어갈 때 어떻게 할 것인지를 결정하는 명령입니다.

 

따로 div 박스에 담지 않았다고 해도, 가장 큰 박스 단위는 html 태그이므로 html 문서를 기준으로 합니다.

 

여러분이 코딩을 하다가 사진이나 글자 등의 내용이 브라우저 창의 크기를 넘어갈 때가 있을 것 입니다.

 

 

이럴 때 아래와 같이 결정할 수 있습니다.

 

• overflow : hidden; 박스를 넘어간 내용을 보이지 않게 자릅니다.
• overflow : auto; 내용물에 맞춰 박스가 늘어납니다.

 

hidden과 auto말고도 visible, scroll, inherit, clip 등등.. 설정 값이 많지만 넘치는 내용이기에 주로 hidden을 씁니다.

 

overflow-x는 가로로 넘친 내용을 콕 집어 설정할 수 있고, overflow-y는 세로로 넘친 내용에 대해 설정할 수 있습니다.

 

 

응용) 넘치는 글자 ...으로 표시하기

 

비슷한 개념으로 글자가 넘칠 때 아래와 같이 설정하면 ...으로 표시하게 할 수 있습니다.

 

p{
    width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

white-space nowrap은 줄바꿈을 하지 말라는 것이고, text-overflow는 넘치는 텍스트를 어떻게 표시할 것인지 설정하는 것입니다.

 

포인트는 어디까지 글자 내용을 자를 것인지 너비를 설정해주는 것입니다.

 

 

이상으로 CSS position, z-index, overflow 요약 정리를 마치겠습니다. 읽어주셔서 감사합니다.