[CSS3] CSS3 속성

CSS3의 속성 정리

속성을 속성으로 정리해보았다.

1.가시상태 속성

1_단위

px, pt : 절대값

em : 상대값

2_display

none : 브라우저 화면에서 HTML 요소를 제거

block : HTML요소를 block 타입으로 출력

inline : HTML요소를 inline 타입으로 출력

inline-block : inline과 비슷한데, 넓이값과 높이를 가질 수 있다.

3_visibility

visible : 보인다

hidden : 안보이는데 공간은 유지

4_opcity

0.0 : 투명

1.0 : 불투명

2.레이아웃 속성

-

1_width&height

px : 절대적인 값

% : 가중치에 따른 %

2_margin&padding

margin : 외곽여백

margin-top

margin-right

margin-bottom

margin-left

padding : 내부 여백

padding-top

padding-right

padding-bottom

padding-left

3_테두리 관련 속성

box-sizing : border-box(html 요소 내부에 위치)와 content-box(html 요소 외부에 위치) 테두리의 위치설정

border-width : 테두리 두께

border-style : solid(실선), dashed(점선)

border-color : 테두리 색상

border-radius : 테두리 라운딩(4/2/1 개 파라미터 인경우) ( 좌상|우상|좌하|우하 // 좌상우하|우상좌하 // 모든부분 = 이렇게 설정 가능

4_배경 관련 속성

background-image : url('https://m.nav~~') 이미지 위치정보로 가져오기

background-size : % | px

background-repeat: no-repeat|repeat

background-attachment:fixed;

3.위치관련 및 알아두면 편리한 속성

1_폰트 관련 속성

font-size : 폰트 사이즈

font-family : 폰트를 설정(없으면 브라우저 기본폰트 사용)

font-style : italic 폰트의 이탤릭체를 설정

font-weight : bolder 폰트의 볼드체를 설정

line-height : 행간 설정

text-align : right|left|center 폰트의 정렬을 설정

text-decoration: none 폰트의 표시설정을 할 수 있다.

nth-child(n) : n번째 해당하는 요소를 선택할 수 있다.

ex)  p:nth-child(2) { } : <p>태그중 2번째 요소에 스타일 적용

p:nth-child(3n) { } : <p>태그중 3n번째 요소에 스타일 적용

p:nth-child(3n+1) { } : <p>태그중 3n+1번째 요소에 스타일 적용

p:nth-child(even) { } : <p>태그중 짝수번째 요소에 스타일 적용

p:nth-child(odd) { } : <p>태그중 홀수번째 요소에 스타일 적용

2_position 속성 : 태그 요소의 위치를 설정하는 속성

속성값 종류

static : default 속성값

absolute : 절대좌표를 이용해서 위치를 설정한다.

ex) position : absolute;top: 100px; left: 100px;

relative : 기본 위치를 기준으로 설정만큼 이동

ex)position : relative; top:0; left: 100px;

fixed : 브라우저의 절대좌표를 기준으로 설정된다.

ex) position: fixed; top:100px; left: 100px;

3_overflow 속성 : 내용이 태그 요소의 크기보다 클 때 설정할 수 있다.

속성값 종류

hidden : 내용이 넘치면, 넘치는 내용을 화면에 출력하지 않음

scroll : 넘치는 내용에 대해 스크롤이 생겨 내용을 볼 수 있음(거의 안쓴다고함)

4_float 속성 : HTML 요소의 위치를 설정한다, 주로 레이아웃을 설정할 때 사용한다.

속성값

left : 왼쪽 으로 정렬

right : 오른쪽으로 정렬

**사용하지 않을 경우 <div>내의 block타입으로 상하로 출력된다.

5_그림자 속성 : 그림자를 설정

text-shadow : 그림자를 만들어 준다. (오른쪽거리 | 아래쪽거리 | 선명도 | 색상)

ex) text-shadow : 5px 10px 15px black;

6_그라디언트 속성 : 2가지 이상의 색을 섞어 표현

http://colorzilla.com/gradient-editor/ 에서 자동 생성되는 코드를 복붙ㄱ

4.변형 속성

1_Transition-xx 관련 속성

transition-duration : 몇초동안 변형될지 설정

ex)transition-duration : 3s

transition-delay : 몇초 뒤에 변형될 지 설정

ex)transition-delay : 2s

transition-property : 변형이 적용되는 속성을 설정

ex)transiton-property : background-color, height (html 요소의 배경과 높이에 변형 발생)

transition-timing-function : 변형과 관련된 함수를 설정한다.

ex)transition-timing-function : ease-in (변형되는 속도가 점점 빨라진다)

ex)transition-timing-function : ease-out (변형되는 속도가 점점 느려진다)

2_Animation-xx 속성

animation-duration : 몇초동안 애니메이션을 지속할지를 설정

ex)

animation-delay : 몇초후에 애니메이션이 시작될지 설정

ex)

animation-name : 애니메이션의 이름 설정

ex)

animation-timing-function : 애니메이션과 관련된 함수를 설정

ex) javascript 또는 flash animation으로 구현

//애니메이션 만드는 방법

@keyframes ani {

from { width : 100px; }

to { width:20px; height: 200px; border-radius:100px; }

}