비전공자를 위한 HTML/CSS 강의 공부 기록입니다.
1. CSS 구문
CSS는 HTML 요소를 꾸며주는 역할을 한다.
h1 { color: yellow; font-size: 20px; }- 선택자(selector) -
h1 - 속성(property) -
color,font-size - 값(value) -
yellow,20px - 선언(declaration) -
"color: yellow","font-size: 20px" - 선언부(declaration block) -
{ color: yellow; font-size: 20px; } - 규칙(rule set) -
h1 { color: yellow; font-size:2em; }
CSS 파일은 여러 개의 규칙으로 이루어져 있다.
h1 {
color: yellow;
font-size: 20px;
}선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 할 수 있으나
h1 {
color:
yellow;
}속성 이름과 속성 값 사이에는 개행을 할 수 없다.
2. CSS의 적용
1) inline
Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다.
해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다.
<div style="color:blue;"> 하늘은 파란 색 </div>Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않는다.
2) internal
Internal은 문서에 <style>을 활용한 방법이다.
<style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어간다.
<head>
<style>
div {
color: blue;
}
</style>
</head>위의 코드로 모든 <div>에 같은 스타일을 줄 수 있으나 페이지가 많고 스타일 규칙 내용이 많아질 경우 코드가 매우 복잡해지기 때문에 선호되는 방식은 아니다.
3-1) external
External은 외부 스타일 시트 파일을 이용한 방법이다.
외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식입니다.
외부 파일은 확장자가 .css가 되며 css 파일이라고 부릅니다.
div {color: blue;}- CSS 파일을 만들고 파일 내부에 스타일 규칙을 선언한다.
- html 파일
<head>내부에<link>를 이용해서 CSS 파일을 연결 한다.
<head>
<link rel="stylesheet" href="css/style.css">
</head><head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적습니다.
rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 한다.
3-2) external 스타일의 장점
- 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있다.
- 수정 시 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있다.
파일 관리가 편하면서도 용량이 작기 때문에 주로 사용된다.
4) import
Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이다.
성능 상 좋지 않아 거의 쓰이지 않는다.
