(CSS)속성 종류와 가상선택자

css 속성을 활용하여 html 요소에 style을 적용 할 수 있다.

​

​속성

font - 글꼴(텍스트 요소) 종류,크기,굵기,스타일 등 지정

font-family : 글꼴 종류(사용자 컴퓨터에 설치된 폰트 기준으로 설정 가능, 웹폰트 활용)

font-size : 글꼴크기

font-weight : 폰트 굵기

font-style: 폰트 스타일

​

​

text - 텍스트 요소 표현 옵션

text-align : 텍스트 요소 정렬(적용된 하위 인라인 요소의 정렬을 지정 할 수 있다.)

text-decoration : 텍스트 표기 옵션

​

​

color - 텍스트 요소 색상(웹색상표, rgb, rgba로 표기 가능)

ex) color: #ff000; or color: rgb(255,0,0);

​

border - 테두리 굵기 및 색상, 테두리 스타일

- 전체적으로 적용도 가능하며, 상하좌우 위치를 별도로 적용도 가능하다.

- 굵기, 스타일, 색상 적용이 가능하다.

ex) border: 1px solid #000; > 전체

ex) border-bottom-color: #000 > 아래만

​

padding - 안쪽 여백, 전체 혹은 상하좌우 별도 안쪽 여백 설정 가능

​

margin - 밖 여백, 전체 혹은 상하좌우 별도 밖 여백 설정가능

​

width, height - 블럭 요소의 가로, 세로 사이즈 지정

​

background - 배경 색상 및 배경 이미지 설정

background-image: 배경이미지경로 넣기 > url("상대경로")

background-repeat: 배경 이미지 반복 설정(repeat-x,repeat-y,no-repeat)

background-position: 배경 위치 (순서: 가로 세로)

​

position, z-index

- position : 블럭요소 배치 옵션 설정(relative, absolute, fixed)

- z-indx : 블럭요소 앞뒤 정렬 옵션(높은수가 제일 앞으로)

​

display - 선택된 대상의 inline, block, inline-block, none 처리

​

line-height - 텍스트(인라인 요소) 높이 설정

​

list-style - 불릿 변경

​

float, clear - 블럭요소 배치(레이아웃 배치)할때 쓰인다.

- float : 좌우 블럭요소 배치

- clear : float 배치해제

- overflow: 자식요소의 컨텐츠가 부모의 넓이 및 높이의 크기를 넘어설 경우 컨테츠 노출 방식 설정(스크롤,감추기)

 

 

---

 

가상선택자

- 사용자 행동을 예측하여 style을 정의한다.

- 구문: 선택자:가상선택자명 {css속성:값;}

​

​

:hover - 마우스를 선택자 위에 올렸을 때

​

:active - 마우스로 대상을 누르고 있을 때

​

:focus - 포커스 되었을 때(input)

​

:first-child, :last- child - 선택자의 상하관계가 표현되어야한다.

- first-child : 선택된 대상의 첫번째 요소 선택

- last- child : 선택된 대상의 마지막번째 요소 선택

​

:nth-child(xn) - 선택자의 상하관계가 표현되어야한다.

- 인수 -> 특정 숫자 : 특정 숫자에 순번에 맞는 자식요소 선택

- 인수 -> 2n : 짝수인 자식요소 선택

- 인수 -> 2n+1 : 홀수인 자식요소 선택