[HTML5] 14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import

14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import

# CSS3과 스타일 시트

: HTML 문서의 색이나 모양 등 외관을 꾸미는 언어로, CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.

- 현재 CSS3 : CSS level 3 (CSS1 -> CSS2 -> CSS3 -> ~~CSS4(현재 표준화 작업 중~~) )

- CSS3의 기능

1. 색상과 배경

2. 텍스트

3. 폰트

4. 박스 모델

5. 비주얼 포맷 및 효과

6. 리스트

7. 테이블

8. 사용자 인터페이스

# HTML 태그로만 작성한 웹 페이지 vs CSS3 스타일 시트로 꾸민 웹 페이지

# CSS 스타일 시트의 구성

- 셀렉터

: CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름

- 프로퍼티

: 스타일 속성의 이름으로, 약 200개 정도의 프로퍼티가 존재

- 값

: 프로퍼티의 값

- 주석문 (/* ... */)

: 스타일 시트 내에 붙이는 설명문으로, 여러 줄이나 아무 위치에서나 사용할 수 있다.

- CSS3 스타일 시트는 대소문자 구분이 없다.

ex) <span> 텍스트를 20픽셀 blue색으로 출력하는 CSS3 스타일시트

# HTML 문서에 CSS3 스타일 시트 만들기

A) 방법 1

: <style></style> 태그에 스타일 시트 작성

- 전형적인 모양

- <style> 태그는 <head> 태그 내에서만 사용한다.

- <style> 태그는 여러 번 작성할 수 있다.

: 스타일 시트들이 합쳐 사용

- <style> 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용된다.

- text - align : 정렬 (왼, 오, 가운데 정렬)

- margin : 여백

ex)

B) 방법 2

: HTML 태그의 style 속성에 CSS3 스타일 시트 작성

-> 해당 태그에만 스타일이 적용된다.

ex)

+ 여기서 '김치부침개를 좋아하고'의 색이 파란색인 이유는?

: 글자의 색, 크기 등의 속성은 그 글자와 가장 가까이 위치한 속성값을 따르기 때문! 따라서 라인 7의 color: red 는 무시되고, 라인 15의 color : blue 가 적용된다.

C) 방법 3

: <link>태그나 @import 를 이용하여 외부 스타일 시트 파일 불러와 사용하기

- .css 파일에 스타일 시트 저장

: 웹 페이지에서 CSS3 스타일 시트 파일을 불러 사용

-> 웹 페이지마다 동일한 스타일 시트를 중복하여 작성하는 것을 막을 수 있고, 웹 사이트의 전체 웹 페이지 모양의 일관성을 확보할 수 있다는 장점이 있다.

- CSS3 스타일 시트 파일을 불러오는 방법

<link> 태그 이용	@import 이용

ex 1) <link> 태그 이용

ex 2) @import 이용

저작자표시

'✒️ GURU > HTML5' 카테고리의 다른 글

[HTML5] 16. 셀렉터 조합 + 자식 셀렉터 + 자손 셀렉터 + 전체 셀렉터와 속성 셀랙터 + 가상 클래스 셀렉터(pseudo-class) (0)	2022.07.19
[HTML5] 15. CSS3의 규칙 + 스타일 상속 + <p> 태그와 <em> 태그 + 스타일 합치기와 오버라이딩 + 셀렉터 (0)	2022.07.18
[HTML5] 13. HTML에서의 색 표현 + 색 코드 + 컬러다이얼로그 + 시간 정보 입력 폼 요소 + 생일 날짜 입력 받기 + 스핀버튼과 슬라이드 + 입력할 정보의 힌트 보여주기와 placeholder + 폼 요소의 그룹핑 (0)	2022.07.18
[HTML5] 12. 선택형 입력과 콤보 박스 + <select> + <label> 태그 + 폼 요소와 캡션 (0)	2022.07.18
[HTML5] 11. 웹 폼 + <input>, <select>, <textarea> 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + <datalist> + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기 (0)	2022.07.18

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🕰️ 공부하자 공부 🕰️

[HTML5] 14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import

14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import

'✒️ GURU > HTML5' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[HTML5] 14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import

14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import

'✒️ GURU > HTML5' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역