책 씹어먹는 즐거움

오늘날에는 컴퓨터가 데스크탑, 노트북, 모바일 기기, 냉장고, 자동차 등 다양한 기기에 다양한 목적으로 설치되어 인터넷에 연결되어 있다. 이 때, 디스플레이 규격이 모두 천차만별이라 다양한 상황에 대응할 수 있는 반응형(resposive) 길이(length)를 사용할 필요가 있다. 

반응형(resposive) 길이(length)라는 것은 브라우저 창(viewport) 크기에 따라 길이가 변하는 상대 길이(relative length)를 말한다. 

다음과 같은 종류가 있다. 

개념을 알았으니 다음과 같이 0045.html 파일을 작성하고 이를 실행해보자. 

실행한 브라우저 창인 뷰포트(viewport)에서 너비(width)를 키워 높이(height)보다 크게 만드니 (vw > vh) 다음과 같은 관계가 성립하는 것을 볼 수 있다. 

5vw=5vmax

5vh=5vmin

실행한 뷰포트(viewport)에서 높이(height)를 키워 너비(width)가 보다 크게 만드니 (vw < vh) 이번에는 다음과 같은 관계가 성립하는 것을 볼 수 있다. 

5vw=5vmin

5vh=5vmax

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0045 CSS 반응형 길이(responsive length) 단위.apkg