선택자{ /* CSS의 기본 형식*/ 속성1 : 값; 속성2 : 값; }
종류 | 설명 | 형식 |
---|---|---|
전체 선택자 | 문서의 모든 요소에 스타일을 적용 | *{margin:0} |
id 선택자 | 특정 부분만 문서 안에 여러번 적용. '#'을 붙여서 사용 | #id{width:50px;} |
클래스 선택자 | 특정 부분만 선택해서 문서 안에 여러번 적용 '.'을 붙여서 사용 | .class{background-color:yellow;} |
타입 선택자 | 특정 태그를 사용한 모든 요소에서 스타일을 적용 | p{font-style:italic;} |
종류 | 설명 |
---|---|
font-family | 글꼴 종류를 지정 |
font-size | 글꼴 크기를 지정 |
font-weight | 글자의 굵기 지정 |
종류 | 설명 |
---|---|
color | 글자색 지정 |
text-decoration | 텍스트에 밑줄 |
text-align | 텍스트 정렬 방법을 지정(left,right,center |
종류 | 설명 |
---|---|
margin | div 겉에 있는 영역의 크기, div와 div 사이의 겉 영역의 크기 |
border | div 영역을 표현하는 선의 두께 |
padding | div속의 컨텐츠가 div 경계에서 얼마나 떨어져서 노출되는지 설정 |
종류 | 설명 |
---|---|
width | 박스 모델의 너비 지정 |
height | 박스 모델의 높이 지정 |
box-sizing | 박스 모델의 크기 계산 |
box-shadow | 박스 모델에 그림자 |
종류 | 설명 |
---|---|
border-위치-style | top, bottom, left, right 4개 방향의 테두리 스타일 지정 |
border-위치-width | top, bottom, left, right 4개 방향 테두리 두께를 지정 |
border-위치-color | top, bottom, left, right 중에서 선택해서 특정 위치의 테두리 색상 지정 |
종류 | 설명 |
---|---|
margin-위치 | top, bottom, left, right 중에서 선택해서 특정 위치의 마진 지정 |
padding-위치 | top, bottom, left, right 중에서 선택해서 특정 위치의 패딩 지정 |
종류 | 설명 |
---|---|
background-color:색상; | 배경색 지정 |
backgroiund-image:url('경로'); | 배경 이미지 지정 |