220415 CSS Chapter 6~7

Chapter 6 CSS의 기본

 

HTML로는 웹 사이트의 내용을 나열하고, CSS로는 웹 문서의 디자인을 구성함

 

<style> 태그

HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 겉모습을 결정지음

 

스타일 시트는 크게 브러우저 기본 스타일과 사용자 스타일로 나눠지고

사용자 스타일은 다시 인라인 스타일/내부 스타일 시트/외부 스타일 시트로 나눠짐

 

인라인 스타일은 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것.

내부 스타일 시트는 <style>태그 안에, 적용할 태그의 스타일을 작성함

외부 스타일 시트는 style.css라는 외부 스타일 시트 파일을 링크해서 스타일 정보를 적용하는 것.

 

 

- 내부 스타일 시트에서 선택자의 종류에 따라 스타일 적용 대상이 달라짐

전체 선택자 (*) : 문서의 모든 요소에 적용

타입 선택자 (예를 들면 p, h1 등등) : 해당 태그를 사용한 모든 요소에 적용

클래스 선택자 : 해당 태그 안에 class="클래스명"을 적어서 적용시킴

id 선택자 : 클래스 선택자와 마찬가지로 특정 부분을 선택해서 스타일을 적용할 때 사용. 그러나 문서에서 한 번만 적용할 수 있음.

 

 

캐스케이딩 스타일 시트(CSS)

-> 스타일 시트 적용의 우선순위가 위에서 아래, 계단식으로 적용된다.

그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함

1. 사용자 스타일 -> 2. 제작자 스타일 -> 3. 브라우저 기본 스타일

 

 

- 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있음.

1. !important : 어떤 스타일보다 우선 적용

2. 인라인 스타일 : 해당 태그만 스타일을 적용

3. id 스타일 : 지정한 부분에 한 번만 적용 가능

4. 클래스 스타일 : 지정한 부분마다 적용 가능 

5. 타입 스타일 : 특정 태그에 스타일을 일괄적으로 적용

 

그리고 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀.

 

Chapter 7 텍스트를 표현하는 다양한 스타일

 

- 글자와 관련된 속성

font-family : 글꼴 종류를 지정

font-size : 글자 크기를 지정

font-style : 글자를 이탤릭체로 표시

font-weight : 글자의 굵기를 지정

 

* 구글 폰트 사용하기

fonts.google.com 에 들어가서 원하는 폰트를 선택하고

[+ Select this style] 을 클릭,

[@import]를 클릭해서 @import 문을 복사해서 <style> 태그 다음에 붙여 넣고, 글꼴 이름을 복사해서 웹 폰트를 사용할 요소에 붙여넣는다.

 

 

- 텍스트 스타일 속성

color : 글자색을 지정

text-decoration : 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정

text-shadow : 텍스트에 그림자를 추가

text-align : 텍스트 정렬 방법을 지정

line-height : 줄 간격을 조절함

 

---

출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석