티스토리 뷰
되도록 width랑 height 단위는 동일하게 맞추는 게 좋고
취향이지만 rem을 많이 사용하는 것 같다
전체 사이즈 따라 변동될 경우 margin, padding도 rme을 사용하고
div 사이즈 따라 변동될 경우 em을 사용하도록 하자
border같이 고정 사이즈는 px을 사용할 것
rem 편하게 쓰기
기본 폰트 사이즈는 16px이고 이게 1rem이 된다
매번 계산하는 번거로움을 줄이는 방법, html에 폰트사이즈를 지정하기
아래와 같이 지정하면 1rem = 10px 이 된다
html {
/* 62.5% of 16px browser font size is 10px */
/* 16px * 0.625 = 10px */
font-size: 62.5%;
}css 사이즈 단위
px (픽셀)
화면의 고정된 물리적 크기를 기준으로 하는 절대 단위로, 정확한 픽셀 수를 지정할 때 사용한다
em
부모 요소의 폰트 크기 기준
rem (루트 엠)
HTML의 최상위 요소(<html>)의 폰트 크기를 기준으로 하는 상대 단위로, 전체 문서의 일관된 크기 조정을 위해 사용한다
vh (뷰포트 높이)
브라우저의 현재 뷰포트 높이의 1%에 해당하는 상대 단위로, 화면 크기에 따라 크기를 동적으로 조정할 때 사용한다
vw
vh와 동일 화면 너비 비율
% , vh 차이
%: 부모 요소의 크기를 기준으로 계산 (부모 요소가 크기 조정될 때 요소도 그에 따라 반응)
부모 요소와의 상대적 크기를 조정할 때, 레이아웃이 부모 요소에 의존적인 경우에 적합하다
vh: 브라우저 창(뷰포트)의 높이를 기준으로 계산 (브라우저 창의 높이가 변경될 때 요소가 반응한다)
화면의 전체 높이에 비례하는 크기를 지정할 때, 전체 화면을 채우는 섹션이나 특정 뷰포트 높이에 반응하는 요소에 적합하다
vh - 화면 높이
vw - 화면 너비
% - 부모기준 너비
가상클래스
::after
CSS의 가상 요소 중 하나로 특정 요소 내용 뒤에 가상의 콘텐츠를 추가할 때 사용한다
실제 DOM에는 존재하지 않고, 렌더링 시에만 화면에 표시된다
::before
특정 HTML 요소의 내용 앞에 새로운 콘텐츠를 삽입할 때 사용, ::before로 생성된 요소는 실제 HTML 문서에 추가되지 않고, CSS를 통해 렌더링 할 때만 존재한다
요소 숨김
display: none
- 요소가 차지하던 공간이 사라지기 때문에 레아이웃에 영향을 주지 않는다 다시 보이게 할 때 레이아웃과정이 반복된다
- 요소가 완전 사라져야 할 때 (메뉴 숨기기, 탭 전환 등)
opacity
- 부드러운 애니메이션 효과 적용하기 좋음 다만 요소는 화면상에 계속 존재한다
- 부드러운 페이드 인/아웃 효과
visibility
- 보이지 않아도 요소는 공간을 차지하고 있기 때문에 레이아웃에 영향을 미친다
- 숨겨진 요소의 레이아웃상태를 유지해야 할 때 (탭 내의 콘텐츠 전환 등)
transform: scale(0)
- 요소가 공간을 차지하고 있지만 레이아웃에 영향을 미치지 않는다 애니메이션 효과 적용하기 좋음
요소 크기를 애니메이션으로 줄여서 숨기거나 나타내는 경우
부드러운 애니메이션 효과가 필요하다면 opacity 또는 transform
레이아웃에 영향을 미치지 않게 완전히 제거하고 싶다면 display: none
공간을 유지하되, 보이지 않게 하려면 visibility