5장: CSS 구현하기 - 색상, 글꼴, 및 레이아웃 디자인
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의 결점을 보완하여, 사용자가 보기 편하고 아름다운 웹 페이지를 만드는 데 필수적인 역할을 합니다. 실습을 통해 각 속성을 다루는 법을 터득해보세요.
참고 자료


