[CSS] 스타일 속성 모음

#글자와 관련된 속성

font-family : 글꼴 종류를 지정

font-size : 글자 크기를 지정

font-style : 글자를 이탤릭체로 표시할것인지 지정

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

 

 

#텍스트 스타일 속성

color : 글자색을 지정

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

text-transform : 텍스트 전체 또는 첫 글자를 대문자로 표시한다.(영문자만)

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

line-height :줄 간격 조절

letter-spacing : 자간(글자 사이 간격) 지정

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

 

#테이블 관련 속성

background : 배경색지정

caption-side : caption 태그 위치 지정 위 아래

border: table{ 표바깥테두리 } 혹은 td,th { 셀 테두리 }지정

border-spacint : 셀 사이 여백 가로세로 길이 조정

border-collapse : 표화 셀 테두리 합쳐줌

 

#웹에서 색상을 지정하는 법

16진수 : 빨강, 초록, 파랑 각각 두자리씩 총 여섯자리의 16진수(000000~fffffff)로 색상을 표현한다.

rgb, rgba :  빨강,초록,파랑의 양을 0~255(원색)사이 숫자로 표현, 불투명도 a는 0(투명)~1(불투명)사이

hsl, hsla : 색상(색상환 각도)/ 채도(0%(회색) ~ 100%(원래색)) / 명도(0%(어둡) ~ 50%(원색) ~ 100%(흰색))의 값으로 색상표현, 불투명도 a

색상이름 : red,yellow,black과 같은 색상 이름 사용

 

#박스 모델 속성

width : 박스 모델의 너비를 지정

height :박스 모델의 높이를 지정

box-sizing : 박스 모델의 크기를 계산하는 기준을 지정

box-shadow :박스 모델에 그림자 효과를 추가

 

#테두리 속성

border-style : 상하좌우 4개 방향의 테두리 스타일(테두리 두께, 색상, 둥근정도)을 한꺼번에 정의

border-위치-style : 특정 위치의 테두리 스타일만 지정

border-width : 상하좌우 4개 방향 테두리 두께를 한번에 지정

border-위치-width : 특정 위치의 테두리 두께만 지정

border-color : 상하좌우 4개 방향 테두리 색상 지정

border-위치-color : 특정위치 테두리 색상 지정

border-radius :상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글게만든다.

border-위치-radius : 특정 꼭짓점만 둥글게 처리

 

#여백 속성

margin : 상하좌우 4개의 마진을 한꺼번에 지정

margin-위치 : 특정 위치 마진만 지정

padding: 상하좌우 4개의 패딩을 한꺼번에 지정

padding-위치 : 특정 위치 패딩만 지정

 

#레이아웃 속성

display : 화면에서 요소 배치 방법을 지정 (bolock, inline, inline-block, none)

float : 웹 요소를 왼쪽이나 오른쪽으로 배치한다. clear속성으로 해제할수있음

 

#위치 지정 속성

left,right,top,bottom : 기준 위치와 요소 사이에 상하좌우 얼마나떨어져있는지 지정

position : 웹요소의 기준위치를 정해준다 (static,relative,absolute,fixed)

 

#배경 이미지 관련 속성

background-color : 배경색을 지정

background-clip : 배경색이나 이미지를 어디까지 적용할지 지정( 패딩까지? 마진까지? 보더까지?)

background-image : 배경 이미지를 지정

background-repeat : 배경이미지의 반복방법을 지정

backgrond-position : 배경 이미지의 위치를 지정

background-origin : 배경 이미지를 배치할 기준을 정함

background-attachment : 배경 이미지를 문서에 고정

background : 배경 스타일을 한꺼번에 지정

background-size : 배경 이미지의 크기를 조절

 

#선형 그러데이션 관련 속성

방향 : to다음에 방향을 나타내는 예약어 2개까지 사용가능(left,right,top,bottom)

각도 : deg로 표기

색상 중지점 : 쉼표로 색상 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정할수도있음

 

#원형 그러데이션 속성

모양

• ellipse : 타원형의 그러데이션을 나타내며 기본값임
• circle : 원형의그러데이션을 나타냄

크기

• closest-side : 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 측면에 닿게
• closest-corner: 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 꼭짓점에 닿게
• farthest-side : 그러데이션 가장자리가 그러데이션 중심에서 가장 멀리떨어진 측면에 닿게
• farthest-corner : 그러데이션 가장자리가 그러데이션 중심에서 가장 멀리떨어진 꼭짓점에 닿게

위치 : at를 앞에 붙인 후 키워드나 백분율 사용

색상중지점 :쉼표로 색상 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정할수도있음

 

#연결 선택자

하위 선택자 ( 상위요소 하위요소) : 상위요소에 포함된 모든 하위요소를 선택함

자식 선택자 (부모요소 >자식요소) : 부모 요소에 포함된 자식 요소만 선택함

인접 형제 선택자( 요소1 + 요소2) : 요소 1 이후 맨먼저오는 형제요소 선택함

형제 선택자 (요소1 ~요소2) : 요소 1과 형제인 모든 요소 선택함

 

#속성 선택자

[속성] : 해당 속성이 있는 요소 ex) [required]

