CSS 공작소
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
CSS 공작소는 CSS 를 예제 중심으로 다루는 사이트 입니다.
누구나 쉽고 빠르게 배우고 이해할 수 있도록 많은 예제를 준비하고 있습니다.
방문해 주셔서 정말로 감사드립니다. 그리고 편안히 둘러보세요! ^^
※ 현재 계속 등록중 입니다 ※
background
배경색, 배경그림과 관련된것을 설정합니다
background-attachment
배경이미지의 고정 방법을 설정합니다
background-clip
배경색, 배경그림의 위치 기준을 지정합니다
background-color
배경색을 지정합니다
background-image
배경 이미지를 설정합니다
background-origin
배경그림의 시작위치를 설정합니다
background-position
배경이미지의 위치를 설정합니다
background-repeat
배경이미지의 반복형태를 설정합니다
background-size
배경이미지의 크기를 설정합니다
border
테두리를 설정합니다
border-bottom
border 에서 아래쪽 설정만 특화된 것입니다
border-bottom-color
테두리 아래쪽의 색을 지정합니다
border-bottom-left-radius
테두리 왼쪽 아래의 둥굴기를 설정합니다
border-bottom-right-radius
테두리 오른쪽 아래의 둥굴기를 설정합니다
border-bottom-style
아래쪽 테두리의 종류를 지정합니다
border-bottom-width
아래쪽 테두리의 두께를 지정합니다
border-collapse
table 요소의 인접한 셀의 테두리 표시 방법을 지정합니다.
border-color
테두리 컬러만 설정합니다
border-image
이미지를 이용하여 테두리를 만듭니다
border-left
border 에서 왼쪽 설정만 특화된 것입니다
border-left-color
테두리 왼쪽의 색을 지정합니다
border-left-style
왼쪽 테두리의 종류를 지정합니다
border-left-width
왼쪽 테두리의 두께를 지정합니다
border-radius
모서리를 둥글게 만들어 줍니다
border-right
border 에서 오른쪽 설정만 특화된 것입니다
border-right-color
테두리 오른쪽의 색을 지정합니다
border-right-style
오른쪽 테두리의 종류를 지정합니다
border-right-width
오른쪽 테두리의 두께를 지정합니다.
border-spacing
table 요소의 셀 간격을 지정합니다
border-style
테두리선의 종류를 지정합니다
border-top
border 에서 위쪽 설정만 특화된 것입니다.
border-top-color
테두리 위쪽의 색을 지정합니다
border-top-left-radius
테두리 왼쪽 위의 둥굴기를 설정합니다
border-top-right-radius
테두리 오른쪽 위의 둥굴기를 설정합니다
border-top-style
위쪽 테두리의 종류를 지정합니다
border-top-width
아래쪽 테두리의 두께를 지정합니다
border-width
테두리의 두께를 지정합니다
bottom
아래 기준으로 요소의 위치를 지정합니다
box-shadow
그림자를 설정합니다 (박스모델에 한함)
box-sizing
다른 요소를 감안해서 지정한 사이즈대로 맞춰줍니다.
clear
clip
color
글자색을 지정합니다
content
counter-increment
cursor
마우스 커서를 지정합니다
direction
텍스트, 이미지등의 표시 방향을 지정합니다
display
float
요소를 띄워서 나열할 수 있도록 바꾸어 줍니다
font-family
폰트의 종류를 지정합니다
font-size
폰트크기를 설정합니다
font-style
폰트의 기울어짐을 지정합니다
font-variant
영문 소문자를 조금 작은 크기의 대문자로 바꿉니다
font-weight
폰트의 두께를 지정합니다.
height
높이를 지정합니다
left
letter-spacing
글자의 간격(자간)을 조절합니다.
line-height
문자열의 줄간격을 설정합니다
list-style
li 태그 각 항목의 "구분점" 표시 방법을 지정합니다
list-style-image
list-style 에서 "구분점" 을 이미지 지정만 합니다
list-style-position
list-style 에서 들여쓰기 설정만 합니다
list-style-type
list-style 에서 항목의 "구분점" 모양만 지정합니다
margin
바깥쪽 여백을 설정합니다
margin-bottom
아랫쪽 바깥 여백을 설정합니다
margin-left
왼쪽 바깥 여백을 설정합니다
margin-right
오른쪽 바깥 여백을 설정합니다
margin-top
위쪽 바깥 여백을 설정합니다
max-height
높이의 최대값을 제한합니다
max-width
너비의 최대값을 제한합니다
min-height
높이의 최소값을 제한합니다
min-width
너비의 최소값을 제한합니다
outline
지정된 영역 바깥쪽에 테두리를 만듭니다
overflow
내용이 지정된 영역을 넘어갔을때 처리방법
overflow-x
overflow 에서 가로 스크롤 설정만 합니다
overflow-y
overflow 에서 세로 스크롤 설정만 합니다
padding
안쪽 여백을 설정합니다
padding-bottom
안쪽의 아래 여백을 지정합니다
padding-left
안쪽의 왼쪽 여백을 설정합니다
padding-right
안쪽의 오른쪽 여백을 설정합니다
padding-top
안쪽의 위쪽 여백을 설정합니다
position
요소의 위치하는 방법을 지정합니다
right
text-align
문자열 이나 그림의 좌우 정렬을 설정합니다
text-decoration
글자에 라인을 만들어 줍니다
text-indent
text-shadow
글자에 그림자를 설정합니다
top
vertical-align
인라인 요소의 수직정렬 방법을 지정합니다
visibility
white-space
공백에 의한 글자의 줄바꿈 방법을 지정합니다
width
너비를 설정합니다
word-break
문자열의 줄바꿈을 설정합니다
word-spacing
word-wrap
z-index
참 고 자 료
컬러 영어 이름 정리표
CSS 에서의 컬러값
컬러테이블(Color Table)
팁과 예제
문자열 정리 3종 세트, 텍스트 깔끔하게 정리 & 정렬 하기
재미로 보는것들
주의! 약간 공포 : 귀신의 브라우저
달려라 멍멍이 !!