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 (가로)X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
overflow-y (세로)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 선택자
    • 여러개의 태그를 식별하기 위한 선택자입니다.
    • 하나의 태그를 여러개를 사용할 수 있습니다.
    • "."으로 표시합니다.

속성 선택자

[ ] 괄호안의 속성 이름과 값 사이에 다양한 연산자를 사용하여 속성값의 일부만 평가하여 조건에 맞는 엘리먼트를 선택한다.

선택자 설명
A[속성^=값] 특정 값으로 시작한다.
A[속성$^=값] 특정 값으로 끝난다.
A[속성*=값] 특정값을 부분 문자열로 포함한다.
A[속성~=값] 특정 값을 단어로 포함한다.
A[속성|=값] 특정 값을 단어로 포함한다. ~=에 비해서는 하이픈을 단어 구분자로 인정한다는 점이 다르다.

상태 선택자

선택자 설명
:hover 마우스가 위에 있을 때 선택된다
:active 마우스 버튼을 클릭 했을 때 선택된다.

링크 선택자

선택자 설명
a:link 링크의 속성이다.
a:visited 이미 방문한 링크에 대한 속성이다.

입력폼 선택자

선택자 설명
:focus 포커스를 가진 상태이다.
:enabled 사용 가능한 상태이다.
:disabled 사용 금지된 상태이다.
:checked 체크된 상태이다.
:default 디폴트값을 가진 상태이다.
:valid 입력값이 유효한 상태이다.
:invalid 입렵값이 무효한 상태이다.
:in-range 입력값이 지정된 범위 안에 있다.
:out-of-range 입력값이 지정된 범위 안에 있지 않다.
:required 필수 속성이다.
:optional 옵션 속성이다.

CSS 선언방법

CSS 선언방법은 3가지가 있습니다.

  • 외부 스타일(External Style Sheet) : 외부 CSS 파일과 연결
  • 내부 스타일(Internal Style Sheet) : head 태그 안에 정의
  • HTML태그내에 스타일 지정(Inline Styles) : 해당 태그 안에 정의

CSS 단위

글자의 크기는 font-size 속성을 지정합니다.

  • % - 기본 크기에 대한 비율입니다.
  • em - 글꼴 높이의 배수입니다.
  • ex - 소문자 높이의 배수입니다.
  • px - ,픽셀, 다누이를 생략할 때의 디폴트입니다.
  • pt - 포인트
  • pc - 파이카, 12포인트와 같습니다.
  • in - 인치
  • cm - 센티미터
  • mm - 밀리미터

CSS 색상

CSS 색상은 미리 정의된 색상의 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 설정됩니다.

  • #RRGGBB - 빨강, 초록, 파랑의 강도를 16진수 두 자리로 지정하며 각 요소별로 256단계를 표현할 수 있으며 총 1600만 가지 색을 사용합니다.
  • #RGB - 빨강, 초록, 파랑의 강도를 16진수 한 자리로 지정하며 색상 요소별로 16단계밖에 강도를 지정할 수 없어 잘 사용되지 않습니다.
  • rgb(r, g, b) - 빨강, 초록, 파랑의 강도를 0~255 범위의 정수로 지정합니다.
  • rgba(r, g, b, a) - rgb값 외에 투명도를 지정하는 알파를 0~1 사이의 실수로 지정하고 0은 투명한 색이며, 1은 불투명, 0.5는 반투명입니다.
  • hsl(h, s, l) - 색상, 채도, 명도롤 색상을 지정하며, 채도는 0~365 사이의 각도이고, 명도, 채도는 백분율입니다.
  • hsla(h, s, l, a) - hsl값 이외에 투명도를 지정하는 알파를 0~1 사이의 실수로 지정하고 0은 투명한 색이며 1은 불투명 0.5는 반투명입니다.
  • 색상 이름 - red, green, blue 등 미리 정의된 색상 이름을 사용합니다.

절대주소와 상대주소

이미지 경로를 지정하는 방법은 절대경로와 상대경로가 있습니다

  • 절대주소
    • 다른 파일의 위치보다 현재 원하는 파일의 주소를 말합니다.
  • 상대주소
    • 하나의 파일이 있는 장소에서 다른 파일이 어디에 존재하는 중점적으로 봐야합니다.
    • / : 최상위 경로를 의미합니다.
    • ./ : 현재 폴더를 의미합니다.
    • ../ : 현재 위치의 상위 폴더를 의미합니다.

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

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

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

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

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

이미지 타입

프로젝트 종류에 따른 이미지 타입표

종류 PC web Mebile Web Mebile APP
GIF 기본 사용 가능 X
JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지 일 때 X
PNG-8 X 기본 반투명효과 없고 컬러가 적을 때
PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본
이미지 스프라이트 O O X

PC Web

  • 기본 포맷은 GIF를 사용한다.
  • JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용한다.
  • JPG로 저장 시 압축률 관리
    • 일반 저장 시(File->Save) : 압축률 10/12 이상으로 저장할 것.
    • Save for web 기준 : Original 혹은 JPG Quality 90 이상
  • 구형브라우저에서의 PNG 이미지 지원

Mobile Web

  • 3G망을 이용하는 유저를 고려하여 용량 축소가 중요하다.
  • PNG-8 포맷을 기본으로 저장하며, 색상 수가 많거나 반투명 효과가 있으면 PNG-24를 사용한다.
  • 용량 대비 이미지 품질을 고려하여 포맷을 변경할 수도 있다.

