#15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh - 웹 코딩 강좌

[@Sunduck04]

평소에 실습하며 궁금했던 내용들인데 너무나 유익하고 꿀팁입니다. 넘나 감사해요~

[@designbase]

감사합니다 ㅎㅎ

[@minsukatari]

안녕하세요 ! 오늘도 열공 하러 왔습니다 ! ㅎㅎ 이번 강의도 이론 느낌이여서 그런지 조금 이해하는데에 시간이 걸렸네요 ㅋㅋㅋ.. 조금 어려웠지만 여러번 보면서 다시 익히겠습니다 ㅎㅎ % - 부모를 기준으로 퍼센트 값을 나타내는 단위 ex) 부모 1200px 자식 10%면 120px 50%면 600px 100%면 1200px 부모를 기준으로 잡으며 부모가 1200px로 지정 되있고 자식을 (px이 아닌) 퍼센트값으로 지정 한다면 50%가 600px이고 100%가 1200px이다 만약 자식을 10%로 지정하면 120px이다 em - 가장 근접한 상위 요소의 몇배를 나타낼건지 정하는 단위 상위 요소의 폰트 사이즈가 20px이라 가정하고 하위에 2em을 입력 한다면 20px x 2가 되어서 하위는 즉 40px이 된다 상위 요소의 폰트 사이즈가 50px이라 가정하고 하위에 20em을 입력 하면 50px x 20이 되어서 하위는 즉 1000px이 된다 정리 - 상위 요소의 폰트 사이즈가 20px이라 가정하면 1em은 20px rem - em과 다르게 가장 근접한 상위 요소가 아닌 가장 최상위(HTML) 요소의 몇배를 나타낼건지 정하는 단위 가장 최상위 요소의 폰트 사이즈가 16px(기본)이라 가정하고 하위에 2rem을 입력한다면 16 x 2가 되어서 하위는 즉 32px이 된다 정리 - 상위 요소(HTML)의 폰트 사이즈가 16px이라 가정하면 1rem은 16px vw - 뷰포트(View Port)의 넓이(width)를 의미함 1vw는 뷰포트의 width를 기준으로 width의 1%와 같음 정리 - (1vw = width 1%) vh - 뷰포트(View Port)의 높이(height)를 의미함 1vh는 뷰포트의 height를 기준으로 height의 1%와 같음 정리 - (1vh = height 1%)

[@LEEKEE_0209]

친절하게 말씀해주셔서 감사드려요:)👍

[@designbase]

감사합니다👍👍

[@lea614]

반응형 웹이 어려워서 어떻게 기초를 다져야 하나 고민했는데 덕분에 좋은 정보 얻고 갑니다! 감사합니다!

[@designbase]

감사합니다👀👍

[@YO245-k2z]

빠른 설명 감사합니다 ㅎㅎ

[@designbase]

감사합니다👍

[@정예원-u8f]

세개 다 한번에 비교해 주시고 너무 유익한 강의감사합니다🙇‍♀️ 그런데 vw, vh의 숫자는 그럼 뷰포트기준으로 보이는 %라고 이해하도될까요? em과 rem은 상위 px을 기준으로 잡았는데 vw,vh는 그렇지 않나 하고요!

[@designbase]

감사합니다ㅎㅎ 네 맞아요. 뷰포트 기준의 %라고 생각하시면 편합니다. em, rem은 상위 부모를 기준으로 변하는 값이고, vw, vh는 아예 다른 개념이라서 상위 px값과 무관합니다.

[@jgh3518]

안녕하세요! 어제부터 수강하고 있는 입문자입니다. 영상 정말 잘 보고 있습니다. 그런데 4:05 부분에서 이해가 가지 않는게, class 이름은 item item-em인데 css에서는 그냥 .item-em만 써도 왜 작동이 되는지 궁금합니다. .item item-em으로 해야 되는 것 아닌가요?

[@designbase]

클래스는 여러군데 사용될수 있기때문에 하나의 태그에 클래스 여러개를 썼더라도 하나만 사용해도 됩니다~! 그리고 .item .item-em 이렇게 하면 .item 하위에 있는 .item-em을 찾는거라서 동작하지않습니다. 만약 정확하게 두개의 클래스인경우에 css를 입히고싶다면 .item.item-em 이렇게 붙여써야합니다

[@jgh3518]

@@designbase 감사합니다!!

[@cakeraspberry3017]

깔끔한 영상 감사합니다 질문있습니다 Q) 반응형 웹디자인을 할 때는 rem을 위주로 쓰는것 좋은지 궁금합니다. 아니라면 rem + vw vh를 같이 써야하는지 궁금합니다?

[@designbase]

rem을 사용하는 이유는 pc > tablet > mobile로 넘어가면서 기준이되는 폰트사이즈를 조절하기 위함입니다. 주로 %를 사용하고 vw vh는 필요할때 사용됩니다!ㅎㅎ

[@cakeraspberry3017]

@@designbase 답변 감사합니다.! 폰트는 rem과 전체적인 사이즈는 %를 섞어쓴다고 이해하면 될까요?.

[@엉망진창]

정말 많이 배워요... 강의 질도 높은데 영상도 신경쓴다는게 느껴져서 너무 좋아요

[@designbase]

감사합니다🤗

[@엉망진창]

@@designbase 디자인베이스님 덕에 많이 알게 됐어요 ㅋㅋㅋㅋㅋ혹시 궁금한게 있는데 요즘은 피그마가 더 좋다는 말을 많이하더라고요. 그런데 저가 300만원주고 맥을 산 사람이다보니 어떻게든 뽕 뽑고 싶어서 맥에서만 구동이 되고 미리 배우기도 한 스케치가 피그마보다는 눈이가는건 사실이더라고요... 혹시 피그마와 스케치 전망 어떻게 생각하시나요?? 이성적으로 판단이 잘 안되서요...

[@designbase]

각 툴마다 장단점이 있어서 뭐가 더 좋다고 하긴 어렵지만, 아무래도 피그마는 브라우저 기반이라 os에 제약이 없고 협업과 공유에 좋아서 빠르게 대세가 됐죠. 저도 스케치가 더 익숙하고 규모가 큰 프로젝트시에는 스케치 사용합니다.

[@따뜻해져라]

저 질문하고싶어요 !! ㅜㅜ 1.vw랑 vh를 같이 쓸수도 잇나요?? 2.페이지의 하단은 통이미지 넣고 상단은 동영상을 넣고 동영상의 height를 vh로 해놓은 상태에요. 문제: 늘릴때 통이미지 부분의 사이즈는 고정되잇어서 잘리는데 , 동영상은 비율대로 작아져서 동영상과 이미지 사이에 여백이 생기더라구요 ㅠㅠ 이럴경우,, vh vw써서 그런걸까여?? 통이미지는 불가피하게 써야함니당 ㅜㅜ 강의중 디베님 강의가 제일 깔끔해여 ㅠㅠㅠ

[@designbase]

감사합니다 :) 동영상을 화면 꽉차게 배경역할로 하고 싶다면 kzbin.info/www/bejne/kKK9mKyfq5yqaa8 이 영상 참고해보세요ㅎㅎ

[@littleduck6175]

웹코딩 강좌는 이게 마지막인가요???

[@designbase]

아뇨 순차적으로 올라갈예정입니다

[@littleduck6175]

감사합니다!

[@goodgoddns]

Rem vw vh 가 솔직히 더 비슷하네요