-
반응형 단위(레이아웃과 폰트사이즈)HTML5_CSS3 2023. 4. 1. 01:07반응형
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. 태그 간 공백이 없이 작성한다. → 대신 가독성이 떨어진다.
<div></div><div></div><div></div>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
'HTML5_CSS3' 카테고리의 다른 글
a태그와 button 그리고 input (0) 2023.05.23 네이밍 방법론 (케이스 스타일, 네이밍 컨벤션) (0) 2023.04.07 크로스 브라우징 도대체 어떻게 하는건가? (0) 2023.04.04