패스트캠퍼스 환급챌린지 37일차 미션 (3월 8일) : 인터랙티브 웹 강의 후기

서론

웹 개발을 하면서 CSS를 다루는 것은 불가피하다. 특히, 너비와 높이 설정은 웹 페이지의 레이아웃을 구성하는 기본적이면서도 중요한 부분이다. 오늘은 웹 페이지에서 요소의 크기를 정하는 '너비(width, height)'와 다양한 'CSS 단위'에 대해 공부했다. 이 두 주제를 통해 웹 디자인에서 요소의 크기와 간격을 어떻게 정확하게 제어할 수 있는지에 대해 배우는 시간을 가졌다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: 너비(width, height)
• 두 번째 강의: CSS 단위

첫 번째 강의: 너비(width, height)

첫 번째 강의로 너비(width, height)' 강의에서는 HTML 요소의 너비와 높이를 설정하는 방법에 대해 배웠다. 너비와 높이를 통해 요소의 크기를 조절하는 것은 웹 페이지의 레이아웃을 결정짓는 중요한 요소다. 이 강의에서는 너비와 높이를 픽셀(px), 퍼센트(%), 뷰포트(vw, vh) 등 다양한 단위로 설정하는 방법을 배웠다.
예제 코드:

이 코드는 .box 클래스를 가진 HTML 요소에 너비 200픽셀, 높이 100픽셀을 설정하여 요소의 크기를 정의하는 기본적인 예시다.

CSS 단위

두 번째 강의인 'CSS 단위' 강의에서는 CSS에서 사용되는 다양한 단위들과 그 사용처에 대해 배웠다. 픽셀(px) 외에도 상대적 단위인 em, rem, vw(vieport width), vh(viewport height) 등을 사용하여 더 유동적이고 반응형인 디자인을 구현할 수 있다는 점을 배웠다. 특히, 상대적 단위를 사용하면 다양한 화면 크기에 대응하는 웹 페이지를 만들 수 있다는 점이 인상 깊었다.
예제 코드:

이 코드는 .container 클래스를 가진 요소에 대해 뷰포트의 너비와 높이에 비례하여 크기를 설정하는 방법을 보여준다. 이렇게 하면 화면 크기에 따라 요소의 크기도 유동적으로 변하게 된다.

결론

'너비(width, height)'와 'CSS 단위' 강의를 통해 요소의 크기를 정밀하게 제어하는 방법을 배울 수 있었다. 이를 통해 다양한 화면 크기에 맞춰 동적으로 변화하는 반응형 웹 디자인을 구현할 수 있는 기반을 마련했다. 앞으로 이 지식을 활용하여 사용자에게 최적화된 웹 페이지를 제공하는 것을 목표로 할 것이다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://bit.ly/48sS29N