CSS Reference

CSS

CSS(Cascading Style Sheets)는 HTML을 꾸며주는 디자인 언어 스타일시트입니다.

종류 설명
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background 배경이미지의 속성을 설정합니다.
background-attachment 배경이미지를 스크롤 했을 때 고정 여부를 설정합니다.
background-blend-mode 배경을 혼합했을 때의 상태를 설정합니다.
background-clip 배경이미지와 경계선 고정 여부를 설정합니다.
background-color 배경이미지 색상을 설정합니다.
background-image 배경이미지를 설정합니다.
background-origin 배경이미지 방향 설정합니다.
background-position 배경이미지 위치 설정합니다.
background-repeat 배경이미지 반복 여부를 설정합니다.
background-size 배경이미지 사이즈 설정합니다.
border 테두리 속성을 설정합니다.
border-bottom 테두리 아래쪽 속성을 설정합니다.
border-bottom-color 테두리 아래쪽 컬러 속성을 설정합니다.
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style 테두리 아래쪽 스타일 속성을 설정합니다.
border-bottom-width 테두리 아래쪽 두께 속성을 설정합니다.
border-collapse
border-color 테두리 컬러 속성을 설정합니다.
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left 테두리 왼쪽 속성을 설정합니다.
border-left-color 테두리 왼쪽 컬러 속성을 설정합니다.
border-left-style 테두리 왼쪽 스타일 속성을 설정합니다.
border-left-width 테두리 왼쪽 두께 속성을 설정합니다.
border-radius
border-right 테두리 오른쪽 속성을 설정합니다.
border-right-color 테두리 오른쪽 컬러 속성을 설정합니다.
border-right-style 테두리 오른쪽 스타일 속성을 설정합니다.
border-right-width 테두리 오른쪽 두께 속성을 설정합니다.
border-spacing
border-style 테두리 스타일 속성을 설정합니다.
border-top 테두리 위쪽 속성을 설정합니다.
border-top-color 테두리 위쪽 컬러 속성을 설정합니다.
border-top-left-radius
border-top-right-radius
border-top-style 테두리 위쪽 스타일 속성을 설정합니다.
border-top-width 테두리 위쪽 두께 속성을 설정합니다.
border-width 테두리 두께 속성을 설정합니다.
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
clear float 요소의 성질을 차단합니다.
clip
color 글씨 색을 설정합니다.
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float 블록 요소의 정렬 상태를 설정합니다.
font
font-family
font-size 폰트 사이즈 속성을 설정합니다.
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-area
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
isolation
justify-content
left
letter-spacing
line-height 문장과 문장 사이의 간격을 설정합니다.
list-style
list-style-image
list-style-position
list-style-type
margin 요소의 바깥쪽 여백을 설정합니다.
margin-bottom 요소의 아래 바깥쪽 여백을 설정합니다.
margin-left 요소의 왼쪽 바깥쪽 여백을 설정합니다.
margin-right 요소의 오른쪽 바깥쪽 여백을 설정합니다.
margin-top 요소의 위 바깥쪽 여백을 설정합니다.
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align 텍스트 정렬 방식을 설정합니다.
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width 요소의 가로 값을 설정합니다.
word-break
word-spacing
word-wrap
z-index
@charset
:active
:focus
:hover

CSS 선택자

선택자를 통하여 요소를 선택하고 속성을 줄 수 있습니다.

  • id 선택자
    • 하나의 태그만 식별하기 위한 선택자입니다.
    • 하나의 태그에 하나만 사용할 수 있습니다.
    • "#"으로 표시합니다.
  • class 선택자
    • 여러개의 태그를 식별하기 위한 선택자입니다.
    • 하나의 태그에 여러개를 사용할 수 있습니다.
    • "."으로 표시합니다.

속성 선택자

상태 선택자

링크 선택자


CSS 단위


CSS 색상


CSS 선언 방법


상대주소와 절대주소


float으로 인한 영역깨짐(height:0) 방지법

