본문 바로가기

개인블로그를 옮겼습니다.
https://heavybear.net/post

HTML, CSS

(2)
CSS 박스 모델 데일리 팀미션으로 준비한 질문을 준비하다 보니 박스 모델에 관해서 다시 한번 공부를 하게 되어서 정리를 했다. 답변에 대한 출처도 함께 찾아서 정리했다. 질문 : CSS 박스모델과 두 유형에 대해 설명 및 블록요소와 인라인 요소가 박스모델을 해석하는 차이를 설명해 주세요1. css 박스 모델이란브라우저가 문서를 렌더링을 할 때 HTML 요소를 하나의 박스로 간주해 레이아웃을 구성하는 방식입니다. 하나의 박스는 콘텐츠영역, 패딩영역, 테두리영역, 마진영역으로 구성되어있습니다.When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard C..
미디어 쿼리 조건문에서 rem, em 단위가 어떻게 작동하는지 몰랐던 이야기 예전에 프로젝트에서 퍼블리싱을 진행하면서 rem과 em 단위를 도입할 때 생긴 문제점들이 있었다. 기본적으로 사용자가 브라우저의 줌이나 폰트 크기를 변형시킬 때에도 만족스러운 경험을 제공하려고 고민된 문제들이었다. 헷갈리거나 잘못 알고 있던 내용들이 있어서 이번 기회에 정리를 하게 되었다. 브라우저의 줌 레벨은 폰트 사이즈를 키우는 것이 아니라, viewport의 크기를 조절한다.  줌 레벨을 키우면 viewport 사이즈가 줄어들어 모바일 화면처럼 보이는 원리이다.현업에서 W3C의 준수사항을 체크할때, 브라우저 줌레벨을 200%를 해서 체크했는데 잘못된 체크 방식이었던 것 같다. (실제로는 텍스트 크기를 키워야 한다고 한다.)  브라우저의 환경설정에서 폰트크기를 조절하면 viewport는 그대로지만 기..