[CSS] 2. 주요 선택자와 캐스캐이딩의 개념

[CSS] 2. 주요 선택자와 캐스캐이딩의 개념

 

1. 주요 선택자

(1) 전체 선택자: ‘*’로 선택한다.

(2) 태그 선택자: ‘태그 이름’으로 선택한다.

(3) 클래스 선택자: ‘.’으로 선택한다.

(4) id 선택자: ‘#’으로 선택한다.

(5) 그룹 선택자: ‘,’로 선택한다.

 

 

2. 캐스캐이딩 스타일 시트와 우선순위

(1) 캐스캐이딩 스타일 시트(CSS)의 의미: 캐스캐이딩(Cascading)은 폭포처럼 위에서 아래로 쏟아진다는 의미이다. 캐스캐이딩 스타일 시트(Cascading Style Sheet)는 위에서 아래로 적용되는 스타일 시트를 의미한다. 이는 CSS에서 가장 중요하게 적용되는 원리이다.

(2) 원칙: 캐스케이딩은 스타일 우선순위/스타일 상속이라는 두 가지 원칙을 가지고 있다.

(3) 우선순위: 캐스캐이딩 스타일 시트는 위에서 아래로 적용되기 때문에, 순서에 따라 우선순위가 결정된다.

-얼마나 중요한가?

-얼마나 한정짓는가?

-소스 순서?

 

3. CSS3&CSS 모듈

(1)CSS3이란?: 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트로, 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 했다. 기존의 HTML은 웹문서를 설계하고, 수시로 변경하는데 많은 제약이 따른다. 이를 보완하기 위해 만들어진 것이 스타일 시트(CSS3)이다. 

(2)CSS3과 접두사 : 띄어쓰기를 넣어주는 태그

 

 

4. 텍스트 관련 스타일

(1) font-family: 글꼴 변경 속성(ex: font-family: :Arial Rounded MT”)

(2) font-size: 글자 크기 변경 속성(ex:font-size:1em;)

(3) font-weight: 글자 굵기를 조절하는 속성 (ex;font-weight:글자 굵기 조절)

(4) font-variant: 대문자→소문자 크기에 맞춰 작게 표시하는 속성

(ex:font-variant:small-caps;:작은 대문자)

(5) font-style: italic,oblique 입력시 이탤릭체로 변경하는 속성 (ex:font-style:italic;)

(6) font: ‘글꼴 스타일, 크기, 줄간격, 글꼴:’ 양식으로 작성한다. 이하 속성들을 한 번에 수정할 수 있다.

(7) color: 글자의 색을 변경한다.

-이 때, 컬러코드에서 중복되는 글자는 생략할 수 있다. (ex:#FF00FF→#F0F)

-background-color: 배경 색을 변경한다.

 

 

(8) text-decoration 속성: 밑줄, 취소선을 그을 때 사용하는 속성이다.

-text-decoration:overline;: 텍스트 밑에 밑줄을 긋는다.

-text-decoration:line-through: 취소선을 긋는다.

-text-decoration: underline;: 밑줄을 긋는다.

-text-decoration: none;: 밑줄을 없앤다.

 

 

(9) text-transform 속성: 영어 알파벳을 소문자, 혹은 대문자로 바꾼다.

-text-transform: uppercase;: 소문자를 대문자로 바꾼다.

-text-transform:capitalize;: 첫 글자만 대문자로 바꾼다.

-text-transform:lowercase;: 대문자를 소문자로 바꾼다.

-text-transform:none;: 기본값, 변함 없음.

 

 

(10) text-shadow 속성: 폰트에 그림자를 추가하는 속성.

(ex:text-shadow:-5px 5px black; = 검은색 그림자를 추가.)

*text-shadow: 7px 7px 15px #000; = 번짐을 추가할 수도 있다.

**중복으로 그림자를 설정하는 것도 가능하다.

 

 

(11) border: 칸(테두리)를 만드는 스타일.

 

 

(12) padding: 테두리-글자 사이의 여백을 만드는 스타일.

margin: 테두리-테두리 바깥의 여백을 만드는 스타일.

 

 

-margin-left: 오른쪽에 여백을 넣는다.

letter-spacing: 자간을 설정한다.

-letter-spacing:normal: 자간을 기본값으로 설정한다.

-letter-spacing: 0.2em;: 대문자 M을 기준으로 20%의 자간으로 설정한다.

word-spacing:

direction 속성:

text-align 속성: 글자를 정렬하는 스타일

-text-align: left;:왼쪽 정렬

-text-align: right;: 오른쪽 정렬

-text-align: center;: 가운데 정렬

-text-align: justify;: 양쪽 정렬, 잘 쓰지 않는다.

text-indent 속성:

line-height 속성:

line-height: 줄 간격을 설정하는 스타일. (line-height: 1;: 줄 간격을 1로 설정)

Lorem: 의미 없는 글자들을 삽입한다.