css3 기초

주석 

<!-- -->

display 속성

화면에 어떻게 보이는지 설정한다.

(1)block

<div>. <p>, <li> 같이

블럭 쌓듯이 층층이 쌓는 것

(2)inline

<span> 같이

옆으로 붙여나가는 것

(3)inline-block

block의 속성 갖고 옆으로 붙여나간다.

옆으로 정렬 되면서 높이의 속성도 가짐.

(4)none

자리 포함 모든것이 화면에서 지워짐

visibility 속성

visibility:hidden

자리는 남고 화면에서만 지움

opacity 속성

투명도를 조절한다.

숫자가 작을수록 투명해진다.

opacity:0.7;

★margin과 padding 속성

margin:10px;

오리지널 사이즈는 그대로 있고 상하좌우 10px의 여백이 생김

padding:10px;

오리지널 사이즈에서 상하좌우 10px가 증가

margin:10px 5px;

상하 10, 좌우 5

margin:10px 5px 7px;

상 우 하 좌

왼쪽 값 없으므로 우측 값 재활용하여 7px 적용된다.

box-sizing속성

box-sizing:border-box;

오리지널 크기 안쪽으로 테두리 그려줌

테두리를 포함하여 크기 변화 없음

box-sizing:content-box;

오리지널 크기 바깥쪽으로 테두리 그려줌

테두리 때문에 크기 증가

border 속성

border:15px solid #색상; 

실선

border-style: dashed; 

점선

border-top:5px #색상;

위 테두리만 표시

border-radius:10px; 

테두리 둥글게

 

background속성

(1)

background-image:50%;

이미지 1/4로 축소됨

(2)

background-repeat:no-repeat;

배경에 바둑판 배열을 안 하는 것

디폴트는 바둑판 배열이다.

(3)

background-attachment:fixed;

div의 사이즈 관계없이 브라우저 전체에 적용하는 것

div사이즈가 정해져 있다면 이미지는 짤린다.

font속성

font-family: '폰트이름', '폰트이름', '폰트이름';

첫번째 폰트로 하길 원하는데, 사용자가 폰트를 안 가지고 있으면 뒤에 폰트

그것도 없으면 그 뒤에 폰트, 다 없으면 디폴트 폰트로 보여진다.

font-style:italic;

italic normal;

글자 기울기

font-weight:bold;

600;

글자 굵게

line-height:50px;

행 간격(문장간 상하 간격)

line-height:(width값과 똑같은 값);

글자 세로 중앙 정렬됨

*text-align:center;

가로 중앙 정렬

position 속성

position: absolute;

절대값

좌상단에 붙어 나옴

position: absolute;

top:50px;

left:40px;

좌상단에서 띄어져서 나옴

position: fixed;

화면상에 브라우저에 따라가지 않고

스크롤로 욺직여도 위치 변화없음

position: static;

static이 디폴트 값이다

top, left 값 줘도 무의미 해진다.

position:relative;

top:100px; left 100px;

화면 좌상단에서부터 시작하지 않고

원래 있어야할 자리에서부터 시작

z-index:20;

z-index:10;

깊이 값 조정

숫자가 높을 수록 상단에 놓임

파워포인트의 위로 보내기 처럼