스타일 적용하기 (CSS 소개)

약 5분

본문 듣기

스타일 적용하기 (CSS 소개)

안녕하세요, 여러분! 오늘은 여러분의 웹 페이지에 색깔과 멋스러움을 더해줄 CSS에 대해 알아보겠습니다.

CSS란 무엇인가요?

CSS는 'Cascading Style Sheets'의 약자로, 웹 페이지의 스타일, 즉 배치와 디자인을 정의하는 언어입니다. 쉽게 말하면, HTML로 만든 뼈대에 옷을 입히는 작업이죠. CSS를 사용하면 글씨의 색깔, 크기, 글꼴, 배경 색깔 등 다양한 시각적 요소를 조절할 수 있습니다.

CSS의 기본 구조

CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성되어 있습니다. 선택자는 어떤 HTML 요소에 스타일을 적용할지를 결정하고, 선언 블록은 적용할 스타일 속성과 값을 정의합니다.

예를 들어, 다음과 같은 CSS 코드가 있다고 가정해 봅시다:

h1 {
    color: blue;
    font-size: 30px;
}

여기서 h1은 선택자이고, 중괄호 {} 안의 내용이 선언 블록입니다. color: blue;는 글씨 색을 파란색으로 하고, font-size: 30px;는 글씨 크기를 30픽셀로 지정하는 것입니다.

실습: CSS로 자기소개 페이지 스타일링하기

이제 VS Code를 열고, 여러분의 index.html 파일에 CSS를 추가해 봅시다.

CSS 파일 만들기: 프로젝트 폴더 안에 styles.css라는 파일을 만듭니다.
HTML 파일과 연결하기: index.html 파일의 <head> 안에 다음과 같이 링크를 추가합니다.
```
<link rel="stylesheet" href="styles.css">
```

스타일 추가하기: styles.css 파일에 다음 스타일을 입력해 주세요.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}
h1 {
    color: #333;
}
p {
    color: #666;
}

이제 여러분의 자기소개 페이지가 깔끔하게 스타일링되었습니다! CSS 아이디어를 활용해 색깔이나 폰트를 바꾸어 보세요. 그럼 여러분만의 독특한 스타일을 창조할 수 있을 것입니다!

핵심 요약

CSS는 웹 페이지의 스타일을 결정하는 언어입니다.
선택자와 선언 블록으로 구성되어 있습니다.
HTML 파일에 CSS 파일을 연결해 스타일을 적용합니다.

실습 문제

본인의 취향에 맞게 h1, p 스타일을 변경해 보세요.
추가로 배경색을 자신이 좋아하는 색으로 설정해 보세요.
또 다른 HTML 요소에 스타일을 추가해 보세요 (예: h2, button).

개인 프로젝트

여러분이 만든 자기소개 페이지에 CSS를 적용해 보세요. 여러분의 특성과 취향이 드러나는 스타일로 꾸며보는 것입니다. 처음엔 간단한 스타일링으로 시작해도 괜찮습니다. 조금씩 더 발전시켜 나가며 다양한 스타일 요소를 실험해 보세요! 여러분의 창의력이 담긴 페이지를 기대하겠습니다!

CSS를 활용하여 더 아름답고 개성 있는 웹 페이지를 만들어 봅시다!
여러분 화이팅입니다!

스타일 적용하기 (CSS 소개)