[ HTML + CSS + 자바스크립트] 4.1 ~ 5.2

[ 코딩 자율학습 ]

HTML+CSS+자바스크립트

4.1 )  CSS 문법 살펴보기

h1{color:red;}

선택자와 선언부

color - 속성

red - 값

; (세미콜론)

- 넣으면 연속해서 스타일 작성 가능

4.2 ) CSS 적용하기

 

- CSS 적용 방법 (3) -

내부 스타일 시트 적용 예시

1. 내부 스타일 시트

html 문서에 <style> 태그 사용

2. 외부 스타일 시트

새로운 css 파일 생성

(확장자 .css)

html 파일에 css 파일 연결

(link 태그 사용)

html 파일과 css 파일 연결된 상태 확인

3. 인라인 스타일 사용

: html 문서에 있는 태그에

직접 CSS 코드 작성하는 방법

선택자 부분 필요없음

5.1 ) 기본 선택자 사용하기

< 전체 선택자 >

: 모든 요소 선택

p 태그 지정

< 태그 선택자 >

p 태그 지정하면

p 태그만 선택된다

< 아이디 선택자 >

: id 선택자는 고유해야 한다

id abc만 선택

(#abc)

< 클래스 선택자 >

: 클래스 속성값 앞에 . 기호 붙임

id 속성과 달리 중복 가능

< 기본 속성 선택자 >

class 속성 예시

5.2 ) 조합 선택자 사용하기

< 하위 선택자 >

div 그룹의 하위인 p를 선택

공백으로 구분

< 인접 형제 선택자 >

+

h1 태그와 인접한 형제 요소인

h2 태그를 선택자로 지정

이전 요소보다 먼저 등장한 요소는 선택대상 X

( 만약 h1 이전에 h2 도 있다면 그건 포함X )

< 일반 형제 선택자 >

~

형제 관계에 있는 모든 요소를 선택자로 지정

이전 요소보다 먼저 등장한 요소는 선택대상 X