CSS(Cascading Style Sheets) : 웹 페이지 스타일과 레이아웃 지정을 위한 언어. HTML이나 XML 문서의 시각적 표현(색상, 크기, 배치 등)을 정의하는 데 사용.
CSS는 간단하게 말하면 스타일을 입히는 언어입니다.
HTML 또는 XML과 같은 마크업 언어로 페이지의 구조를 정의하고 해당 파일에 CSS를 적용하여 스타일을 입힙니다.
CSS 스타일 적용 방법 : 인라인 스타일, 내부 스타일, 외부 스타일
HTML 기준 가장 기본적인 CSS 파일 적용 방법 3가지입니다.
1. 인라인 스타일(Inline Style)
<h1 style="color: blue; font-size: 24px;">인라인 스타일</h1>인라인 스타일은 HTML 요소에 style 속성을 사용하여 직접 CSS를 작성하는 형식입니다.
예시에서는 제목에 해당하는 <h1>의 글자 색상을 파란색으로, 글자 크기는 24px로 정의하고 있습니다.
장점 :
- 간단한 스타일 변경에 유리합니다.
- 별도의 CSS 파일이 필요하지 않습니다.
- 내부 스타일 선언이 필요하지 않습니다.
단점 :
- 해당 태그에만 스타일이 적용되어 스타일 재사용성이 떨어집니다.
- 많은 스타일이 작성되면 코드가 지저분해져 가독성이 떨어집니다.
2. 내부 스타일(Internal Style)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일 예제</title>
<style>
/* 태그 선택자 */
p {
color: blue;
font-size: 16px;
}
/* 클래스 선택자 */
.highlight {
color: red;
font-weight: bold;
}
/* 아이디 선택자 */
#special {
font-size: 20px;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- 태그 선택자 적용 -->
<p>이 문장은 태그 선택자로 스타일이 적용되었습니다.</p>
<!-- 클래스 선택자 적용 -->
<p class="highlight">이 문장은 클래스 선택자로 스타일이 적용되었습니다.</p>
<!-- 아이디 선택자 적용 -->
<p id="special">이 문장은 아이디 선택자로 스타일이 적용되었습니다.</p>
</body>
</html>내부 스타일은 HTML 파일의 <head> 섹션에 <style> 태그를 사용해 CSS 코드를 작성합니다. 작성된 스타일은 해당 HTML 문서에서만 적용됩니다.
장점 :
- 외부 파일 없이 특정 HTML 페이지 디자인을 제어할 수 있습니다.
단점 :
- 다른 HTML 파일에서 스타일 재사용이 불가능합니다.(해당 파일 내부에서는 재사용 가능)
- 많은 스타일이 작성되면 코드가 지저분해져 가독성이 떨어집니다.(인라인 스타일과 동일)
3. 외부 스타일(External Style)
- CSS 파일(CSS 파일 생성)
/* styles.css */
h1 {
color: red;
font-size: 30px;
}
.anyClass {
color: blue;
}- HTML 파일(CSS 파일 적용)
<!-- HTML 파일 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>외부 스타일</h1>
</body>
</html>
외부 스타일은 CSS 코드를 별도의 파일(.css)에 작성하고 HTML 파일에서 <link> 태그를 통해 연결합니다.
장점 :
- 여러 HTML 파일에서 CSS 파일을 재사용할 수 있어 유지보수가 용이합니다.
단점 :
- 외부 파일이 없거나 연결되지 않으면 스타일이 적용되지 않습니다.
3.1 외부 스타일 폴더 구조 및 파일 위치(+ 경로 입력 예시)
파일 구조
project/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ └── app.js
경로 예시
<link rel="stylesheet" href="styles/main.css">실제 코드 예시
사용자 화면
치킨을 좋아합니다.