HTML/CSS 기초

대부분의 웹사이트는 화면에 어떤 정보가 들어갈지를 정의하는 HTML, 그 정보가 어떻게 보일지를 결정하는 CSS, 그리고 다양한 상호작용을 구성하는 자바스크립트의 조합으로 이루어져 있습니다.따라서 웹 프론트엔드 개발을 하기 위해서는 위 세가지 요소를 학습하는 것이 필수적입니다.

이번 미션에서는 자바스크립트를 사용하지 않고, HTML과 CSS만을 활용하여 나를 소개하는 ‘자기소개 카드’ 화면을 구현합니다. 프로필 이미지, 이름, 역할과 같은 정보를 HTML로 구조화하고, CSS를 이용해 카드 형태의 레이아웃과 시각적인 스타일을 적용해 봅니다.

이 과정을 통해 의미에 맞는 HTML 태그를 사용해 정보를 구조화하는 방법, 클래스 단위로 스타일을 설계하고 관리하는 방법, Flexbox를 활용해 레이아웃을 구성하는 방법, 하나의 화면을 ‘정보 - 구조 - 스타일’의 흐름으로 완성하는 과정을 경험합니다.

단순히 예쁜 화면을 만드는 것이 아니라, 웹 화면이 어떻게 구성되고 표현되는지를 경험적으로 이해하는 것이 이번 미션의 핵심입니다.