• 학습일 : 2023.12.23

단위(속성값)

• px
  • px 단위 지정시 너비 및 높이 값 고정 ⇒ 웹 브라우저 크기 변동되도 변하지 않음
• 퍼센트(%)
  • %는 px과 달리 상대적 단위
  • Default 부모 태그인 태그를 기준으로 너비값 변함
    • 주의 : 태그는 높이값이 기본적으로 없음
      • %로 높이값을 설정해도 동작이 안 됨!
      • 따라서, 높이값을 %로 설정하고 싶은 경우에는 태그에 높이값을 설정해줘야 함!
  • 부모 요소가 가 아닌 다른 것이라면, 해당 부모 요소의 너비 및 높이의 길이가 설정되어 있어야 함
  • 만약, 부모 요소의 길이 지정 없이 %만 주어진다? ⇒ %를 적용한 해당 요소의 길이가 의도대로 나오지 않음
• vw (viewport width)
  • 웹 브라우저의 너비를 기준으로 값을 백분율로 지정
  • 웹 브라우저의 너비를 기준으로 높이와 너비가 상이해짐
  • vw는 웹 브라우저의 너비만을 기준으로 크기가 결정
    • 따라서, 웹 브라우저의 높이를 변화시켜도 크기의 변화는 없음
• vh (viewport heigth)
  • 웹 브라우저의 높이를 기준으로 값을 백분율로 지정
  • 웹 브라우저의 높이를 기준으로 높이와 너비가 상이해짐
  • vh는 웹 브라우저의 높이만을 기준으로 크기가 결정
    • 따라서, 웹 브라우저의 너비를 변화시켜도 크기의 변화는 없음
• vmin (viewport minimum)
  • 웹 브라우저의 높이와 너비 중에서 더 작은 것을 기준으로 값을 백분율로 지정
• vmax (viewport maximum)
  • 웹 브라우저의 높이와 너비 중에 더 큰 것을 기준으로 값을 백분율로 지정

느낀 점

현재 첫 HTML + CSS + JS(Vanilla)를 활용하여 첫 번째 개인프로젝트를 진행하고 있다.

px과 %에 대한 것은 예감을 활용해서 사용을 했었는데, 요즘은 반응형 웹 등으로 인해 viewport의 상대적 너비 및 높이에 따라 내가 개발하는 DIV 등의 요소들은 어떻게 설정해줘야 하는 의문이 들었다.

현재 개발하고 있는 것은 width든 hegith든 px 단위로 다 때려박아서(?) viewport가 어떻든 간에 크기가 그대로 되도록 구현하였다.

이번 프로젝트 이후에는 React를 공부하고 현재 개발하고 있는 Source를 기반으로 작업 진행 예정인데, React 프로젝트에서는 반응형 웹을 구축할 것이기에 이 때 px뿐만 아니라 % / vw / vh / vmin / max를 기반으로 작업을 진행할 것이다.

현재 프로젝트에서는 화면을 메인(대문, 웰컴) 페이지 1개만 만들고 있는데, 다음 프로젝트에서는 화면을 메인 페이지 포함 5개 정도 만들 예정이다.

따라서, 각 페이지마다 구성하는 화면 단위를 상이하게 해보려고 한다 🙂

참고 URL

• https://aram5.tistory.com/9
• https://codingbroker.tistory.com/56