레이어 속성 정리 - div, span [정리중]

style 속성 정리

width :
가로 크기 결정 (단위로는 px, pt, cm, % 사용하며, 기본적으로 px 적용)

height :
세로 크기 결정 (단위로는 px, pt, cm, % 사용하며, 기본적으로 px 적용)

background :
배경 색상 또는 이미지 주소 사용 가능

background-color : red;
배경 색상 지정 (red 지정)

background-image :
배경 이미지 지정 (사용되는 이미지는 배경에 맞추어서 확대 되거나 줄어 들지 않는다.)

background-repeat :
배경으로 이미지를 사용할 경우 사용 되는 이미지의 반복 방향 및 반복 여부 결정

background-repeat : no-repeat;
배경 이미지 반복 없음

background-repeat : repeat;
배경 이미지 반복

background-repeat: repeat-x;
배경 이미지 X 방향으로 반복(가로)

background-repeat: repeat-y; // 배경 이미지 Y 방향으로 반복(세로)

background-repeat : no

border : 테두리 두께 및 형태 (8가지) 지정 가능

(형태의 종류 : dotted, dashed, solid, double, groove, ridge, inset, outset)

padding : 테두리(경계)에서 내용까지의 여백 결정, "상우좌하"의 여백 크기 결정

margin : 위치 결정 속성 (padding의 경우 테두리 기준으로 안쪽의 여백을 결정하지만, margin 의 바깥 쪽 여백 결정)

position : 레이어의 위치 결정(static:기본값, absolute:절대위치, relative:상대위치, fixed:고정위치, inherit:상위(부모) 요소로부터 상속 받음

float : 레이어의 위치 정렬 (left:왼쪽 정렬, right:오른쪽 정렬)

clear : float 요소의 위치 정렬 속성을 해제

overflow : 영역(div) 내 스크롤 생성 여부 결정, 사용하지 않을시 내용물의 크게이 따라 영역의 크기가 늘어남

(요소 종류 : auto(자동-내용물이 크면 생성, 아니면 생성 안함), hidden(지정된 크기 이외의 부분은 보여지지 않음), scroll(내용물과 상관 없이 생성)

font : 글자 스타일 - 글꼴, 크기, 줄간격

color : 글자의 색상을 결정

display : 영역의 숨김, 보여짐 결정 (none:숨김, block:보여짐-다른줄, inline:보여짐-같은줄)

visibility : 화면에 레이어를 보이거나 감춤 (display 와의 차이점이.???)

clip : 레이어 안의 일정 부분만 화면에 보여줌

z-index : 레이어의 보여지는 순서 지정 (값이 높을 수록 위에 위치)

top : 화면의 위를 기준으로 아래로 떨어진 위치

left : 화면의 왼쪽을 기준으로 오른쪽으로 떨어진 위치

bottom : 화면의 아래를 기준으로 위로 떨어진 위치

right : 화면의 오른쪽을 기준으로 왼쪽으로 떨어진 위치

filter : 필터 효과 적용

사용예

<style type="text/css">

#header

{

width : 800; // 가로 800 넓이 지정

height : 300; // 세로 300 넓이 지정

background : red; // 배경색상 red 지정

background-image : url(이미지 주소); // 배경이미지 url 로 지정

background : url; // 배경이미지 url 로 지정

background-repeat : no-repeat; // 배경 이미지 반복 없음

background-repeat : repeat; // 배경 이미지 반복

background-repeat : repeat-x; // 배경 이미지 X 방향으로 반복(가로)

background-repeat : repeat-y; // 배경 이미지 Y 방향으로 반복(세로)

border : 1px solid red; // 테두리 두께 1px 의 붉은색 solid 선

padding : 10; // 외곽 경계에서 상, 우, 좌, 하 10px 의 여백 생성

padding : 10 20; // 외곽 경계에서 상하 10px, 우좌 20px 여백 생성

padding : 10 20 30; // 외곽 경계에서 상 10px, 우좌 20px, 하 30px 여백 생성

padding : 10 20 30 40; // 외곽 경계에서 상 10px, 우 20px, 하 30px, 좌 40px 여백 생성

margin : -10 20 30 40; // 외곽 경계에서 상 -10px, 우 20px, 하 30px, 좌 40px 방향으로 위치 이동

float : left; // 왼쪽 정렬

clear : both; // float 해제

overflow : auto; // 스크롤을 내용물에 따라서 자동으로 생성

font : bold 10pt/15pt 고딕체; //굵은 글씨, 크기 10pt, 줄간격 15pt, 고딕체로..

color : red; // 붉은색 글자

display : none; // 해당 영역 숨김

color : blue;

border : 1px solid red;

}