[웹개발 기초] 여러가지 선택자와 속성들

2019. 06. 14 필기

 

● 선택자(selector)

전체 선택자 : 모든 엘리먼트 선택 - 비권장 

태그 선택자 : 엘리멘트이름(태그이름)을 이용하여 엘리먼트 선택

클래스 선택자 : 엘리먼트에 부여된 클래스값을 이용하여 엘리먼트 선택
=> 엘리먼트의 클래스값 앞에 .을 붙여 사용
=> 다수의 엘리먼트에 스타일 적용

아이디 선택자 : 엘리먼트에 부여된 고유값을 이용하여 엘리먼트 선택
=> 엘리먼트의 고유값 앞에 #을 붙여 사용
=> 하나의 엘리먼트에 스타일 적용

그룹 선택자 : 선택자를 ,로 여러개 나열 선언하여 엘리먼트를 선택

후손 선택자 : 부모 엘리먼트에 존재하는 모든 하위 엘리먼트 선택
형식) 부모선택자 후손선택자

자식 선택자 : 부모 엘리먼트에 존재하는 모든 자식 엘리먼트 선택
형식) 부모선택자 > 자식선택자


필터 선택자 : 다수의 선택 엘리먼트 중 원하는 엘리먼트만 선택
=> 원하는 엘리먼트를 선택하기 위해 클래스 선택자 사용
형식) 선택자.클래스선택자

형제 선택자 : 동일한 부모 엘리먼트를 가진 같은 깊이의 엘리먼트 선택
형식) 선택자 ~ 선택자

인접 형제 선택자 : 동일한 부모 엘리먼트를 가진 같은 깊이의 엘리먼트 중 첫번째 엘리먼트 선택
형식) 선택자 + 선택자

가상 선택자 : 엘리먼트의 상태를 이용하여 스타일 적용
형식) 선택자:상태

:link : 하이퍼 링크 페이지를 브라우저에서 한번도 요청하지 않은 상태

:visited : 하이퍼 링크 페이지를 브라우저에서 한번이상 요청한 상태

:hover : 엘리먼트에 마우스 커서가 위치한 상태

:active : 엘리먼트를 마우스로 선택한 상태

:first-child : 선택된 다수의 엘리먼트에서 첫번째 위치의 엘리먼트

:last-child : 선택된 다수의 엘리먼트에서 마지막 위치의 엘리먼트

:nth-child(n) : 선택된 다수의 엘리먼트에서 첫번째에서 n번째 위치의 엘리먼트

:nth-last-child(n) : 선택된 다수의 엘리먼트에서 마지막에서 n번째 위치의 엘리먼트

:nth-child(2n) : 선택된 다수의 엘리먼트에서 짝수번째 위치의 엘리먼트
=> :nth-child(even) 동일

:nth-child(2n-1) : 선택된 다수의 엘리먼트에서 홀수번째 위치의 엘리먼트
=> :nth-child(odd) 동일

:nth-child(Xn) : 선택된 다수의 엘리먼트에서 X 배수인 위치의 엘리먼트

:only-child : 선택된 엘리먼트가 하나인 상태

:not(선택자) : 선택 엘리먼트를 제외한 엘리먼트

:disabled : 선택 엘리먼트 중 비활성화 상태

:checked : 선택 엘리먼트 중 체크된 엘리먼트 - input 태그의 type 속성값이 radio 또는 checkbox인 경우 사용

:selected : 선택 엘리먼트 중 선택된 엘리먼트 - option 태그인 경우 사용

:focus : 선택 엘리먼트에 촛점이 위치한 상태

 

a: active

disabled : 선택 엘리먼트 중 비활성화 상태
checked : 선택 엘리먼트 중 체크된 엘리먼트 - input 태그
selected : 선택 엘리먼트 중 선택된 엘리먼트 - option 태그

font-family : 글꼴 설정 - 글꼴 나열(순차적용)
=> 클라이언트에 해당 글꼴이 존재하지 않을 경우 기본 글꼴 사용(WAS의 플랫폼(OS)에 존재)

웹폰트(WebFont) : 클라이언트에게 글꼴 제공 - 클라이언트가 다르
@font-face : 폰트 파일을 제공하기 위한 시스템 설정
=> font-family 속성 : 제공되는 폰트파일의 고유값을 입력(@font-face를 이용해야 폰트패밀리 이용 가능)
=> src 속성 : 글꼴 파일의 URL주소를 입력

