CSS 기초

기본 문법

선택자 { 
	속성: 값; 
	속성: 값; 
}

선택자

스타일을 적용할 대상(Selector)

속성

스타일의 종류(Property)

값

스타일의 값(Value)

 

주석

/* 글 */

 

선언 방식

내장 방식

<style></style>의 내용으로 스타일을 작성하는 방식

• 좋은 방법은 아님

<style>
	div {
		color: red;
		margin: 20px;
	}
</style>

 

인라인 방식

요소의 style 속성에 직접 스타일을 지정하는 방식(선택자 없음)

• 지나치게 우선하는 문제
• → 유지보수에 악영향
• 병렬 연결
• index.html

<div style="color: red; margin: 20px;"></div>

• main.css

div {
	color: red;
	margin: 20px;
}

 

링크 방식

<link/>로 외부 css문서를 가져와서 연결하는 방식

<link rel="stylesheet" href="./css/main.css">

 

@import 방식

css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식

• 직렬 연결
  • 연결 지연
• index.html

<link rel="stylesheet" href="./css/main.css">

• main.css

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

div {
	color: red;
	margin: 20px;
}

• box.css

.box {
	backgroud-color: red;
	padding: 20px;
}

 

스타일 상속

부모 요소에 적용된 스타일이 하위 요소까지 상속되어 영향을 미치는 것

상속되는 css 속성들

• 글자/문자 관련 속성들 (모든 속성은 아님)

 

강제 상속

• inherit 속성 값

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.