float을 사용하면 height 값을 0으로 인식합니다.

  1. 깨지는 영역에 똑같이 float을 사용합니다.(X) 모든 영역에 float을 사용하게 되고 정확히 깨지는 영역을 알 수가 없습니다.
  2. float의 성질을 차단하는 clear:both를 사용합니다. (X) 깨지는 영역을 정확히 확인 할 수 없습니다.
  3. float을 사용한 부모박스한테 overflow:hidden을 사용합니다.(0)

컨텐츠 영역을 보이지 않게 하는 방법

  1. display:none; -- display:block; (영역 사라짐)
  2. visibility:hidden; -- visibility:visible; (영역 유지)
  3. opacity:0; -- opacity:1; (영역 유지)
  4. width:0; height: 0; overflow:hidden; (IR)

이미지 표현 방법

웹 문서에 이미지를 표현할 수 있는 방법은 다양합니다.

  • <img> 태그로 표현하는 방법 : 이미지에 의미가 있는 경우
    아이콘1 아이콘2 아이콘3 아이콘4
  • background 속성으로 표현하는 방법 : 이미지가 의미가 없고 장식용인 경우
  • 이미지를 60px로 설정한 경우 : 피시 화면
    아이콘1 아이콘2 아이콘3 아이콘4
  • 이미지를 120px로 설정한 경우 : 모바일 화면
    아이콘1 아이콘2 아이콘3 아이콘4

이미지 스프라이트

아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 사이즈를 최소화하고 효율성을 높일 수 있습니다.

  • 여러번의 서버 요청을 한 번으로 줄일 수 있습니다.
  • 이미지 수정이나 관리가 간편합니다.
  • 웹 접근성을 준수하기 위해서 IR 효과를 설정해야 합니다.
  • 이미지 스프라이트 기법을 통해서 넣는 방법(60px)
  • 이미지 스프라이트 기법을 통해서 넣는 방법(120px)

IR 효과

IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수 있습니다.

.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;}
.ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}
  • Phark Method : 의미 있는 이미지의 대체 텍스트를 제공하는 경우 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법
    아이콘1 아이콘2 아이콘3 아이콘4
  • WA IR : 의미 있는 이미지의 대체 텍스트로 이미지를 off시에도 대체 텍스트를 보여주고자 할 때 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리
    아이콘1 아이콘2 아이콘3 아이콘4
  • Screen Out : 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때
    아이콘1 아이콘2 아이콘3 아이콘4

이미지 최적화

디바이스에 따라서 이미지를 다르게 나오게 하는 기법입니다.

만약에 당신이 일반 피시로 보고 있다면 아이콘에 1이 표시되고, 만약 당신이 모바일이나 레티나 모니터로 보고 있다면 2가 표시됩니다.

.icon_skin {width: 60px; height: 60px; display: block; float: left; background: url(img/icon03_test.png) no-repeat;}   
.icon_skin.icon1 {background-position: -290px 0;}
.icon_skin.icon2 {background-position: -290px -60px;}
.icon_skin.icon3 {background-position: -290px -120px;}
.icon_skin.icon4 {background-position: -290px -180px;}
    
@media
    only screen and (max-width:820px) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (max-width:820px) and (min-device-pixel-ratio: 1.5),
    only screen and (max-width:820px) and (min-resolution: 1.5dppx) {
        .icon_skin {width: 60px; height: 60px; display: block; background: url(img/icon03_test.png) no-repeat; background-size: 175px;} 
        .icon_skin.icon1 {background-position: 0px 0;}
        .icon_skin.icon2 {background-position: 0px -60px;}
        .icon_skin.icon3 {background-position: 0px -120px;}
        .icon_skin.icon4 {background-position: 0px -180px;}
    }
				

미디어 쿼리

미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다.