<형식> 
@font-face { 
font-family: ""; 
src: url("");
} 

1. ttf 파일 : 플랫폼에서 사용되는 글꼴파일(비권장)
2. woff 파일 : 웹에서 사용되는 글꼴파일 - IE9 이상, 크롬, 파이어폭스, 사파리 등에서 사용
3. eof 파일 : 웹에서 사용되는 글꼴파일 - IE8 이하, 크롬, 파이어폭스, 사파리 등에서 사용

font-family : 엘리먼트에 글꼴 설정 - 글꼴 나열 가능(순차 적용)
클라이언트에 해당 글꼴이 존재하지 않을 경우 클라이언트 플렛폼(OS)의 기본 글꼴 사용

font-variant : 알파벳에 스타일 속성 - normal(기본), small-caps(소문자를 작은 대문자로 변환)

font-style : 글자 기울기에 대한 스타일 속성 - normal(기본),italic

font-size : 글자 크기에 대한 스타일 속성 - 기본 : 16px
속성값 단위 : px(기본) pt em % 키워드(small,medium,large 등)
글자 크기 키워드는 medium(16px)를 기준으로 1.2배씩 증가 또는 감소

font-weight : 글자 두께에 대한 스타일 속성 - 100~900 키워드(normal, bold 등)


font : 글자 관련 모든 스타일 속성값 설정 - 속성값은 공백을 이용하여 구분

px : pixel

pt : inch per pixel

em : M 문자의 폭을 기준으로 설정된 문자크기 단위 => http:pxtoem.com 참조

font-weight : 글자 두께에 대한 스타일 속성 - 100~900 키워드(normal, bold 등)

font : 글자 관련 모든 스타일 속성값 설정 - 속성값은 공백을 이용하여 구분

letter-spacing : 문자와 문자 사이의 간격을 설정하기 위한 스타일 속성

word-spacing : 단어와 단어 사이의 간격을 설정하기 위한 스타일 속성

line-height : 줄과 줄 사이의 간격을 설정하기 위한 스타일 속성

white-space : 공백처리에 대한 스타일 속성 - 박스모델의 폭을 벗어난 텍스트 처리
속성값 : normal(기본) pre-line(normal 속성값과 동일) pre nowrap pre-wrap

pre-line : 다수의 공백을 하나의 공백으로 처리하여 출력 - 자동 줄 바꿈되어 출력

pre : 다수의 공백을 그대로 처리하여 출력 - 박스모델 폭을 벗어나 출력

nowrap : 다수의 공백을 하나의 공백으로 처리하여 출력 - 박스 폭을 벗어나서 출력

pre-wrap : 다수의 공백을 그대로 처리하여 출력 - 폭을 벗어나는 내용은 자동 줄 바꿈되어 출력

text-align : 문자 정렬 - left, right, center, justify(양쪽정렬)

direction : 문장 쓰기 방향에 대한 스타일 속성 - ltr(왼쪽 > 오른쪽 : 기본) rtl(오른쪽 > 왼쪽)

text-align : 문장 정렬에 대한 스타일 속성 - left(기본) right center justify(양쪽정렬)

text-shadow : 문장의 그림자 관련 스타일 속성 - 속성값 : 가로 세로 범짐 색상
그림자 효과는 ,로 나열하여 중첩 표현 가능

overflow : 박스모델 영역을 벗어난 문장 처리 관련 스타일 속성 - visiable(기본) hidden

text-overflow : 숨겨진 문장에 대한 처리 관련 스타일 속성 - clip(기본 - 잘라내기) ellipsis(... 기호 출력)

text-decoration : 문장 라인(선) 관련 스타일 속성 - none(기본) underline line-through overline

text-indent : 문장 앞의 여백 관련 스타일 속성

text-transform : 문장 변형 관련 스타일 속성 - none(기본) uppercase lowercase capitalize

font-size : 글자 크기에 대한 스타일 속성 - 기본 : 16px
속성값 단위 : px(기본) pt em% 키워드(small, medium, large, xx-large 등)
=> medium(16px)을 기준으로 1.2배씩 증가