CSS 개념 및 적용

CSS

• HTML (Markup Language) 을 꾸며주는 표현용 언어
• css 의 속성: property / html의 속성: attribute
• 주석

/* 주석 작성 */

h1 {color:yellow; font-size:2em; }

속성이름과 속성값 사이에는 개행을 해서는 안 된다

• 선택자 selector - h1
• 속성 property - color
• 값 value - yellow
• 선언 declaration - color:yellow, font-size:2em
• 선언부 declaration block - {color:yellow; font-size:2em;}
• 규칙 rule set - h1 {color: yellow; font-size:2em;}

h1
	{color:yellow; font-size:2em;}

h1 {
	color:yellow;
	font-size:2em;
}
<!-- 아래처럼 작성하면 안 됨 -->
h1 {
	color:
    yellow; 

CSS 적용

1. Inline

• 해당 요소에 직접 스타일 속성 이용해 규칙 선언
• 선택자 X, 선언부에 내용만 스타일 속성의 값으로 부여하기
• 코드 재활용 불가 -> 사용 빈도 낮음

<div style="color:red;"> hello </div>

2. Internal

• 문서에 < style > 활용
• < head > 내부에 < style > 들어감 ( style 내부에 스타일 규칙 들어감)
• 페이지가 많고 스타일 규칙 내용이 많아지면 사용이 어려움

<style> div {color:red;} </style>

3. External

• 외부 스타일 시트 파일 이용 (스타일 규칙을 별도 외부 파일로 만들어 넣는 것)
  • 이때 외부 파일의 확장자 .css -> css 파일은 stylesheet 으로 적기
  • rel 속성: 연결되는 파일과 문서와의 관계 명시
• 외부 스타일 시트 방식으로 선언 시 파일 관리가 용이하고 용량이 적다 -> 최다 사용

div {color:red;} /* 스타일 규칙 선언 */
<link rel="stylesheet" href="css/style.css">
/* head 내부에 link 선언 후 href 속성으로 css 파일 경로 적기 */ 

4. Import

• 스타일 시트 내 다른 스타일 시트 파일을 불러오는 방식
• style 내부 상단이나 외부 스타일 시트 파일 상단에 선언하나 성능이 좋지 않아 거의 사용하지 않음

@import url("css/style.css");