스타벅스 웹 사이트 만들기 - ch.7 CSS 개요 (1) ~ (4)

1. 기본 문법, 주석

기본 문법

선택자 {
속성: 값;
}
=> 선택자: 스타일을 적용할 대상
=> 속성: 스타일의 종류
=> 값: 스타일의 값

div {color: blue;}
div {color: blue; margin: 20px;} /*외부 여백*/

css 주석

/*주석*/

=> 이렇게 생김 ㅇㅋ?

2. 선언 방식

(1) 내장방식

<style></style>

=> 위와 같은 내용으로 스타일을 작성 하는 방식

• 장점)
  별도의 css 파일을 만들지 않아도 됨

• 단점)
  css 내용이 많아지는 경우에 처리하기 힘듬
  기본적으로 구별해서 관리하는 것을 권장

(2) 인라인 방식

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

• 장점)
  별도로 요소를 찾는 행위가 필요 없음

• 단점)
  너무 지나치게 우선하기 때문에 유지보수 하는데 어려움

(3) 링크 방식

<link rel="" href=""/>

=> 위와 같이 외부 css 문서를 가져와서 연결하는 방식
병렬로 연결

(4) @import 방식

@import url("");

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

2. 선택자_기본

기본 선택자

• 전체 선택자
  '*'
  모든 요소를 선택

• 태그 선택자
  태그 이름이 ABC인 요소 선택

• 클래스 선택자
  HTML Class 속성의 값이 ABC인 요소 선택
  .을 앞에 붙임

• 아이디 선택자
  HTML id 속성의 값이 ABC인 요소 선택
  #을 앞에 붙임

3. 선택자_복합

복합 선택자

• 일치 선택자
  선택자 ABC와 WYZ를 동시에 만족하는 요소 선택

span.orange{
	color: red;
    }

=> span 태그와 orange 클래스 모두가 만족하는 경우에만 실행

• 자식 선택자
  선택자 ABC의 자식 요소 XYZ 선택

ul > .orange {
	color: red;
    }

• 하위(후손) 선택자
  선택자 ABC의 하위 요소 XYZ 선택
  띄어쓰기가 선택자의 기호

div .orange {
	color: red;
    }

• 인접 형제 선택자
  선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

.orange + li {
	color: red;
}

• 일반 형제 선택자
  선택자 ABC의 다음 요소 XYZ 모두를 선택

.orange ~ li {
	color: red;
}