Written by 최태열
on November 29, 2020

CSS2

CSS 기본 속성

컬러

color : blue;
color : rgb(0,0,0);
color : #000FF;

배경

background-color : blue;
background-color : rgb(0,0,0);
background-color : #000FF;

background-image: url("");
background-repeat: no-repeat|repeat-x|repeat-y; 
— 배경이미지 한번만 or 가로 반복 or 세로 반복

background-position: left|right|center top|bottom|center;
background-attachment : fixed;
— 스크롤과 무관하게 이동X

background : blue url("") no-repeat left bottom fixed;
— 같은 방식으로 한번에 적용 가능

텍스트

direction : rtl; — 우측부터 반대로 글씀

letter-spacing : 10px;  — 자간
word-spacing : 10px;  — 단어 사이 간격

text-indent : 30px; — 들여쓰기
text-align : left|right|center; —정렬  
text-decoration : none|underline|line-though|overline;
— 없앰|밑줄|중간줄|윗줄

text-transform : uppercase|lowercase|capitalize;
— 대문자화|소문자화|첫글자만

text-shdow : 2px 1px black; —그림자
line-hegiht : 1.0; —줄간격

글꼴

font-family : "폰트명", 폰트명 , "폰트명" 
— 1번 폰트가 없으면 2번 폰트 이런식

font-style : italic; —기울임
font-variant : noraml | small-caps; —일반 | 소문자 → 작은 대문자
font-weight :  — 두꺼운 정도
font-size : % | em | px — 기본 크기에 대한 % | 기본크기에 대한 em | 스크린의 픽셀

font : 식으로 한줄로 정리 가능

링크

a : link — 방문 안 한 기본 상태
a : visited —방문 한 상태
a : hover — 마우스 커서 올라간 상태
a : active — 클릭 상태
a : focus — 다른 형태로 요소에 focus를 가지고 있는 상태

리스트

list-style-type : circle | square | upper-alpha 등등
list-style-image : url("") — 마커를 자신만의 이미지로
list-style-position : inside | outside  — 요소 위치

테이블

border : 2px solid orange; — 테두리
border-collapse : collapse;
— 테두리가 1줄이 됨 설정 안 할 시 요소 별 테두리 모두 표현 

border-spacing : 20px 30px; — th, td 간의 여백 설정

text-align : left | right | center; — 수평방향정렬
vertical-align : top | bottom; —수직방향정렬

caption-side  — 캡션 설정
empty-cells — 빈칸 배경색이나 테두리 표시할지 지정
table-layout — 레이아웃 알고리즘 설정

이미지 스프라이트

한 개의 이미지 잘라서 여러 이미지로 사용

.up, .down, .right, .left {
			background: url("/examples/images/img_image_sprites.png") no-repeat;
		}
		.up {
			width: 21px;
			height: 20px;
			background-position: 0 0;
		}
		.down {
			width: 21px;
			height: 20px;
			background-position: -21px 0;
		}
		.right {
			width: 22px;
			height: 20px;
			background-position: -42px 0;
		}
		.left {
			width: 22px;
			height: 20px;
			background-position: -65px 0;
		}

Discussion and feedback

← → Top