@media only all and (조건문) {실행문}

  • @media : 미디어 쿼리가 시작됨을 표시합니다.
  • only : 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)
  • all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다.(생략가능)
    • all : 모든 미디어 유형에 사용할 CSS를 정의합니다.
    • screen : 컴퓨터 화면에서 사용할 CSS를 정의합니다.
    • print : 인쇄 장치에서 사용할 CSS를 정의합니다.
    • handheld : 휴대용 장비에서 사용할 CSS를 정의합니다.
    • tv : 텔레비젼에서 사용할 CSS를 정의합니다.
    • aural : 음성 출력기에서 사용할 CSS를 정의합니다.
    • braille : 점자 출력기에서 사용할 CSS를 정의합니다.
    • projection : 프로젝터에서 사용할 CSS를 정의합니다.
    • tty : 고정폭을 가지는 텔레타이프에서 사용할 CSS를 정의합니다.
  • and : 앞과 뒤의 조건을 나타냅니다.(생략가능)
  • (조건문) : 해당 조건을 설정합니다.
  • (실행문) : 조건에 따른 실행을 설정합니다.
특성 설명
width 화면의 폭을 지정한다
height 화면의 높이를 지정한다.
asepct-ratio 화면의 종횡비를 지정한다.
device-width 장치의 폭을 지정한다.
device-height 장치의 높이를 지정한다.
device-aspect-ratio 장치의 종횡비를 지정한다.
orientation 화면의 방향을 지정한다. portrait, landscape 두 가지 방향이 있다.
color 색상 비트수를 지정한다.
color-index 색상수를 지정한다.
monochrome 흑백 프레임 버퍼의 픽셀당 비트수를 지정한다.
resolution 화면의 밀도를 dpi나 dpcm 단위로 지정한다.
scan tv의 스캐닝 방법을 지정한다. progressive 또는 interlace가 있다.
grid 출력 장치가 그리드 또는 비트맵인지 지정한다


CSS Description

background-color

백그라운드 색상을 설정합니다.

  • background-color : #fff; - 백그라운드 색을 설정합니다.
  • background-color : transparent; - 백그라운드 색을 투명하게 설정합니다.

background-image

백그라운드 이미지를 설정합니다.

  • background-image : none; - 백그라운드 이미지 속성을 설정하지 않습니다.
  • background-image : url(이미지경로); - 백그라운드 이미지를 설정합니다.

background-position

백그라운드 위치를 설정합니다.

  • background-position : left top
  • background-position : left center
  • background-position : left bottom
  • background-position : right top
  • background-position : right center
  • background-position : right bottom
  • background-position : center top
  • background-position : center center
  • background-position : center bottom
  • background-position : 10px 20px
  • background-position : 10% 5%
  • background-position : 10% 5%, 10px 40px, center top

background-repeat

백그라운드 이미지 반복 여부를 설정합니다.

  • background-repeat : repeat(기본); - 이미지를 X축 Y축으로 반복 설정합니다.
  • background-repeat : repeat-x; - 이미지를 X축으로 반복 설정합니다.
  • background-repeat : repeat-y; - 이미지를 Y축으로 반복 설정합니다.
  • background-repeat : no-repeat; - 이미지를 반복하지 않고 하나만 나오게 합니다.

background-size

백그라운드 이미지 사이즈 설정합니다.

  • background-size : 30px 40px; - length
  • background-size : 100% 50%; - 퍼센트
  • background-size : auto(기본);
  • background-size : contain; - 이미지를 요소 크기에 맞게 설정합니다. 가로와 세로 비율을 유지되면서 설정
  • background-size : cover; - 이미지를 요소 크기에 맞게 설정합니다. 화면 크기에 맞게 공백 없이 설정

background-attachment

백그라운드 이미지 고정여부를 설정합니다.

  • background-attachment : scroll(기본);
  • background-attachment : fixed; - 배경이미지를 고정하고, 콘텐츠만 움직입니다.
  • background-attachment : local; - 배경이미지와 콘텐츠가 같이 움직입니다.

border

테두리 속성을 설정합니다.

  • border-width : 테두리 두께
  • border-style : 테두리 스타일
  • border-color : 테두리 색
  • border-image : 테두리 이미지
  • border-radius : 테두리 굴곡

border-style

테두리 스타일 속성을 설정합니다.

  • border-style : none;
  • border-style : hidden;
  • border-style : dotted;
  • border-style : dashed;
  • border-style : solid;
  • border-style : double;
  • border-style : groove;
  • border-style : ridge;
  • border-style : inset;
  • border-style : outset;

border-width

