CSS
-
CSS 상대단위 rem, em 알아보기 & viewport 에서의 단위 vw, vh, vmin, vmax 알아보기Web-app/CSS 2023. 10. 13. 21:03
rem, em rem (root em) root element의 font size를 나타내는 단위로, 1rem은 html element의 font size와 동일. 일반적으로 16px이 default 값으로, 브라우저의 글꼴 크기 설정에 따라 1rem 의 값은 달라지게 됩니다. 크롬에서 설정 페이지를 들어갔을 때 일반적인 글꼴 크기는 중간, 권장상태로 되어 있습니다. 이 중간 상태에서 font-size값은 16px. 만약 설정을 아주 크게로 변경하면 24px로 바뀝니다. 즉 이때 1rem은 24px이 됩니다. 크롬에서 글꼴 크기 설정에 다른 font-size default 값은 다음과 같습니다. 글꼴 크기 설정 아주작게 작게 중간 크게 아주크게 1rem 10px 12px 16px 20px 24px em ..
-
CSS position property 알아보기Web-app/CSS 2023. 10. 8. 10:35
position propery란? element를 html document내 어떻게 배치하는지 설정하는 property value : static(default) / absolute / relative / fixed / sticky 실습해보기 1. static default 옵션, position과 함께 많이 쓰는 z-index의 경우 default는 0으로 지정되어 있음. 2. absolute 부모 중 position이 정의되어 있는 element를 기준으로 어디에 위치할지 지정할 수 있으며, 현재 document flow에서 벗어나게 됨. 아래 예제에서 만약 content class에 position relative가 없으면, position fixed로 정의되어 있는 navigation bar를 기..