[부스트코스] CSS (2/3)

CSS Selector

HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법이다.

 

 

element에 style 지정을 위한 3가지 기본 선택자

 

1. tag로 지정하기 - selector 자리에 해당 태그명을 명시

span {
color: red;
}

 

2. id로 지정하기 - #{id 이름}

#spantag {
color: red;
}

 

3. class로 지정하기 - .{class 이름}

.spanClass {
color: red;
}

 

CSS Selector의 다양한 활용

- id, class 요소 선택자와 함께 활용

- 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면) : ','로 구분

- (공백) : 자손 요소

- 자식 선택 (>) : 바로 하위엘리먼트를 가리킴

- nth-child(?) : ?번째 자식요소를 선택

 

 

CSS 기본 Style 변경하기

font 색상 변경

- color: red;

- color: rgba(255, 0, 0, 0.5);

- color: #ff0000;   // 16진수 표기법으로 가장 많이 사용됨

 

font 사이즈 변경

- font-size : 16px;

- font-size : 1em;   // em은 배수로 기준으로부터 몇 배 사이즈로 지정할 수 있음. 16px이 기본값. 기본값은 부모 노드의 값을 상속 받음

 

font 변경

- font-family: Gulim, sanserif;   // ','를 통해 우선순위를 정할 수 있음. 처음게 없으면 다음 걸로 적용

 

배경색

- background-color : #ff0;

- background-image, position, repeat

- background : #0000ff url(".../gif") no-repeat center top;

 

 

[부스트코스 관련 강의 링크]

CSS Selector - https://www.edwith.org/boostcourse-web/lecture/16676/

CSS 기본 Style 변경하기 - https://www.edwith.org/boostcourse-web/lecture/16675/