[Day 9] CSS 길이 단위 / overflow / 가운데 정렬

길이 단위

 

CSS에서 길이 단위는 크게 절대길이단위와 상대길이단위로 나뉜다.

 

절대길이단위에서서는 px가 자주 쓰이고,

(다른 단위도 있지만 자주 쓰이지 않아서 따로 적지는 않겠다.)

 

상대길이단위의 종류엔 아래와 같은 것들이 있다.

em	부모 요소 글자 크기의 배수
%	부모 요소를 기준으로 하는 백분율 단위
rem	root em을 의미하며, 최상위 요소인 html의 글자 크기를 기준으로 한다.
vw/vh	화면 너비를 기준으로 하는 백분율 단위
vmin	화면의 너비와 높이 중 작은 값을 기준으로 하는 백분율 단위
vmax	화면의 너비와 높이 중 큰 값을 기준으로 하는 백분열 단위
ex	현재 폰트의 소문자 x의 높이 값을 기준으로 한 백분율 단위

 

 

 

 

---

 

overflow 속성

 

overflow는 요소들이 오버플로우(넘쳤을) 됐을 때 사용자가 원하는 behavior를 세팅해주는 속성이다.

첫번째 값은 overflow-x, 두번째 값은 overflow-y 값을 지정하는데, 하나만 사용하여 둘 다 단축으로 지정할 수 있다.

 

여러 밸류들 중에서도 중요하게 쓰이는 것은 아래와 같다.

 

• visible: 콘텐츠를 자르지 않고 보이게 냅둔다. (기본 속성)
• hidden: 요소의 크기만큼 맞춰서 콘텐츠를 숨긴다.
•  scroll: 콘텐츠를 요소의 크기만큼 맞추고 스크롤바를 제공한다.

 

* overflow: hidden과 display:none의 차이   +) visibillity: hidden

display:none과 overflow:hidden은 둘 다 콘텐츠를 가릴 수 있다는 공통점이 있지만,

 

display:none 은 페이지에서 none이 적용된 요소가 아예 제거가 되므로,

페이지에서 마치 없는 요소인 것처럼 취급하여 가려지는 것이고,

 

반면, 

 

overflow:hidden은 브라우저나 블럭의 너비에 따라 요소가 다시 드러날 수 있다는 점이다.

그래서 컨텐츠가 안의 블럭보다 크면, 그 초과분만큼만 가려진다.

 

visibillity:hidden 이라는 비슷한 개념도 알 수 있었는데,

이것은 display:none처럼 페이지에서 아예 제거되는 것처럼 보이지만,

실제 페이지 레이아웃에서는 존재하여 다른 요소에 영향을 줄 수도 있다는 점에서 차이가 있다.

 

 

일단 overflow와 display 두 개만 놓고 예시를 비교해봤을 때, 

네이버 날씨

overflow:hidden을 사용

 

크게 날씨 정보가 미세먼지와 기온 파트로 나뉘어서 보여주는 것을 알 수 있는데,

일단 div로

 

<미세먼지>

<기온>

부분으로

 

묶어 준 후 overflow를 이용해서 보여주고 싶은 부분만 잘라

그것을 translate를 이용해 저렇게 움직이는 것이다.

 

 

display:none의 예시를 보자면

저 부분의 코드는

이렇게 되어있는데, 저 버튼을 누르면?

이렇게 block으로 바뀐다!

 

저렇게 토글을 눌러줘서 창이 뜨는 경우인데, 평소에는 창이 안뜨지만 안떠도 웹페이지에 영향이 없는 경우에

display:none을 쓰는 것이 아닐까 추측해본다.

(다시 설명을 듣고 틀린 것이 있다면 고칠 예정!)

---

가운데 정렬

 

1. div 가로 가운데 정렬

See the Pen black-center-align by Dahee Jo (@daheejo) on CodePen.

좌우 마진을 auto를 줌으로써 가운데 정렬을 할 수 있다.

 

* div(블록요소)가 여러 개 있는 경우:

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

display를 인라인블록으로 설정한 후 wrapper를 text-align: center를 주게 되면 가운데 정렬을 할 수 있다.

 

**height와 line-height 값을 동일하게 주면 text값의 세로축을 가운데 정렬할 수 있다.

 

 

 

2. div 가로 세로 가운데 정렬

 

1)position: absolute를 이용

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

position의 absolute 로 설정해서

top: 50%

left: 50%

를 적어준 후 

 

width와 height 값의 절반 값을 마이너스 한 값으로

margin left와 right 값을 지정하면 된다.

 

그렇지만, 단점은 width와 height의 값이 변하면 가운데 정렬을 유지할 수 없다는 점이다.

(종찬님: 망한다🎃)

 

이 방법을 개선한 것이 추가로 transform을 이용한 방법이다.

transform(x축 ,y축) 인데, -50%, -50%로 설정하면 된다.

transform에서의 %는 부모요소를 기준으로 하는게 아닌, 자기 자신의 %를 의미한다!

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

이 방법을 사용하면

width, height 가 기본값 auto로 설정되어도, 컨텐츠 양이 늘어나도

가운데 정렬을 할 수 있다는 장점이 있다.

 

(단 ie8 이하에서는 동작하지 않으므로 이 점은 유의해야 한다!)

지원되지만 사용조건이 붙은(노란색) 버전들도 있으니 이 점도 유의!

 

3. flexbox 사용

사실 익숙해지면 가장 쓰기 쉬운 방법이다.

부모요소에

display: flex,

justify-content: center (가로축)

align-itmes: center(세로축)

을 설정해주면 된다.

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.