텍스트
| 구분 | 입력 방식 | 설명 | 비고 |
| 개별성규칙 | h3{color:red} .cascade{color:red;} .specifi{color:green;} |
<h3></h3> <h3 class="cascade">단계적 적용 </h3> <h3 class="specifi">단계적 적용</h3> |
단계적으로 속성이 적용 |
| 주석 | /*내용*/ | ||
| 폰트 단위 기본(16px) | p{font-size:12px;} p{font-size:1em; |
px단위-body기본크기를 무시하고 직접 지정한 단위로 표현 em단위-body기본크기를 기준으로 상속되어 표현 |
절대단위: pt, pc, cm, mm.. 절대단위: px, em.. |
| 글꼴 | p{font-family:"맑은 고딕", "malgungothic", sans-serif;} | 복수로 지정하고 콤마로 구분한다. 처음에 오는 폰트가 대표폰트이고 뒤에 오는 폰트는 대체 폰트 | |
| 색상 | p{color:red;} p{color:#ff00ff;} p{color:rgb(244,0.0);} p{color:rgb(0%, 0%, 100%);} |
색상명, 16진수 코드 10진수 백분율 |
|
| 들여쓰기 | p{text-indent:20px;} p{text-indent: -20px;} |
첫 줄 들여쓰기 표현이며 해당 크기만큼 들여쓰기 되어짐. 음수: 내어쓰기 효과, 양수: 들여쓰기 효과 |
|
| 글꼴 굵기 | p{font-weight:bold; } | 글꼴을 굵게, 보통굵기 표현 bold(700), normal(400) | |
| 자간 | p{letter-spacing: 20px;} | 문자 간격 조절. 음수 사용하면 글자가 겹쳐질 수도 있음 | |
| 단어 간격 | p{word-spacing: 20px; } | 단어와 단어 사이 간겨 조절 | |
| 줄 간격 | p{line-height:20px; } | 줄과 줄 사이 간격-행간 조절 | |
| 글꼴 스타일 | address{ font-style: normal;} | 글꼴 스타일: normal, italic(기울임)로 지정 | |
| 텍스트 라인 | a:link{ text-decoration:underline; } | 텍스트 꾸미기 - none, underline, overline, line-through, blink(ie 확인 안됨) | |
| 가로 정렬 | p{text-align:center; } | 문단 가로 정렬: left, center, right, justify | |
| 세로 정렬 | p{ vertical-align:top; } | 문단 세로 정렬: top, middle, bottom, 윗 첨자: super, 아래 첨자: sub |
|
| 영문자 표현 | p{font-variant:small-caps;} p{text-transform:none; } p{text-transform: uppercase; } p{text-transform: lowercase; } p{text-transform: capitalize; } |
소문자를 대문자로 변형->소문자 크기의 대문자로 표현 영문 대소문자를 있는 그대로 출력 none 영문 소문자를 대문자로 변환 출력 uppercase 영문 대문자를 소문자로 변환 출력 lowercase 첫글자 대문자로 변환 capitalize |
상속
| 구분 | 입력 방식 | 설명 | 비고 |
| 상속 | 부모요소에 적용한 스타일이 자식요소에 연결되어 적용되는 것을 상속이라 함. border, margin, padding, float, pasition 은 상속되지 않음 |
핵
| 구분 | 입력 방식 | 설명 | 비고 |
| 핵 | *html .html{ color: 3999999; } .under{ color: red; _color:blue; } .hash{ color: green; #color:yellow; } |
<!-[if IE6} > <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-> <!-[if IE7}> <link rel="stylesheet" type="text/css" href="ie7.css"/> <![endif]-> |
박스 / 테두리 /여백
| 구분 | 입력 방식 | 설명 | 비고 |
| 테두리 지정 | .box{ border-top:1px solid red; } | 박스 위로 선을 지정 {두께, 선의 종류, 선의 색상} | none, hidden, dotted, dashed solid, double, groove, ridge, inset, outset |
| .box{border-right:dotted 1px blue; } | 박스 오른쪽으로 선을 지정 | ||
| .box{border-bottom:2px dashed green; } | 박스 아래쪽 선을 지정 | ||
| .box{border-left:2px double yellow; } | 박스 왼쪽으로 선을 지정 | ||
| .box{border:1px solid red; } | 박스 상하좌우 선 지정 | ||
| border-radius | 둥근 모서리 지정 | border-top-left, border-top-right, border-bottom-right, border-bottom-left |
|
| 박스 크기 | .box{ width:500px; height:200px; } | 가로: width, 세로: height | |
| 박스에 음영 | box-shadow: navy 4px 4px 5px 10px | 색상, 가로방향, 세로방향, 음영 범위, 음영넓힐 거리 | |
| 여백 -padding |
p{ padding-top:10px; } | 박스 위로 여백 | top, right, left, bottom |
| p{ padding-right:10px; } | 박스 오른쪽 여백 | ||
| p{ padding: 20px 40px; } | 박스 상하 여백: 20, 좌우 여백: 40 | ||
| p{ padding: 20px 40px 60px 0 ; } | 박스 상 20, 우 40, 하60, 좌 0 | ||
| p{ padding: 50px; } | 박스의 상하좌우 여백: 50 | ||
| p{ padding: 20px 50px 30px ; } | 박스의 상 20, 좌우50, 하 30 | ||
| 여백 -margin |
p{ margin-top: 10px ; } | padding과 동일한 방법 적용 | top, right, left, bottom |
| 테이블 두께 | .separate{ border-collspse:separate; } .collapset{ border-collapse:collapse; } |
테이블 border 작업시 선의 표현 |
목록
| 구분 | 입력 방식 | 설명 | 비고 |
| 목록 | li{ list-style: none; } li { list-style-tyle:disc; } |
목록 마커 변경 | none, disc, circle, square, upper-alpha/lower-alpha upper-roman, lower-roman |
| li{ list-style-image:url(images/marker.gif);} | 이미지로 목록 마커 변경 | ||
| li{ list-style-position:inside; } li{ list-style-position:outside; |
목록 마커 위치 변경 |
배경
| 구분 | 입력 방식 | 설명 | 비고 |
| body{ background-color:red; } | 배경 색상 지정 - padding 속성을 지정하면 배경색상안쪽으로 여백이 생성 |
||
| body{ background-image: url(images/bg.gif); } | 배경 이미지 지정은 기본이 반복해서 전체에 출력, 배경 색상과 이미지를 지정하면 색상이 보이지 않음 | ||
| body{ background-repeat:no-repeat; } | 배경이미지 반복은 기본이 repeat이고, 가로: repeat-x, 세로: repeat-y, 반복안함: no-repeat |
||
| body{ background-position: 5px 6px; } | 배경이미지 위치 변경은 position이고, x y 방향순으로 지정 |
left, center, right, top, bottom, 50%, 0%, px 단위 모두 사용 |
|
| body{ background: url(images/bg.gif) no-repeat 20% bottom; } | 배경 작업 단축 | ||
| background-attachment | scroll / fixed | ||
| background-clip | 배경을 표시할 범위를 지정 | border-box, padding-box, content-box | |
| background-size | 배경 이미지의 기준 위치를 지정 | contain, cover, 실수값, %, auto |
-
| 구분 | 입력 방식 | 설명 | 비고 |
| 투명도 | opacity | 투명도는 0~1까지 지정 가능 | |
| 공백 문자 처리 | .nowrap{ shite-space:nowrap; } .pre{ white-space:pre; } |
-nowrap: 줄바꿈 안하고, 텍스트 스크롤 바가 생성되면서 출력 -pre: 하나 이상의 연속적인 공백을 그대로 출력 |
|
| 박스의 표시 & 요소 변경 | .box{ display:none ; } span{ white-space:pre; } li { display:inline; } |
display를 사용하여 표현하지 않음: none 블록요소를 인라인 요소로, 인라인 요소를 블록 요소로 표현 |
화면에 영역까지 없어지게 처리 |
| 우선 순위 | p{ color:red !important; color:blue; } |
float
| 구분 | 입력 방식 | 설명 | 비고 |
| 부유(float) | p{ float: left; } | 콘텐츠 배치 float를 이용하면 콘텐츠를 이동시킬 수 있다. 일반적으로 블록박스의 흐름을 벗어나 배치되지 때문에 다른 박스의 배치에 영향을 준다 |
left, right, none 사용 |
| float | .p{ celar:both; } | float를 해제하는 방법 | float:none |
박스
| 구분 | 입력 방식 | 설명 | 비고 |
| 박스의 표시 | p{ visibility:hidden; } | 요소의 박스를 감추고자 할때, -> 화면에 감춰진 박스의 영역이 확보 | |
| 박스의 시각 효과 | .box{ overflow:hidden; } | 박스의 크기만큼 보이고 나머지 숨김: hidden 박스에 스크롤 생성: scroll, 박스에 자동 스크롤바 생성: auto, 박스 크기를 무시하고 모두 보여줌: visible |
|
| overflow-x | 내용이 넘치는 경우 가로 방향 표시 | ||
| overflow-y | 내용이 넘치는 경우 세로 방향 표시 | ||
| 박스의 배치 -상대 위치 |
p{ position: relative; } | 박스의 위치지정, -상대위치: 박스가 배치될 경우, 다른 블록 요소에 영향을 주지 않고 배치(자신 중심) |
속성: top, right, bottom, left |
| 절대 위치 | p{ position: absolute; } | -절대 위치: 박스가 배치될 경우 문서의 일반적 흐름을 벗어나 배치 다른 븐록 요소의 배치에 영향을 주고 배치 (자신을 포함하고 있는 컨텐츠 기준) | 속성: top, right, bottom, left |
| 박스의 순서 | .box{ z-index: 1; } | 박스의 겹치는 순서 |
-
| 구분 | 입력 방식 | 설명 | 비고 |
| 아웃라인간격 | outline-offset | 요소의 윤곽선과 테두리 사이의 간격을 지정할 수 있다 | |
| 아웃라인 | outline | outline: #00FF00 dotted thick; | |
| 그라데이션 | linear-gradient | linear-gradient(red, yellow, blue) | |
| radial-gradient | radial-gradient(red, green, blue) |
-
| 구분 | 입력 방식 | 설명 | 비고 |
| 애니메이션 | animation-name | 애미메이션 이름 지정 | @keyframes 규칙으로 애니메이션 지정 |
| animation-duration | 애니메이션의 기간 | ||
| animation-delay | 애니메이션 지연 | ||
| animation-iteration-count | 애니메이션 반복 카운트 | ||
| animation-direction | 애니메이션 방향 | normal, reverse, alternate, alternate-reverse | |
| animation-play-state | 애미메이션 정지 실행 | paused, running | |
| 단 설정 | column-count | 나누어질 단의 개수 | column-count: 3; |
| column-gap | 단 사이 간격 | column-gap: 40px; | |
| column-rule | 단 사이의 선 | column-rule: 4px outset #ff00ff | |
| column-span | 단 병합 | column-span: all; | |
| column-width | 단의 크기 | column-width: 100px; | |
| 글꼴 | @font-face | ||
| 효과 | filter: grayscale | 회색으로 변경 | filter: grayscale(100%); |
| filter: opacity | 투명도 | filter: opacity(30%); | |
| filter: blur | 블러 | filter: blur(5px); | |
| filter: drop-shadow | 그림자 | filter: drop-shadow(8px 8px 10px red) |
레이아웃
| 구분 | 입력 방식 | 설명 | 비고 |
| 레이아웃 | flex | 동일한 크기로 지정 | flex:1 |
| flex-basis | 크기를 지정 | flex-basis: 80px; | |
| flex-direction | 순서 | row-reverse, row, column, column-reverse | |
| flex-flow | 레이아웃 랩 | flex-flow:row-reverse wrap; flex-flow:row nowrap; flex-flow:column nowrap; flex-flow:column wrap; |
|
| flex-grow | 다른 박스보다 확대 | #main div:nth-of-type(1) {flex-grow: 1;} | |
| flex-shrink | 다른 박스보다 축소 | #main div:nth-of-type(2) {flex-shrink: 3;} | |
| flex-wrap | 박스 포함 | flex-wrap:nowrap; wrap, wrap-revers |
|
| 최대높이넓이 | max-height / max-width | ||
| 최소높이넓이 | min-height / min-width |
-
| 구분 | 입력 방식 | 설명 | 비고 |
| 미디어쿼리 | @media | @media screen and (min-width: 480px) { 실행문 } | |
| 변환 | transform:rotate | 박스 회전 | rotate(angle) |
| transform:scale | 박스 크기 | scale(x,y) | |
| transform:rotateZ | 3d 회전 | rotateZ(angle) | |
| transform:skewX | 기울임 | skewX(angle) | |
| 크기 변경 | transition | transition: width 2s; | |
| transition-duration | 지속 시간 | transition-duration: 2s; | |
| transition-delay | 너비 변경 시간 | transition-delay: 2s; | |
| transition-property | 너비/높이 | transition-property: width, height; | |
| 줄바꿈 | white-space; | 줄바꿈 하지 않음 | white-space; nowrap; |
| 텍스트 오버 플로우 | text-overflow | text-overflow: clip; text-overflow: ellipsis; |
|
| 텍스트 그림자 | text-shadow | 텍스트 그림자 | text-shadow: 2px 2px #ff0000; |
| 포인터 | cursor:pointer | 커서 포인터 변경 | |
| 접두어 | -webkit- | chrome, safari, opera | |
| -o- | opera | ||
| -moz- | firefox | ||
| -ms- | ie |