[CSS 수업] 2강 - CSS 적용 방법
안녕하세요! 그레이해커 월횽입니다.
CSS는 HTML로 만든 웹 페이지를 스타일링하여 보기 좋게 꾸며주는 언어입니다. 이 강의에서는 CSS를 실제로 어떻게 적용하는지 알려드릴게요.
1. CSS의 의미와 사용 이유
CSS는 "Cascading Style Sheets"의 약자로, HTML로 작성한 웹 페이지의 디자인을 꾸며주는 역할을 합니다.
텍스트의 색상, 크기, 폰트, 배경, 여백, 정렬 등 다양한 시각 요소를 제어할 수 있어 웹페이지의 가독성과 시각적 완성도를 높입니다.
2. 외부 스타일 적용하기
외부 스타일은 별도의 CSS 파일을 만들어 HTML 파일에서 불러오는 방식입니다. 다음과 같은 형태로 사용합니다:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
style.css 파일에는 원하는 CSS 스타일을 자유롭게 작성하면 됩니다.
3. 내부 스타일 적용하기
내부 스타일은 <style> 태그를 사용하여 HTML 파일 안에서 CSS를 직접 작성하는 방식입니다.
<style>
h1 {
color: red;
}
</style>
위 예시는 모든 <h1> 태그의 텍스트 색상을 빨간색으로 설정하는 코드입니다.
4. 내부 스타일과 외부 스타일의 차이
내부 스타일은 HTML 파일 안에 CSS를 포함시켜 작성하며, 파일 분리가 필요 없고 작성이 빠르지만 코드가 길어질 수 있습니다.
외부 스타일은 CSS 파일을 분리하여 관리하며 코드 재사용성과 유지보수가 용이합니다.
규모가 작은 프로젝트에서는 내부 스타일도 충분히 사용 가능하지만, 중·대형 프로젝트나 협업 시에는 외부 스타일이 더 유리합니다.
다음 수업으로 넘어가 볼까요?
오늘은 CSS를 적용하는 방법을 배워보았습니다. 외부 스타일과 내부 스타일의 차이를 잘 이해해 두시면, 프로젝트에서 효과적인 CSS 적용이 가능합니다.
다음 시간에는 CSS 선택자를 배워볼 거예요!
이전 강의 보기: [CSS 수업] 1강 - CSS란 무엇일까?
다음 강의 보기: [CSS 수업] 2강 - CSS 적용 방법