패스트캠퍼스 챌린지 5일차 - Part 1. CSS 개요(1)

1. 기본 문법, 주석

선택자 { 속성 : 값; }

주석 /* 설명 작성 */

div{
  font-size: 50px;
  color: blue;
  text-decoration: underline;
}
/* 주석 */

2. 선언 방식

1. 내장 방식 : <style> </style>의 내용으로 스타일 작성 (head 내에)

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

유지보수 측면 단점

1. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식

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

css 우선순위가 높기 때문에 유지보수에 악영향

1. 링크 방식

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

1. import 방식

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

CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식

앞서 연결된 파일이 먼저 해석이 끝나야 연결되므로 연결을 지연시킴.

링크 - 병렬 (빨리 해석이 끝난 파일 먼저 연결)

import - 직렬 (순서대로)

3. 선택자_기본

• : 모든 요소를 선택.

ABC : 태그 이름이 ABC인 요소 선택.

.ABC : class 속성의 값이 ABC인 요소 선택.

#ABC : id 속성의 값이 ABC인 요소 선택.

4. 선택자_복합

ABCXYZ : ABC와 XYZ를 동시에 만족하는 요소 선택 (일치 선택자)

span.orange{
	color: red;
}

/* .orangespan은 인식 못 함 */

ABC > XYZ : ABC의 자식 요소 XYZ 선택 (자식 선택자)

ul > .orange{
	color: red;
}

ABC XYZ : 선택자 ABC의 하위 요소 XYZ 선택. 띄어쓰기가 선택자의 기호! (하위 선택자)

div .orange{
	color: red;
}

ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택. (인접 형제 선택자)

.orange + li{
	color: red;
}

오렌지가 아닌 망고 선택

ABC ~ XYZ : 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택. (일반 형제 선택자)

.orange ~ li{
	color: red;
}

망고, 사과 둘 다 선택

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.