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

Поделиться
HTML-код
  • Опубликовано: 3 ноя 2024

Комментарии • 26

  • @Sunduck04
    @Sunduck04 3 года назад +2

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

  • @LEEKEE_0209
    @LEEKEE_0209 2 года назад +1

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

    • @designbase
      @designbase  2 года назад +1

      감사합니다👍👍

  • @lea614
    @lea614 2 года назад

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

  • @YO245-k2z
    @YO245-k2z 3 года назад

    빠른 설명 감사합니다 ㅎㅎ

  • @따뜻해져라
    @따뜻해져라 2 года назад

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

    • @designbase
      @designbase  2 года назад

      감사합니다 :) 동영상을 화면 꽉차게 배경역할로 하고 싶다면 ruclips.net/video/ZqZgyiv7w3M/видео.html 이 영상 참고해보세요ㅎㅎ

  • @cakeraspberry3017
    @cakeraspberry3017 3 года назад +1

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

    • @designbase
      @designbase  3 года назад +1

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

    • @cakeraspberry3017
      @cakeraspberry3017 3 года назад

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

  • @jgh3518
    @jgh3518 2 года назад

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

    • @designbase
      @designbase  2 года назад +1

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

    • @jgh3518
      @jgh3518 2 года назад

      @@designbase 감사합니다!!

  • @정예원-u8f
    @정예원-u8f 3 года назад +1

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

    • @designbase
      @designbase  3 года назад +1

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

  • @goodgoddns
    @goodgoddns 2 года назад

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

  • @littleduck6175
    @littleduck6175 3 года назад

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

    • @designbase
      @designbase  3 года назад +1

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

    • @littleduck6175
      @littleduck6175 3 года назад +1

      감사합니다!

  • @엉망진창
    @엉망진창 3 года назад

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

    • @designbase
      @designbase  3 года назад

      감사합니다🤗

    • @엉망진창
      @엉망진창 3 года назад

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

    • @designbase
      @designbase  3 года назад

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