안녕하세요
오늘은 rem과 em 알아보겠습니다.
보통 px를 많이사용하는데요
width(가로값) , height(세로값)을 CSS로 스타일을 지정해줄때
보통 px많이 주게 됩니다. 여기서 px은 고정값입니다. 각 해상도가
모니터나 핸드폰 기종에 따라 각각 다른데요. px를 사용하게 되면 어느 해상도에서나
변함없이 고정으로 크기를 보여주죠 가로 100, 세로 100을 주게 된다면
고정값으로 가로100 세로100으로 보여지게 됩니다.
하지만 요새는 컴퓨터 테스크탑으로 보는사람들이 있긴 하지만
보통 출 퇴근시간이나 컴퓨터를 하지 않는이상 그 외 시간들은 모두 핸드폰을 사용합니다.
그렇기에 저가 말씀드리고자 하는 것은 각 기기별 해상도가 다르지만
모든기기에는 각 해상도에 맞게끔 바깥여백,안쪽여백,폰트사이즈,버튼사이즈, 등등
모두 동일하게 보여야 한다는 뜻입니다. 그래서 아주 편리한 *rem 을 알아보도록 하겠습니다.
1. rem은 html 요소기준 입니다.
2. rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정합니다.
3. 위와 같이 2가지만 알고 계시면 됩니다.
예시를 보도록 하겠습니다.
우선 최상위 html을 style을 주어 16px로 주었습니다.
그리고 a태그를 font-size: 1.25rem으로 주었습니다.
html {font-size: 16px}
a {font-size:1.25rem;}그렇다면 최상위 요소 font-size:16px이니 a태그에 font-size는 1.25rem = 20px과 똑같습니다.
그렇다면 모바일 코딩을 따로 했을때 font-size를 전부 rem으로 코딩했을시
@media screen and (max-width:640px)
{
html{font-size:14px;}
}
@media screen and (max-width:320px)
{
html{font-size:13px;}
}이렇게만 해주게되면 유지보수도 그렇고 전체적으로 하나하나 바꿔주지않고
편리하게 사용할 수 있습니다.
오늘은 여기까지!!