테두리 두께 속성을 설정합니다.

  • border-top-width : 1px;
  • border-right-width : 2px;
  • border-bottom-width : 3px;
  • border-left-width : 4px;
  • border-width: 1px 2px 3px 4px;
  • border-width: 1px 2px 3px;
  • border-width: 1px 2px;
  • border-width: 1px;
  • border-width: thin(1px)
  • border-width: medium(3px)
  • border-width: thick(5px)

font-size

폰트 사이즈 속성을 설정합니다.

  • font-size: xx-small(X)
  • font-size: x-small(X)
  • font-size: small(X)
  • font-size: xx-large(X)
  • font-size: x-large(X)
  • font-size: large(X)
  • font-size: smaller(X)
  • font-size: larger(X)
  • font-size: medium(X)
  • font-size: 14px(length)
  • font-size: 20%(percentage)

position

요소의 위치를 설정합니다.

  • postion: static; - 기본값
  • postion: absolute; - 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
  • postion: relative;
    1. position: absolute의 기준점 역할을 합니다.
  • postion: fixed; - 요소의 위치를 고정을 설정합니다.

margin

박스 요소의 바깥쪽 여백을 설정합니다.

  • margin-top : 10px; - 요소의 위 바깥쪽 여백을 설정합니다.
  • margin-right : 11px; - 요소의 오른쪽 바깥쪽 여백을 설정합니다.
  • margin-bottom : 12px; - 요소의 아래 바깥쪽 여백을 설정합니다.
  • margin-left: 13px; - 요소의 왼쪽 바깥쪽 여백을 설정합니다.
  • margin : 10px 11px 12px 13px; - 위쪽/오른쪽/아래/왼쪽
  • margin : 10px 11px 12px; - 위쪽(10px)/왼쪽,오른쪽(11px)/아래(12px)
  • margin : 10px 11px; - 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px)
  • margin : 10px; - 위쪽/오른쪽/아래/왼쪽(10px)
  • margin : auto; - 자동값, 기본값
  • margin : 0 auto; - 블록구조를 가운데 정렬 할 때 사용

text-align

텍스트 정렬 방식을 설정합니다.

  • text-align: left; - 텍스트의 정렬을 왼쪽으로 설정합니다.
  • text-align: right; - 텍스트의 정렬을 오른쪽으로 설정합니다.
  • text-align: center; - 텍스트의 정렬을 양쪽으로 설정합니다.
  • text-align: justify; - 텍스트의 정렬을 양쪽으로 설정합니다.

box-sizing

컨텐츠 요소를 가운데 정렬하는 방법

  • 인라인 요소를 가운데 정렬하는 방법(text-align: center)
  • 블록 요소를 가운데 정렬하는 방법(margin: 0 auto)
  • 테이블을 이용한 가운데 정렬하는 방법(vertical-align: middle)
  • 포지션을 이용한 가운데 정렬하는 방법(margin)
  • 포지션을 이용한 가운데 정렬하는 방법(translate)
  • 포지션을 이용한 가운데 정렬하는 방법(margin:auto)
  • 플렉스를 이용한 가운데 정렬하는 방법(display:flex)

인라인 구조를 가운데 정렬하는 방법

See the Pen Center Type1 by Webstoryboy (@webstoryboy) on CodePen.


블록 요소를 가운데 정렬하는 방법

See the Pen Center Type2 by Webstoryboy (@webstoryboy) on CodePen.


테이블을 이용한 가운데 정렬하는 방법

See the Pen Center Type3 by Webstoryboy (@webstoryboy) on CodePen.


포지션을 이용한 가운데 정렬하는 방법

See the Pen Center Type4 by Webstoryboy (@webstoryboy) on CodePen.


포지션을 이용한 가운데 정렬하는 방법

See the Pen Center Type5 by Webstoryboy (@webstoryboy) on CodePen.


포지션을 이용한 가운데 정렬하는 방법

See the Pen Center Type6 by Webstoryboy (@webstoryboy) on CodePen.


플렉스를 이용한 가운데 정렬하는 방법(display:flex)

See the Pen Center Type7 by Webstoryboy (@webstoryboy) on CodePen.