이미지 표현 방법

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

  • <img> 태그로 표현하는 방법 : 이미지에 의미가 있는 경우
    아이콘1 아이콘2 아이콘3 아이콘4
  • background 속성으로 표현하는 방법 : 이미지에 의미가 없고 장식용인 경우
  • 이미지를 60px로 설정한 경우 : PC 화면
    아이콘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_su {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 화면의 높이를 지정한다.
aspect-ratio 화면의 종횡비를 지정한다.
device-width 장치의 폭을 지정한다.
device-height 장치의 높이를 지정한다.
device-aspect-ratio 장치의 종횡비를 지정한다.
orientation 화면의 방향을 지정한다. portrait, landscape 두가지 방향이 있다.
color 색상 비트수를 지정한다.
color-index 생상수를 지정한다.
monochrome 흑백 프레임 버퍼의 픽셀당 비트수를 지정한다.
resolution 화면의 밀도를 dpi나 dpcm 단위로 지정한다.
scan tv의 스캐닝 방법을 지정한다. progressive 또는 interlace가 있다.
grid 출력 장치가 그리드 또는 비트맵인지 지정한다.

웹 폰트(WebFont)

웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법이며, 폰트를 서버에서 다운로드하는 방식입니다.

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 : 10px;
  • border-right-width : 11px;
  • border-bottom-width : 12px;
  • border-left-width : 13px;
  • 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
  • font-size : x-small
  • font-size : small
  • font-size : xx-large
  • font-size : x-large
  • font-size : large
  • font-size : smaller
  • font-size : larger
  • font-size : medium
  • font-size : 14px(length)
  • font-size : 20%(percentage)

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; - 블록구조를 가운데 정렬 할 때 사용

overflow

요소의 내용이 너무 커서 지정한 영역에 들어 가지 않을 때 내용을 클립할지 또는 스크롤 막대를 추가할지 지정해주는 속성입니다.

  • overflow:visible; - 기본값. 오버플로가 잘리지 않습니다. 그것은 요소의 상자 밖에 렌더링됩니다.
  • overflow:hidden; - 오버플로가 잘리고 나머지 내용은 보이지 않습니다.
  • overflow:scroll; - 오버플로가 잘리지 만 스크롤바가 추가되어 나머지 내용을 볼 수 있습니다.
  • overflow:auto; - 오버플로가 잘린 경우 스크롤바를 추가하여 나머지 콘텐츠를 확인해야합니다.
  • overflow속성은 지정된 높이의 블록요소에 대해서만 작동합니다.

position

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

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

padding

요소의 안쪽 여백을 설정합니다.

  • padding-top - 요소의 위 안쪽 여백을 설정합니다.
  • padding-right - 요소의 오른편 안쪽 여백을 설정합니다.
  • padding-bottom - 요소의 아래 안쪽 여백을 설정합니다.
  • padding-left : 요소의 왼편 안쪽 여백을 설정합니다.

text-align

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

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

text-decoration

선으로 텍스트를 꾸며주는 속성입니다.

  • text-decoration : underline; - 밑줄 긋기
  • text-decoration : none; - 밑줄 긋지 않음
  • text-decoration : overline; - 텍스트 위에 선을 긋기
  • text-decoration : line-through; - 텍스트 가운데 선 긋기

text-overflow

문자열 영역 속성을 설정합니다.

  • text-overflow:clip - 문자열를 그대로 보여주는 기본값입니다.
  • text-overflow:ellipsis - 문자열 끝부분을 "..."으로 설정합니다.
  • text-overflow:string - 짤린 텍스트 영역을 string으로 설정합니다.

text-transform

영어 텍스트를 대문자 혹은 소문자로 설정합니다.

  • text-transform: capitalize - 단어의 첫번째 글자를 대문자로 설정합니다.
  • text-transform: uppercase - 모든 글자를 대문자로 바꿉니다.
  • text-transform: lowercase - 모든 글자를 소문자로 바꿉니다.
  • text-transform: none - text-transform을 속성에 적용하지 않습니다.
  • text-transform: inherit - 상위 요소의 속성값으로 설정합니다.

white-space

줄바꿈, 공백, 줄 속성을 설정합니다.

  • white-space:normal - 기본값
  • white-space:nowrap - 줄바꿈을 하지 않습니다.
  • white-space:inherit - white-space의 속성 값을 상위요소한테 상속받습니다.

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

  • 인라인 구조를 가운데 정렬하는 방법(text-align: center;)
  • 블록 요소를 가운데 정렬하는 방법(margin: 0 auto;)
  • 테이블을 이용한 가운데 정렬하는 방법(vertical-align: middle;)
  • 포지션을 이용한 가운데 정렬하는 방법(크기값을 알때: margin)
  • 포지션을 이용한 가운데 정렬하는 방법(크기값을 모를때: translate)
  • 포지션을 이용한 가운데 정렬하는 방법(margin: auto;)
  • 포지션을 이용한 가운데 정렬하는 방법(display: flex)

인라인 구조를 가운데 정렬을 하는 방법(text-align: center;)

See the Pen Center Type1 by Yang (@yangareum) on CodePen.


블록 요소를 가운데 정렬하는 방법(margin: 0 auto;)

See the Pen Center Type2 by Yang (@yangareum) on CodePen.


테이블을 이용한 가운데 정렬하는 방법(vertical-align: middle;)

See the Pen Center Type3 by Yang (@yangareum) on CodePen.


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

See the Pen Center Type by Yang (@yangareum) on CodePen.


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

See the Pen Center Type5 by Yang (@yangareum) on CodePen.


포지션을 이용한 가운데 정렬하는 방법(margin: auto;)

See the Pen Center Type6 by Yang (@yangareum) on CodePen.


포지션을 이용한 가운데 정렬하는 방법(display: flex;)

See the Pen Center Type7 by Yang (@yangareum) on CodePen.