[CSS] 스타일 기초
1. 스타일시트 삽입 방법
내부 스타일시트 삽입
<head>
<style>
</style>
</head>
외부 스타일시트 불러오기
<head>
<link href="html.css" type="text/css" rel="stylesheet">
</head>
인라인 스타일시트 삽입
<p style=""> </p>
2. 셀렉터 선택 방법
태그 셀렉터
p { font-size:10pt; color:red}
<p> </p>
id 셀렉터
#red { font-size:10pt; color:red}
<p id="red"> </p>
class 셀렉터
.red { font-size:10pt; color:red}
<p class="red"> </p>
가상 클래스 셀렉터
a:link { color: blue }
a:visited { color: green }
h3:hover { font-size: 16pt}
input 태그 셀렉터
input[type=password] { background: yellow }
3. 폰트, 문자 관련 CSS
폰트
p { font-family: "Times New Roman" "바탕" "serif" }
#pt10 { font-size : 10pt | small, large 등등 }
#bold { font-weight : bold | nomal }
#italic { font-style : nomal | italic | oblique }
font-shadow : x, y blur/size,
#small-caps { font-variant: normal | small-caps } /* 작은 크기의 대문자 */
텍스트
h3 { font-family: "맑은고딕" "돋움" san-serif; color: red; text-shadow: 3px 3px 4px grey }
#first { text-align: left; letter-spacing: 2pt; word-spacing: 8pt }
#second { text-align: left; text-indent: 2em; letter-spacing: -2pt word-spacing: 2pt}
#under { text-decoration: underline}
#cap { text-tansform: capitalize }
text-align: left, right, center, justify (문장의 정렬)
letter-spacing (문자 사이 간격)
word-spacing (단어 사이 간격)
line-height (줄 간격)
text-indent (들여쓰기, 내어쓰기)
text-decoration: none, underline, overline, line-through, blink (밑줄 등 장식효과)
text-transform: capitalize, uppercase, lowercase (영어 대소문자 변경)
text-shadow: h-offset v-offset blur/size color (문자에 그림자 추가)
4. 색상, 배경 관련 CSS
색상
#RRGGBB : Red+Green+ Blue 마다 16진수로 표현한 조합
배경
background-color
background-image: url(flower.jpg)
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-attachment: scroll | fixed
background-position: (left | center | right) ( top | center | bottom)
background: color, image, repeat, attachment, position
5. 목록 관련 CSS
ul
list-style-type : disc | circle | 사각형 square
ol
list-style-type : decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
글머리 기호에 이미지 사용
list-style-image: url("이미지 파일 주소")
글머리 기호 위치 지정
list-style-position: outside | inside
6. 표 관련 CSS
width
table-layout : auto | fixed
border-collapse : collapse | separate (테두리 분리)
border-spacing (테두리 굵기)
empty-cells : show | hide (빈 셀의 테두리)
table-image
caption-side: top | bottom (캡션의 위치)