5장: CSS 구현하기 - 색상, 글꼴, 및 레이아웃 디자인

2025-04-28 23:16•조회수 28

5장: CSS 구현하기 - 색상, 글꼴, 레이아웃 디자인

CSS는 웹 페이지 디자인을 더욱 풍부하게 만들어주는 마법의 도구입니다. 이 장에서는 색상, 글꼴 및 레이아웃 디자인과 같은 CSS의 필수 구성 요소에 대해 알아보겠습니다. HTML로 웹 페이지의 기본 구조를 정의한 후에는 CSS를 통해 그 페이지에 스타일을 추가하여 아름답고 사용하기 쉬운 인터페이스를 만들 수 있습니다.

색상 사용 방법

CSS를 사용하여 HTML 요소의 색상을 설정할 수 있습니다. 배경색, 텍스트 색상 등을 지정할 수 있으며, 방법은 매우 간단합니다. 색상 값은 이름(Color Name), HEX, RGB, HSL 등 다양한 형태로 지정할 수 있습니다.

예:

body {
  background-color: lightblue;   /* 배경색 */
}
h1 {
  color: navy;                 /* 텍스트 색상 */
}

위 예제는 페이지의 배경색을 라이트 블루로, 제목의 텍스트 색상을 네이비로 설정합니다.

글꼴 스타일링하기

CSS는 폰트의 종류, 크기, 굵기 등을 설정하여 웹 페이지의 텍스트를 꾸밀 수 있습니다. 폰트 설정은 주로 font-family, font-size, font-weight 속성을 사용합니다.

예:

p {
  font-family: Arial, sans-serif; /* 글꼴 종류 */
  font-size: 16px;               /* 글씨 크기 */
  font-weight: bold;             /* 글꼴 굵기 */
}

위 코드는 HTML 문서의 모든 문단에 Arial 폰트를 적용하며, 글씨 크기를 16px로 설정하고, 굵게 만듭니다.

레이아웃 디자인

CSS의 힘은 레이아웃 디자인에 있습니다. 레이아웃은 콘텐츠를 어떻게 배치하고 정렬할지를 정의합니다. 주요 방법으로는 float, flexbox, 그리고 CSS Grid가 있습니다.

예를 들어:

.container {
  display: flex;
}
.container > div {
  flex: 1;                     /* 균등 분배 */
}

위 코드는 Flexbox를 사용하여 동일한 크기의 세 개의 칸을 생성합니다.

요약 및 결론

이 장의 내용으로 CSS를 사용하여 색상, 글꼴, 레이아웃을 디자인하는 기본적인 방법을 배웠습니다. CSS는 HTML의 결점을 보완하여, 사용자가 보기 편하고 아름다운 웹 페이지를 만드는 데 필수적인 역할을 합니다. 실습을 통해 각 속성을 다루는 법을 터득해보세요.