-
CSS - 단위프로그래밍/HTML & CSS 2021. 9. 16.반응형
단위 : em
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width: 200px; height: 100px; border: 3px dotted gray; text-align: center; font-size: 14px; font-weight: bold; padding: 2em; /* 글자크기 * 2 = 14 * 2 = 28px */ } .p-box { font-size: 13px; text-align: center; } .c-box { font-size: 120%; /* 부모크기 X 120% */ width: 300px; height: 100px; border: 3px dotted gray; padding: 2em; } </style> </head> <body> <h3> 단위(Units) : px </h3> <div class="box">글자크기 : 14px</div> <hr> <h3>단위 : %</h3> <div class="p-box"> <div class="c-box"> 글자크기 : 13px * 1.2 = 15.6px<br> 패팅 : 2 * 15.6 = 31.2 </div> </div> </body> </html>em단위는 그냥 2배라고 생각하면 된다.
대신에 자식에 까지 영향을 미치니까 내려가면 내려갈수록 엄청나게 커진다.
box 클래스를 상속받은 div는 box에서 글자크기가 14px로 설정 되어있는데 맨 아래
padding 2em; 이렇게 되어있다 이건 14px가 2배가 된다는 얘기이다.
즉 글자크기는 14px지만 padding이 14의 2배인 28이 된다는 소리임.
밑에 p-box, c-box를 상속받은 div는
먼저 p-box의 13px 폰트 사이즈를 가져가고
이제 c-box의 폰트 사이즈 120%의 영향을 먼저 받아서 폰트 사이즈가 120%만큼 커진다.
이제 padding은 이 120% 커진 값의 2em 즉 2배가 padding의 사이즈가 된다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body{ font-size: 14px; } .box { width: 300px; height: 100px; border: 3px dotted gray; text-align: center; font-size: 1.2em; /*부모크기 x 1.2*/ font-weight: bold; padding: 2em; /* 글자크기 곱하기 2 = */ } </style> </head> <body> <h3>단위 : em</h3> <div class="box"> 글자크기 : 14*1.2 = 16.8px<br> 패딩 : 16.8 * 2 = 33.6px </div> </body> </html>이 코드도 마찬가지로 body전체에 이미 글자 크기는 14px가 있는데
box 상속으로 인해서 폰트 사이즈는 1.2배가 되고 padding은 이 1.2배 된 값에서 곱하기2를 해야한다.
이렇듯 em은 중첩을 하면 할 수록 계쏙 늘어난다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body { font-size: 14px; font-weight: bold; padding: 2em; } div{ text-align: center; font-size: 1.2em; font-weight: bold; padding: 2em; } .box1 {background: red;} .box2 {background: green;} .box3 {background: yellow;} </style> </head> <body> <h3>단위:em</h3> <p>중첩된 자식 요소에서 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치니까 주의</p> <div class="box1"> Font Size = 14 * 1.2 = 16.8 <div class="box2"> Font Size= 16.8 * 1.2 = 20.16 <div class="box3"> Font Size= 20.16 * 1.2 = 24.192 </div> </div> </div> </body> </html>- 여기서는 무려 3개의 박스를 상속을 받았는데 폰트 사이즈가 엄청나게 불어난다.
단위 : rem
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> html { font-size: 14px; /* 폰트 사이즈 미지정시 16px */ } div{ text-align: center; font-size: 1.2em; font-weight: bold; padding: 2em; } .box1 {background: red;} .box2 {background: green;} .box3 {background: yellow;} </style> </head> <body> <h3>단위 : rem</h3> <p> rem은 최상위 요소(html) 의 크기를 기준으로 삼는다. </p> <div class="box1"> Font Size = 14 * 1.2 = 16.8 <div class="box2"> Font Size= 14 * 1.2 = 16.8 <div class="box3"> Font Size= 14 * 1.2 = 16.8 </div> </div> </div> </body> </html>- rem은 em과 다르게 중첩이 아니라 최상위 요소인 html의 크기를 기준으로 삼는다.
- 처음 html에서 보면 이 html의 폰트 크기 사이즈를 14px로 정해놨다.
rem은 얼마나 중첩이 되던 무조건 최상위 요소인 html의 영향만 받기 때문에 div에 영향을 주는 폰트 사이즈 곱하기 1.2만 해주면 된다.
viewport
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body { margin: 0; } .box { width: 50vw; /* 1vw는 viewport 너비의 1% */ height: 100vh; text-align: center; line-height: 100vh; font-size: 4rem; color: white; } .box1 { background: black; } .box2 { background: blue; } </style> </head> <body> <h3> 단위 : viewport </h3> <div class="box box1">항목 1</div> <div class="box box2">항목 2</div> </body> </html>뷰 포트는 반응형 웹을 만들어야 한다면 꼭 알아야하는 중요한 요소이다.
화면의 크기는 사람마다 다르니까 그걸 대비하기 위해 사용한다.
주로 %단위를 자주 사용함
1vw = viewport 너비의 1% 정도 이다.
vh단위는 = 높이
vw단위는 = 너비
지금 코드에서 너비는 50vw 높이는 100vh를 줬는데 이게 무슨 말이냐면
내 컴퓨터 화면의 너비는 50% 높이는 100% 라는 뜻
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS - 기초(2) / 선택자 (0) 2021.09.16 CSS - 상속과 우선순위 (0) 2021.09.16 CSS 기초(1) / 외부css 파일 가져오기 (0) 2021.09.16 HTML - form 관련 태그 / 파일 태그 (0) 2021.09.16 HTML - links 관련 태그 / iframe / 이미지,동영상 (0) 2021.09.16
