[CSS] 반응형 웹 페이지 - px, em, rem에 대하여

미루고 미뤄왔던 반응형 공부 ....

이제는 조금씩 시작을 해야할 것 같아 조금씩 학습을 하여 실력을 다지려고 한다.

현재 하고있는 회사 프로젝트에서도 조금의 반응형은 곁들여둔 상태지만

완전하게 했다고는 당연히 말할 수 없다

그냥 창 크기에 따라 컨테이너가 같이 움직이고 뭐 이것저것 아주 기초의 수준...😢

일단 CSS의 첫 게시글은 px, em, rem에 대해서다.

먼저 px, em, rem을 다루기에 앞서 반응형 웹페이지가 무엇인지 간단하게 정의하고 넘어가도록 하자 !

반응형 웹페이지란 ❓

"다양한 디바이스, 창, 화면 크기에서 원활하게 렌더링되는 웹 페이지"라고 간단하게 정의가 될 것 같다

웹 사이트를 반응형으로 설계하면, 웹 UI의 일관성을 유지할 수 있고 단 하나의 웹사이트로 다양한 디바이스에 대응함으로써 유지보수 및 추가 개발 이슈에 대해 시간과 비용면에서도 보다 효율적이다.

본격적으로 px, em, rem에 대해 알아보자

PX(픽셀)

✔ 고정적인 단위이다.

✔ 모니터에 따라 고정적은 크기이기 때문에 모니터가 바뀌지 않는 한 브라우저에서는 절대적인 고정값으로 유지된다.

✔ 반응형으로는 매우 부적절한 단위이다.

EM

✔ 가변적인 단위이다.

✔ 상위 요소의 폰트 사이즈를 상속 받는다.

✔ 중간 요소의 사이즈가 depth가 깊어질 수록 관리가 매우 힘들다.

html{  font-size : 10px;  }
div {  font-size : 10em;  /* 10px의 10배 */  }
li  {  font-size : 10em;  /* 10px의 10배의 10배 */  }

<html> 10 
    <div> 100
        <li>1000 </li>
    </div>
</html>

REM

✔ em과 동일하게 가변적인 단위이다.

✔ rem은 상위 요소가 아닌 최상위 엘리먼트를 기준으로 가변하기 때문에 em에 비해 관리가 수월하다

html{  font-size : 10px;  }
div {  font-size : 10rem;  /* 10px의 2배 */  }
li  {  font-size : 20rem;  /* 10px의 3배 */  }

<html> 10 
    <div> 20
        <li>60</li>
    </div>
</html>

대략적으로 보게되면 관리가 쉬운 rem을 선택할 것이라 생각할 수도 있다.

하지만 본인 업무 환경에 따라 상위 요소를 상속 받을지 최상위 엘리먼트를 상속 받을지에 따라

상황에 맞게 잘 사용해야한다.

모두 반응형 파이팅 !

반응형 웹페이지란 ❓

PX(픽셀)

EM

REM

티스토리툴바