[속성 = 값] : 지정한 속성이 있는 요소

[속성 ~= 값] : 지정한 속성값이 포함된 요소(단어 일치)

[속성 |= 값] : 지정한 속성값이 포함된 요소 (단어 일치 + 하이픈 연결)

[속성 ^= 값] : 지정한 속성값으로 시작하는 요소

[속성 $= 값] : 지정한 속성값으로 끝나는 요소

[속성 *= 값] : 지정한 속성값의 일부가 일치하는 요소

 

#가상 클래스

:link - 방문하지 않은 링크에 스타일 적용

:visited - 방문했던 링크에 스타일 적용

:hover -지정한 요소에 마우스 포인터를 올려놓았을때 스타일 적용

:active - 지정한 요소를 활성화했을때 스타일 적용

:focus - 지정한 요소에 초점이 맞춰졌을때 스타일 적용

:target - 앵커 대상에 스타일 적용

:enabled - 지정한 요소를 사용할 수 있는 상태일때 스타일 적용

:disabeld - 지정한 요소를 사용할 수 없는 상태일때 스타일 적용

:checked - 선택한 요소의 스타일을 적용

:not() - 지정한 요소가 아닐때 스타일 적용

 

#구조 가상 클래스

:only-child  부모안에 자식요소가 하나뿐일 떄 자식요소 선택

A:only-type-of 부모안에 A요소가 하나뿐일떄 선택

:first-child 부모 안에 있는 요소 중에서 첫번째 자식 요소 선택

:last-child 부모 안에 있는 요소 중 마지막 자식 요소 선택

A:first-of-type  부모 안에 있는 A요소 중 첫번째 요소 선택

A:last-of-type 부모 안에 있는 A요소 중 마지막 요소 선택

:nth-child(n) 부모안 모든 요소 중n번째 자식 요소 선택

:nth-last-child(n) 부모안 모든 요소중 끝에서 n번째 자식 요소 선택

A:nth-of-type(n) 부모 안에 있는 A요소 중 n번쨰 요소를 선택

A:nth-last-of-type(n) 부모 안에 있는 A요소 중 끝에서 n번째 요소 선택

 

가상 요소

::first-line 첫번째 줄을 선택한다

::first-letter 줄에서 첫번째 글자를 선택한다

::before 특정 요소의 앞에 내용이나 스타일을 추가한다.

::after 특정 요소의 뒤에 내용이나 스타일을 추가한다.

 

 

변형 함수

translate()함수 : 요소 이동하기

transform: translate(tx,ty) 지정한 크기 만큼 x,y축으로 이동함

transform: translate(tx,ty,tz) 지정한 크기 만큼 x,y,z축으로 이동

transform: translateX(tx) 지정한 크기만큼 x축으로 이동

transform: translateY(ty) 지정한 크기만큼 y축으로 이동

transform: translateZ(tz) 지정한 크기만큼 z축으로 이동

 

scale()함수 : 요소 확대 축소하기

transfrom: scale(sx,sy) 지정한 크기만큼 x,y축으로 확대 축소

transfrom: scale(sx,sy,sz) 지정한 크기만큼 x,y,z축으로 확대 축소

transfrom: scaleX(sx) 지정한 크기만큼 x축으로 확대 축소

transfrom: scaleY(sy) 지정한 크기만큼 y축으로 확대 축소

transfrom: scaleZ(sz) 지정한 크기만큼 z축으로 확대 축소

 

rotate()함수 : 요소 회전하기

transform: rotate(각도) 지정한 각도만큼 회전

transform: rotateX(각도) x축을 기준으로 지정한 각도만큼 회전

transform: rotateY(각도) y축을 기준으로 지정한 각도만큼 회전

transform: rotateZ(각도) z축을 기준으로 지정한 각도만큼 회전

transform: rotate3d(rx,ry,rz,각도) x축과 y축 z축을 기준으로 지정한 각도만큼 회전

 

skew()함수 : 요소 비틀기

transform: skew(ax,ay) 지정한 각도만큼 x축과 y축을 비틈

transform: skewX(ax) 지정한 각도만큼 x축으로 비틈

transform: skewY(ay) 지정한 각도만큼 y축으로 비틈

 

트랜지션 속성

transition-property  트랜지션의 적용 대상을 지정한다, 기본값은 all

transition-duration  트랜지션의 실행 시간을 지정, 단위는 s, 기본값은 0

transition-timing-function  트랜지션 효과의 시작 중간 끝에서 속도를 지정할수있다.

transition-delay  트랜지션의 지연 시간을 지정한다 , 단위는 s , 기본값은 0

transition 위 나온 속성 모두 한꺼번에 지정

 

애니메이션 속성

@keyframes 애니메이션이 바뀌는 지점을 설정함(from > 50% > to)

animation-delay 애니메이션의 시작 시간을 지정

animation-direction 애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정함

animation-duration 애니메이션의 실행시간을 지정함, 단위는 s

animation-iteration-count 애니메이션의 반복 횟수를 지정

animation-name 이름을 통해 애니메이션 구별함 

animation-timing-function 키프레임의 시작 중간 끝에서 전환 형태를 지정할수있다.

animation 한꺼번에 속성 지정가능