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