반응형 단위(레이아웃과 폰트사이즈)
1. 반응형 레이아웃
1. 전체적인 레이아웃 요소들은 %로 레이아웃을 잡아준다. (100% 기준)
1) 큰 레이아웃의 요소들은
<div id="wrap"> / <header>/ <footer> / <article>/<section> width:100% 기준으로
2) 단의 구성
float와 해당 단을 100%로에서 나눠준다. 4단이면 width: 25%3) <a> 터치영역은 최소 44pxdisplay:block; height/width/padding 을 사용해서 터치영역 확장시켜 준다.
2. 10~20 정도의 약간의 여백, padding 또는 margin은 px로 처리
3. rem을 사용할 때는 구성할 때 px로 구성 후 rem단위로 환산해준다.
1번 방법)
- 요소에 display:inline-block을 주고, width 값에는 100%를 요소의 개수로 나눈 값으로 지정해준다.
- width 값은 33.33%를 주거나, calc(100%/3)을 하는 방법이 있는데 후자가 더 근접하다.
(*calc()로 폰트사이즈를 조절할 때는 피연산자 중 하나는 꼭 절대단위 사용 - 접근성을 위해)
h1 {
font-size: calc(1.5rem + 3vw);
}- padding 값 좌우에 5%씩 주고 싶은 경우, 감싸고 있는 부모 요소에 width값을 90%주고 padding: 0 5%를 준다.
/*3개의 div가 일직선상 위치하게끔 레이아웃을 잡을 때*/
/* 1번 방법)
자식 요소 width 값을 33.33% 를 준다. display는 inline-block을 준다. */
<body>
<div id="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>* {
padding:0;
margin:0;
border:0
}
#wrap {
width: 100%;
height: 100%;
overflow: hidden;
}
div:not(#wrap) {
width: 33.33%;
width: calc(100%/3);
background: blue;
height: 300px;
display: inline-block;
// font-size: 0;
// word-spacing: 0;
// letter-spacing: 0;
}
div:nth-child(2):not(#wrap) {
background-color : yellow
}
위의 방법처럼 하면 될 것 같았는데, 별도로 지정하지 않은 4px의 margin 값이 생겼다.
그 이유는 display: inline-block은 태그 간 띄어쓰기를 공백으로 반영하기 때문이다.
따라서 이를 해결하려면 2가지 방법이 있다.
1. 태그 간 공백이 없이 작성한다. → 대신 가독성이 떨어진다.
2. 해당 div들을 감싸는 부모 태그에 font-size : 0을 준다. → 자식요소의 font-size는 별도 지정
#wrap { width: 100%; height: 100%; overflow: hidden; font-size: 0}
2번 방법)
- width값은 동일하게 주고, display:inline-block 대신 float: left를 사용한다.
* {
padding:0;
margin:0;
border:0
}
#wrap {
width: 100%;
height: 100%;
overflow: hidden;
}
div:not(#wrap) {
width: calc(100%/3);
background: blue;
height: 300px;
float: left;
}
div:nth-child(2):not(#wrap) {
background-color : yellow
}
2. 반응형 폰트사이즈
px은 고정 사이즈이기 때문에 디바이스 사이즈에 맞춰 폰트 사이즈를 바꿔주려면 미디어쿼리를 써야한다.
그 대신에 반응형은 em 또는 rem을 사용해 사이즈를 지정해준다. 그러나 rem이 em보다 관리가 더 편하다.
👉 크기가 변해야하는 곳이라면 rem 단위 쓰는 게 낫다는 말! 꼭 써야 되는 곳이 아닌 이상 rem쓰자.
rem 사용)
- rem은 em과 달리 최상단인 html에 정의된 font-size에 의해 조절된다.
- 별도 지정없으면, 기본 브라우저 사이즈가 디폴트 값이 된다.
<style>
/* 1번 - 별도 지정시 */
html {font-size: 18px}
div {font-size : 2rem} //18*2 = 36px
/* 2번 - 브라우저 기본 사이즈 (16px) */
html
div {font-size : 2rem} //16*2 = 36px
</style>
<body>
<div></div>
<body>
그러나 rem 사용 시,
위 예시처럼 최상단 font-size를 px을 사용해 고정시키면, 사용자가 브라우저에 설정해놓은 폰트 사이즈를 무시하게 된다.
→ 즉, 사용자가 자신에게 최적화된 환경을 설정하는 기능 자체를 빼앗는 일이 되버리는 단점이 있다.
→ 그래도 변경하길 원하는 경우에는 rem 또는 %를 사용 → 브라우저 폰트 크기와 일정 비율로 유지된다.
<style>
/* 별도 지정시 - em이나 rem 사용할 것 */
html /* 1) font-size 16px */
html {font-size: 18px} /* 2) 18px - 사용자의 최적화 환경 기능 무시*/
html {font-size: 1em} /* 3) 16px - 최상단에는 사용 x */
html {font-size: 1rem} /* 4) 16px */
html {font-size: 62.5%} /* 5) 10px */
div {font-size : 2rem}
/* 1) 16*2 = 32px
2) 18*2 = 36px
3) 16*2 = 32px
4) 16*2 = 32px
5) 10*2 = 20px */
</style>
<body>
<div></div>
<body>
em 사용)
- em은 지정된 요소의 폰트 사이즈 또는 상위 부모 요소로부터 상속받은 폰트 사이즈를 기준으로 함
- 폰트 사이즈에 따라서 사이즈 변경되거나 부모 요소의 사이즈에 따라 사이즈 변경되야 할 때 사용
3. 정리
1) 브라우저 사이즈에 따라 반응 vw 또는 rem
2) 폰트 사이즈에 따라 사이즈 변경 em 또는 rem (그래도 rem 더 추천)
3) 부모 요소의 사이즈에 따라 변경 % 또는 em
4) 요소의 너비에 따라 사이즈 변경 % 또는 vw
* 내용이 잘못된 경우 알려주시길 바랍니다 :)
* 참고 사이트:
https://careerly.co.kr/comments/78280?utm_campaign=user-share https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
https://dbsyys.tistory.com/m/24