font-family |
글자채 설정 verdana sans-serif 폰트 집합 1. Verdana : 대부분의 커퓨터 2. Geneva : 매킨토시 3. Arial : 윈도우 / 매킨토시 4. sans-serif 예) 우선순위는 왼쪽부터 오른쪽이다. body { font-family : Verdana,Geneva,Arial,sans-serif } 주의!! 폰트 이름에 공백을 갖고 있다면 큰 따옴표로 그것을 둘러싸야 한다. body { font-family : "Times New Roman" } |
font-size |
글자 크기 설정 14px 픽셀 : px 비율 : % ( 부모 엘리먼트의 상대적인 크기 ) 배율 : em 예) 1.2em 는 1.2배를 말함. 혹은 xx-small / s-small / small / medium / large / x-large /xx-large 폰트 사이즈 정의 한 방법 1. body 폰트 크기를 명시한다. 2. 다른 엘리먼트는 상대적으로 크기를 명시한다. |
color |
글자 색 설정 red silver |
font-weight |
글자 굵기 bold |
text-decoration |
글자 스타일 설정 underline /overline / none / line-through / blink |
font-style |
글자 스타일 설정 italic / oblique |
background-color |
배경색 설정 rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF 아래 컬러 챠트를 확인 http://en.wikipedia.org/wiki/Web_color |
line-height |
각 줄 간격의 공간 크기를 설정 ex) line-height : 1.6em 폰트 크기의 1.6배 line-height : 200% 폰트 크기의 200% ( 2배 ) line-height : 20px 20픽셀 |
border-color border-right-color border-bottom-color border-left-color |
테두리 색 지정 |
| border-width border-top-width border-right-width border-bottom-width border-left-width |
테두리 넓이 지정 브라우져 마다 thin / medium / thick의 값이 다르므로 모든 브라우져에 맞춘 표준을 설정한다면 pixel을 사용한다. |
| border-style border-top-style border-right-style border-bottom-style border-left-style | 테두리 스타일 지정 ( 선/ 점선 등) 직선 : solid 점선 : dotted 두줄 : double 긴 점선 : dashed 홈이 있는 것처럼 : groove 홈 안으로 밀기 : inset 홈 밖으로 당기기 : outset 홈을 돌출 : ridge |
| padding | 전체 ( 양옆 /위아래) 패딩 사이즈 지정 |
padding-left padding-top padding-bottom | 각각 개별로 패딩 사이즈 지정 |
margin | 전체 ( 양옆/위아래) 마진 사이즈 지정 |
margin-left margin-top margin-bottom | 각각 개별로 마진 사이즈 지정 |
background-image | 배경 이미지 지정 |
| background-repeat | 배경 이미지가 전체 박스 크기 보다 작을 경우 반복해서 표시 할지를 지정 ( no-repeat / repeat-x / repeat-y / repeat / inherit ) inherit는 부모 설정값을 따라 가며 디폴트 값은 repeat 이다. |
| background-position | 배경 이미지 표시 시작 위치를 지정 ( top left / top right / buttom left / center 등 ) |
| width | 컨텐츠의 너비 |
text-align | 텍스트 정렬방법 ( left / right /none / center / inherit ) |
| |
참고 : 외곽 속성 순서 ( top -> right -> bottom -> left )
CSS 태그의 적용 벙위 설정 법
태그 단위 |
태그{} |
성질이 다른 태그와 같이 |
태그1,태그2{} |
특정 클래스 태그만 선별 |
태그.Class{} |
같은 클래스를 가진 태그 |
.Class{} |
특정 아이디 태그만 선별 | #ID{} |
특정 태그의 특정 아이디 태그만 선별 | 태그#ID{} |
특정 태그의 자손 태그 | 태그 태그{} * 태그와 태그 사이에 공백을 준다. |
특정 아이디의 자손 태그 | #ID 태그{} |
아래와 같은 CSS파일이 있다고 가정하고 해당 파일을 HTML(XHTML) 파일에서 로드 시켜보도록 하자.
[style_.css sample file]
body
{
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
p.raspberry {
color: blue;
}
p.blueberry {
color: purple;
}
[HTML / XHTML 파일]
아래와 같이 링크를 추가한다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href=" style_ .css"/>
</head>
'나는 엔지니어 > HTML' 카테고리의 다른 글
| 엘리먼트들의 구조 (0) | 2012.07.01 |
|---|---|
| 스타일시트 불러오기 link 키워드 (0) | 2012.07.01 |
| 내가 작성한 HTML이 표준을 만족하는가????? ㅡㅡa (0) | 2012.06.27 |
| img 태그에 관해서 (0) | 2012.06.27 |
| 새 윈도우 열기... (0) | 2012.06.27 |
