2. CSS의 속성 요약 -바닥부터 시작하는 CSS-

2. CSS 속성 요약     -바닥부터 시작하는 CSS-        

 

 

1. Box Model

 

width, height

•Block 요소의 가로, 세로 사이즈를 지정합니다.

width : 150px ;

width : 50% ;

height : 300px ;

height : 100% ;

 

margin, padding

•엘리먼트의 바깥 여백(margin)과 안쪽 여백(padding)을 지정합니다.

1) margin

•margin-top

•margin-right

•margin-bottom

•margin-left

 

2) padding

•padding-top

•padding-right

•padding-bottom

•padding-left

 

예)

margin-top:10px;

padding-right:40px;

 

•축약형은 상, 우, 하, 좌 순서로 시계방향으로 인식됩니다.

padding : 30px ; /* 상하좌우값=30px */

margin : 10px 20px ;

               상하   우좌

margin :20px 30px 40px;

                상    우좌      하

 

margin :20px 30px 40px 50px;

                상     우      하       좌

 

border

외곽선.

•엘리먼트 padding의 바깥쪽에 위치합니다.

1) border : width style color ;

•border-width

•border-style

•border-color

 

•각방향의 스타일을 따로 지정할 수 있습니다.

2) border-방향

•border-방향-width

•border-방향-style

•border-방향-color

 

3) border-style 속성

•solid (실선)

•dashed (끊어진 선)

•dotted (점선)

•double (이중선)

•hidden (감춤)

•groove (움푹 들어간 입체선)

•ridge (튀어나온 입체선)

•inset (내용이 잠긴 느낌의 입체선)

•outset (내용이 튀어나온 느낌의 입체선)

•none (선 없음)

 

예)

border : 1px solid red ;

border : 1px dotted #0000FF ;

 

display 

•inline요소를 block요소로, block요소를 inline요소로 변경할 수 있고 화면에 표시되지 않게 할 수도 있습니다.

 

display :none ;

display : block ;

display : inline ;

display : inline-block;

•inline-block이란 inline요소처럼 배치되면서 block요소의 속성(width, height, margin, padding)들을 사용할 수 있게 만듭니다.

display 속성 자세히 배우기

overflow

•block요소의 자식 컨텐츠가 부모 요소의 사이즈를 변화시킬 때 숨김 또는 스크롤바표시 여부를 지정합니다.

•부모의 사이즈가 지정되어 있을 경우에 사용이 가능합니다.

 

overflow : visible ;(기본 값)

overflow : hidden ;

overflow : scroll ;

overflow : auto ;

•overflow : scroll 가로, 세로에 대한 속성을 따로 지정 할 수 있습니다.

•overflow-x

•overflow-y

 

float

•엘리먼트를 block형태로 부유시킬 때 사용합니다.

•block형태로 특정 방향(left, right)으로 정렬 합니다.

 

float : inherit ;

float : left ;

float : right ;

float : none ;(기본 값)

 

Clear

•float을 해제할 때 사용합니다.

•이전 엘리먼트의 float값을 상속받아 같은 방향으로 정렬되는 현상을 막기 위해 사용합니다.

 

clear : none ;(기본값)

clear : inherit ;(상속받음)

clear : left ; (왼쪽으로 float된 엘리먼트의 하단에 위치)

clear : right ; (오른쪽으로 float된 엘리먼트의 하단에 위치)

clear : both ; (모든 float의 하단에 위치–개념상 float상속을 받지 않음)

 

position

•엘리먼트의 상대적인 위치에 대한 속성

•float과는 다르게 왼쪽, 오른쪽 정렬하는 형태가 아닌 ,위치하는 곳에 대한 값(오프셋)을 지정합니다.

 

position : static ; (기본, offset을 가지지 않음)

position : relative ; (상대적, 원래 위치를 기준)

position : absolute ;(절대적, 부모 위치를 기준)

position : fixed ;(화면에서 고정, ie6 지원불가)

top : 10px ;

left : 20px ;

bottom : 10px

right : 20px ;

 

z-index

•엘리먼트 위, 아래의 순서(깊이라고 생각하세요)를 설정합니다.

•수치가 작을수록 아래쪽에 있다는 것을 의미합니다.

z-index :3 ;

z-index : 10000 ;

z-index : 400 ;

 

•box안에 엘리먼트의 z-index가 높아도 상위(부모)엘리먼트끼리의 수치가 낮으면 아래쪽에 위치합니다.

visibility

•해당 영역을 보이게(visible) 하거나 또는 감출 때(hidden) 사용하는 속성입니다. hidden값을 써도 그 자리는 보존됩니다.

 

 

2. 배경의 속성

 

background

•엘리먼트영역에 색상이나 이미지를 채웁니다.

 

1) background-color : #101010;

•색상이름/색상코드

•transparent(투명도)

 

2) background-image : url(http://이미지 주소); /* 이미지의 주소를 지정 */

 

3) background-repeat : no-repeat;

•repeat, no-repeat, repeat-x, repeat-y /*반복 조건들 */

 

4) background-position : 0px 10px ;

•초기 설정은 왼쪽 위 모서리로 지정되어 있습니다.

•left(right), top(bottom), center

 

5) background-attachment : scroll ; /* 배경 이미지 스크롤 여부 */

•scroll, fixed

 

예)

background : #000000 url(google.jpg) no-repeat 10px 10px ;

background : red url(naver.gif)repeat-x left top;

 

 

3. 텍스트 속성

 

color

•글자색 속성

color : red;

color : rgb(255,0,0);

color : #FF0000;

color :#F00; (축약)

 

text-indent

•글자 들여쓰기 속성. 기본값은 0.

text-indent : 10px ;

text-indent : -10px ;

 

text-decoration

•글자 꾸미기.

text-decoration : none;

text-decoration : underline;

text-decoration : overline;

text-decoration : line-through;

text-decoration : blink;

 

text-align

•글자 정렬.

text-align : left;

text-align : right;

text-align : center;

text-align : justify;

 

direction

텍스트의 방향을 지정합니다.

 

line-height

줄 간격을 지정합니다.

 

letter-spacing

글자 간격을 조절합니다.

기본값은 0, (-)값을 사용하면 간격이 좁아집니다.

 

text-transform

영문 글자의 대소문자를 지정합니다.

none(변화 없음), capitalize(첫 자만 대문자), uppercase(모두 대문자), lowercase(모두 소문자)

 

word-spacing

단어의 간격을 조절합니다.

 

 

4. 폰트 속성

•글자와 관련된 속성

1) font-style : normal / italic /oblique;

2) font-weight : normal / bold / bolder / lighter;

3) font-size : 12px ;

4) line-height : 12px; (줄 간격)

5) font-family : Times New Roman; (글꼴 서체)

 

span{font : italic bold 12px/12px gulim; } /* 축약형 */

 

 

5. 리스트 속성

•ol, ul에 관련된 속성.

list-style

•ol 속성(순서 있는 경우)

decimal , lower-roman, upper-roman, lower-alpha, upper-alpha

•ul 속성(순서 없는 경우)

disc (검은동그라미), circle (빈동그라미), square (네모), none (없음)

 

 

6. 기타 속성

•cursor 속성

pointer (손가락모양)