CSS Reference

CSS

CSS(Cascading Style Sheets)은 HTML을 꾸며주는 스타일시트입니다.

• HTML은 웹 사이트의 몸체를 담당한다면, CSS는 옷과 액세사리 같은 꾸미는 역할을 담당합니다.

CSS Selector

Tag	Type	Description	Version
.	.class {color:#fff;}	클래스 선택자	CSS1
#	#id {color:#fff;}	아이디 선택자	CSS1
*	* {margin:0; padding:0;}	전체 선택자	CSS2
element	div {background:#fff;}	요소 선택자	CSS1
element,element	div, p {background:#fff;}	그룹 선택자	CSS1
element > element	div > p {background:#fff;}	자식 선택자	CSS1
element + element	div > p {background:#fff;}	형제 선택자	CSS2
[attribute]	div[class] {color: #fff;}	속성 선택자	CSS2
[attribute=value]	div[class="white"] {color: #fff;}	속성 선택자	CSS2
[attribute~=value]	div[class~="white"] {color: #fff;}	속성 선택자(value값이 포함한 요소를 선택)	CSS2
[attribute^=value]	div[class^="white"] {color: #fff;}	속성 선택자(value값으로 시작하는 요소를 선택)	CSS3
[attribute*=value]	div[class*="white"] {color: #fff;}	속성 선택자(value값을 포함한 요소를 선택)	CSS3
[attribute$=value]	div[class$="white"] {color: #fff;}	속성 선택자(value값으로 끝나는 요소를 선택)	CSS3

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

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

CSS Color

CSS 색상표현은 4가지 방법이 있습니다.

• RGB/RGBA
• RGB: red,gree,blue의 값.
• RGBA: red,gree,blue,alpha의 값.
• HSL/HSLA
• HSL(hue,saturation,linhtness): 색상, 채도, 명도로 0~360까지의 색상환에 따라 색상을 표현할 수 있다. 0:red, 120:green, 240:blure로 표현한다.
• HSLA(hue,saturation,linhtness,alpha): HSL 표현의 확장으로, Alpha(불투명도) 변수의 값은 0.0(투명) ~ 1.0(불투명) 사이의 값 중 지정한다.
• 헥사코드
• 헥사코드: 헥스 코드는 색깔을 #과 뒤에 붙는 여섯 개의 알파벳 + 숫자로 나타낸 것이다.
• 키워드
• 키워드: CSS에서는 색상의 이름(키워드)으로도 색상을 설정할 수 있다.

CSS 선언 방법

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

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

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

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

1. 깨지는 영역에 똑같이 float을 사용합니다.(X)
2. float의 성질을 차단하는 clear:both를 사용합니다.
3. float을 사용한 부모박스한테 overflow: hidden을 사용합니다.(O)
4. float을 사용한 부모태그한테 clearfix를 사용합니다.

이미지 표현 방법

• <img> 태그를 통해서 넣는 방법 : 이미지에 의미가 있을 때
  
• CSS background를 통해서 넣는 방법 : 이미지가 의미가 없을 때
• 이미지 스프라이트 기법을 통해서 넣는 방법

이미지 스프라이트

• 여러번의 서버 요청을 한번으로 줄일 수 있습니다.
• 이미지 수정이나 관리가 간편합니다.
• 웹 접근성을 준수하기 위해서는 IR효과를 설정해야 합니다.

IR 기법

position:relative를 사용해야 하는 경우

• position: absolute의 기준점이 필요할 때
• z-index를 사용해야 하는 경우 포지션 값이 없으면 relative를 사용하여 z-index의 값을 인식시킬 수 있습니다.
• 요소의 위치를 유지한채 left, top, right, bottom의 위치 값을 사용하고 싶을 때

절대주소와 상대주소

• 전체 구조내에서의 위치를 표시하는 방법.
• 웹서버를 기준으로한 절대경로

• 작업하고 있는 파일의 현재 위치를 기준으로 경로를 지정하는 방법.
• 연결하려는 파일이 현재 편집 중인 문서와 같은 폴더에 위치한 경우.(<a href="파일명">연결할 문서</a>) 또는 (<a href="./파일명">연결할 문서</a>)
• 연결하려는 파일이 현재 편집 중인 문서와 하위 폴더에 위치한 경우.(<a href="하위폴더명/파일명">연결할 문서</a>)
• 연결하려는 파일이 현재 편집 중인 문서와 상위 폴더에 위치한 경우.(<a href="../파일명">연결할 문서</a>)
• 연결하려는 파일이 현재 편집 중인 문서와 같은 레벨의 폴더에 위치한 경우.(<a href="../하위폴더명/파일명">연결할 문서</a>)

CSS Description

width

요소의 가로 값을 정의합니다.

height

요소의 세로 값을 정의합니다.

background

요소의 배경을 정의합니다.

• background-attachment : 배경이미지의 고정 여부를 설정합니다.
• background-blend-mode : 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip : 배경을 혼합했을 때의 상태를 설정합니다.
• background-color : 백그라운드 색상을 설정합니다.
• background-image : 백그라운드 이미지를 설정합니다.
• background-origin : 백그라운드 이미지 영역 속성을 설정합니다.
• background-position : 백그라운드 이미지 위치를 설정합니다.
• background-repeat : 백그라운드 이미지 반복 여부를 설정합니다.
• background-size : 백그라운드 사이즈를 설정합니다.

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 40px
• 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 - 이미지를 반복하지 않고 한번만 나오게 설정합니다.

font-size

글꼴 크기를 설정합니다.

• font-size: smaller - 글자 사이즈를 smaller 사이즈로 설정합니다.
• font-size: larger - 글자 사이즈를 larger 사이즈로 설정합니다.
• font-size: length - 글자 사이즈를 length 사이즈로 설정합니다.
• font-size: % - 글자 사이즈를 상위(부모) 요소 폰트 크기에서 %로 계산하여 지정합니다.
• font-size: medium - 12pt 사이즈
• font-size: xx-large - medium보다 4.5배 확대
• font-size: x-large - medium보다 3배 확대
• font-size: large - medium보다 1.5배 확대
• font-size: small - medium보다 1.5배 축소
• font-size: x-small - medium보다 3배 축소
• font-size: xx-small - medium보다 3.5배 축소
• font-size: 14px;(length)

line-height

문장과 문장 간격을 설정하는 속성입니다.

• line-height : normal - 기본값으로 보통 1.0 ~ 1.2 입니다.
• line-height : length - 길이로 줄 높이를 정합니다.
• line-height : number - 글자 크기를 몇 배로 줄 높이를 정합니다.
• line-height : percentage - 글자 크기를 몇 %로 줄 높이를 정합니다.
• line-height = hieght : 한 줄일 때 중간으로 오는 효과

position

• position : static(기본값)
• position : absolute - 요소의 위치를 절대값을 설정합니다.
• position : relative
  1. position : absolute의 기준점이 필요할 때 사용합니다.
  2. 요소의 위치를 유지한채로 left, top, rightm bottom의 위치 값을 사용하고 싶을 때.
  3. z-index를 사용하고 싶은데 포지션이 없으면 relative를 사용하여 z-index값을 인식시킬 수 있습니다.
• position : fixed - 요소의 위치를 고정으로 설정합니다.

border

• border-width: 테두리 두께 속성을 설정합니다.
• border-style: 테두리 스타일 속성을 설정합니다.
• border-color: 테두리 색 속성을 설정합니다.
• border-image: 테두리 이미지 속성을 설정합니다.
• border-radius: 테두리 굴곡 속성을 설정합니다.

border-width

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-width : thin(1px)
• border-width : medium(3px)
• border-width : thick(5px)
• border-width : 10px 11px 12px 13px
• border-width : 10px 11px 12px
• border-width : 10px 11px
• border-width : 10px

border-style

• none : 테두리 없음으로 지정합니다. border-style이 none으로 지정된경우 border-width에서 설정된 값을 0으로 만듭니다.
• hidden : 테두리를 숨깁니다. none과 같으나 테이블의 셀 요소라면 테두리를 통합합니다.
• dotted : 점선의 테두리로 지정합니다.
• dashed : 짧은 선들의 연속으로 지정합니다.
• solid : 실선으로 지정합니다.
• double : 두개의 실선으로 지정합니다.
• groove : 테두리가 안으로 파진것처럼 보입니다.
• ridge : 테두리가 밖으로 튀어나온것처럼 보입니다.
• inset : 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보입니다.
• outset : 테두리를 포함한 컨텐츠 영역이 밖으로 튀어나온것처럼 보입니다.

border-color

• border-color : 색상코드
• transparent : 투명을 지정한다.

border-image

• border-image-source : 테두리로 사용할 이미지를 지정한다.
• border-image-slice : 테두리로 사용될 이미지의 위치를 지정한다.
• border-image-width : 테두리로 사용될 이미지의 너비를 지정한다.
• border-image-outset : border box를 넘어서 확장되는 테두리 이미지 영역의 양을 지정한다.
• border-image-repeat : 테두리 이미지의 스케일을 조정하는 방법을 지정한다.

border-radius

• border-top-radius
• border-right-radius
• border-bottom-radius
• border-left-radius

box-sizing

• content-box : 요소에 border, padding 값이 포함되어 있지 않습니다.
• border-box : 요소에 border, padding 값이 포함됩니다.
• inherit : box-sizing의 속성 값을 상위요소한테 상속받습니다.

display

• inline : 인라인 요소의 성질로 설정합니다.
• block : 블록 요소로 성질로 설정합니다.
• flex : 플렉스 요소의 성질로 설정합니다.
• inline-block : 인라인 성질을 가지면서 블록 요소의 성질을 설정합니다.
• inline-flex : 인라인 성질을 가지면서 플렉스 요소의 성질을 설정합니다.
• inline-table : 인라인 성질을 가지면서 테이블 요소의 성질을 설정합니다.
• list-item : 리스트 스타일 성질로 설정합니다.
• run-in : 인라인 및 블록 요소의 성질을 하나만 선택하도록 설정합니다.
• table : 테이블 요소의 성질로 설정합니다.
• table-caption : 테이블 요소의 caption 성질로 설정합니다.
• table-column-group : 테이블 요소의 컬럼 그룹 성질로 설정합니다.
• table-header-group : 테이블 요소의 헤더 그룹화 성질로 설정합니다.
• table-footer-group :테이블 요소의 푸터 그룹화 성질로 설정합니다.
• table-row-group : 테이블 요소의 row 그룹화 성질로 설정합니다.
• table-cell : 테이블 요소의 셀 성질로 설정합니다.
• table-column : 테이블 요소의 컬럼 성질로 설정합니다.
• table-row : 테이블 요소의 row 성질로 설정합니다.
• none : display 효과를 적용하지 않습니다.
• inherit : z-index의 속성 값을 상위요소한테 상속받습니다.

Font Awesome 자동접근성 설정하는 법

• Css 콘텐츠 출력과 스크린리더 이슈
  • 스크린리더가 발전하고 브라우저에서도 접근성 관련 api 기능이 발전하면서 스크린리더에 따라 css로 만들어진 텍스트 콘텐츠들도 읽을 수 있게 되었습니다.
    예: <style> a.important:after { content: '클릭하지 마세요’ } </style>
  • 그런데 아이콘 폰트 클래스를 적용할 경우 특정 클래스의 경우 의미 없는 문자 코드가 css 콘텐츠에 포함되어 있어 스크린리더가 이러한 무의미한 텍스트를 읽게될수 있습니다. 아이콘에 대한 설명이 포함되어 있지 않은 이상 스크린리더 사용자에게 이러한 정보는 아무런 의미를 가지지 못하므로 aria-hidden=”true” 를 사용하여 이러한 의미 없는 요소들이 음성출력되지 않도록 해 주어야 합니다. 이것은 의미 없는 이미지에 alt=”” 속성을 적용하여 아예 이미지 자체가 음성출력되지 않도록 하는 것과 같은 원리입니다.
    예: <i class="fa fa-fighter-jet" aria-hidden="true"></i>

• 자동접근성 지원
  • 웹폰트에 따라 자동 접근성 기능을 지원하는 경우들이 있습니다. 예를 들어 Font Awesome의 경우 앞에서 설명한 바와 같이 수동으로 접근성 관련 아이콘 정보 등을 추가할 수도 있으나 font awesome cdn을 사용하고 자동 접근성을 설정하면 의미 있는 아이콘에 title 속성을 추가하면 자동으로 span 태그를 생성하고 화면에서는 숨기고 스크린리더만 인식 가능한 스크린리더 텍스트를 추가해주게 됩니다.
    예: <dt> <i title="Time to destination by car" class="fa fa-car" aria-hidden="true"></i><span class="sr-only">Time to destination by car</span> </dt>

IR(Image Replacement)기법 정리

• Text-indent를 활용한 IR기법
  • Text-indent를 활용한 IR 기법은 가장 손쉽게 사용할 수 있는 방법입니다. 간단한 사용 방법은 text-indent 속성 값에 현재 사용되고 있는 디스플레이의 해상도보다 작은 음의 정수 값을 주는 것입니다. 이를테면 ‘span{text-indent: -9999’}와 같이 사용할 수 있습니다.
  • Text-indent 속성은 사용하기 간편하지만 단점이 있습니다. 만약 사용자의 단말기에 따라 이미지가 제대로 로드되지 않을 때 스크린리더 사용자가 아니라 하더라도 이미지를 설명하는 텍스트를 보고 콘텐츠의 내용을 확인해야 하지만 할 수 없다는 것입니다. 또한, 웹페이지에 text-indent 스타일 속성이 적용된 요소가 많을 때 컴퓨터가 웹페이지 로드 시 위치값을 그만큼 많이 계산해 하므로 성능에 저하를 불러올 수 있습니다.

• CSS의 위치 속성과 overflow: hidden을 사용하는 방법
  • CSS의 위치를 지정하는 left/right와 position, 그리고 overflow: hidden을 사용하는 IR 기법은 원리상 text-indent와 유사합니다. 사용 방법은 텍스트가 있는 <span> 또는 <div> 등의 요소에 디스플레이 해상도 보다 훨씬 작은 음의 정수 값으로 위치를 부여한 다음, 높이와 너비를 1px 정도로 작게 설정합니다. 그다음 overflow: hidden과 position: absolute로 대체 텍스트를 화면에서 완전히 숨깁니다. 자세한 방법은 아래의 샘플을 참조하세요.

• 높이와 넓이를 0으로 설정하는 IR기법
  • 이 방법은 대체 텍스트 글자가 들어가는 등의 요소의 높이와 너비를 0으로 지정하는 방법입니다. 먼저, 대체할 텍스트 요소에 BackGround 이미지를 설정한 다음 대체 텍스트가 포함되는 요소의 높이와 너비를 0으로 지정합니다.

• z-index를 활용한 IR기법
  • z-index를 이용한 IR 기법 역시 크게 어렵지 않습니다. 이미지의 대체 텍스트에 z-index 속성 값을 음의 정수로 부여하는 방식입니다. 먼저 아래의 샘플을 확인해 보세요.
  • z-index로 IR 기법을 사용했을 때의 특징은 만약 브라우저에서 CSS를 끄거나, 어떠한 이유로 웹 페이지에 적용된 CSS가 정상적으로 로드되지 않을 때 숨겨진 텍스트가 화면에 출력됩니다. 또한, position 속성을 사용하기 때문에 디바이스의 사양에 따라 성능에 영향을 줄 수 있습니다.

• Title 무엇이 문제인가?
  • Title 속성으로 스크린리더 사용자에게 추가 설명을 제공하는 것의 문제는 스크린리더 대부분이 폼 요소를 제외한 링크 등의 컨트롤에 적용된 title 속성을 무시한다는 것입니다. 아울러 title 속성은 국내 웹 접근성 지침과는 달리 WEBAIM은 폼 요소 등으로 제한하여 사용할 것을 권고하고 있습니다.
  • 현재 요소와 관계없이 기본적으로 적용된 title 속성을 출력하는 스크린리더는 국내의 센스리더가 거의 유일하다고 할 수 있습니다. 물론 JAWS는 사용자의 설정에 따라 title을 출력하도록 설정할 수 있습니다. 그러나 JAWS 역시 기본적으로 title을 출력하지 않는 것은 NVDA 등의 스크린리더와 같습니다.

• Title의 대안, ARIA-label
  • 만약 title 속성을 대체하려면 현재 가장 적합한 방식은 ARIA-label 이라 할 수 있습니다. 다만 ARIA-label을 사용할 때는 title 처럼 추가 설명만을 속성 값에 넣으면 안 됩니다. 링크 또는 버튼 등의 컨트롤 텍스트와 함께 기입해야 합니다. 이를테면 ‘ARIA-label=”네이버 – 새 창이 열립니다”’와 같이 해야 합니다. 아래 샘플에서 title 속성과 ARIA-label의 예를 살펴볼 수 있습니다.
  • 샘플에서 확인하셨듯이 링크에 적용된 title 속성값은 센스리더를 제외한 다른 스크린리더들은 읽지 못 합니다. 따라서 스크린리더 사용자에게 별도의 추가 설명이 제공되는 컨트롤을 사용할 때는 ARIA-label을 사용해야만 모든 스크린리더에서 컨트롤명과 추가 정보를 읽을 수 있습니다.

list-style

• list-style-image : 목록 마커의 이미지를 설정합니다.
• list-style-position : 목록 마커의 위치를 설정합니다.
• list-style-type : 목록 마커의 유형을 설정합니다.
• list-style-type : disc;
• list-style-type : circle;
• list-style-type : square;
• list-style-type : upper-alpha;
• list-style-type : upper-latin;
• list-style-type : upper-roman;
• list-style-type : lower-alpha;
• list-style-type : lower-latin;
• list-style-type : lower-roman;
• list-style-type : decimal-leading-zero;

letter-spacing

• normal : 기본값으로 문자에 공백이 들어가지 않음. 0px와 같음
• lenth : px,em,% 등으로 지정(음수값 가능)

word-spacing

• normal : 기본값(default), 브라우저 기본 스타일로 나타냄
• length : px, cm, em 단위로 단어 간격을 직접 지정하며 음수도 허용

text-align

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

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

text-transform

문자를 대문자 또는 소문자로 전환하는 속성입니다.

• text-transform : none - 기본값으로, 테스트를 html 코드에 있는 그대로 읽음.
• text-transform : capitalize - 각 단어의 첫번째 문자를 대문자로 만듦.
• text-transform : uppercase - 모든 문자를 대문자로 바꿈.
• text-transform : lowercase - 모든 문자를 소문자로 바꿈.

margin

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

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

padding

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

• padding-top: 10px - 요소의 위쪽 안쪽 여백을 설정합니다.
• padding-right: 11px - 요소의 오른쪽 안쪽 여백을 설정합니다.
• padding-bottom: 12px - 요소의 아래쪽 안쪽 여백을 설정합니다.
• padding-left: 13px - 요소의 왼쪽 안쪽 여백을 설정합니다.
• padding: 10px 11px 12px - 위쪽10px/왼쪽,오른쪽11px/아래쪽12px
• padding: 10px 11px - 위쪽,아래쪽10px/왼쪽,오른쪽11px
• padding: 10px - 위쪽,오른쪽,아래쪽,왼쪽10px

overflow

• 값 - visible / hidden / scroll / auto / inherit
• 기본값 - visible
• 적용대상 - 블럭레벨요소와 치환된 요소
• 상속 - 상속안됨
• 퍼센테이지 - 지정불가
• 미디어 - Visual

• visible : 박스보다 넘쳐난 내용을 그대로 보여준다.
• hidden : 박스보다 넘쳐난 내용을 표시하지 않도록 지정하며 스크롤을 제공하지 않는다.
• scroll : 박스보다 넘쳐난 내용을 위해 스크롤을 제공한다. 잘려서 보이지 않는 부분을 스크롤해서 볼수있도록 한다. 내용이 박스보다 넘쳐나지 않아도 무조건 스크롤을 제공한다.
• auto : 브라우저에 의존하며 해당영역이 박스보다 큰 경우 스크롤을 자동으로 제공한다.

cursor

• 값 - [ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help ] ] | inherit
• 기본값 - auto
• 적용대상 - 모든요소
• 상속 - 상속됨
• 퍼센테이지 - 지정불가
• 미디어 - Visual

• auto : 현재의 문맥에 맞게 커서를 자동으로 지정
• crosshair : 십자 형태로 지정
• default : 기본 형태로 지정. 대부분 화살표 형태로 표현
• pointer : 링크를 지시하는 형태. 일반적으로 손가락 형태로 표현
• move : 이동을 지시하는 형태로 지정
• e-resize : 오른쪽 모서리를 조절하는 모양
• ne-resize : 상단, 오른쪽 모서리를 조절하는 모양
• nw-resize : 상단, 왼쪽모서리를 조절하는 모양
• n-resize : 상단 모서리모서리를 조절하는 모양
• se-resize : 하단 오른쪽 모서리를 조절하는 모양
• sw-resize : 하단 왼쪽 모서리를 조절하는 모양
• s-resize : 하단 모서리를 조절하는 모양
• w-resize : 왼쪽 모서리를 조절하는 모양
• text : 글자를 선택하는 형태롤 지정. 보통 I-bar형태로 표현
• wait : 프로그램이 작동중이여서 사용자가 기다려야 하는 형태. 보통 모래시계로 표현
• help : 보통 물음표 모양으로 표현된다.
• inherit

text-overflow

• overflow 속성값이 hidden, scroll, auto 일 때 (visible 제외)
• white-space:nowrap (텍스트 길어도 줄바꿈 되지 않음) 또는 텍스트가 다음 줄로 이동하지 않는 비슷한 경우

• clip - 기본값, 텍스트를 자름.
• ellipsis - 잘린 텍스트를 생략 부호(...)로 표시함.
• string - 잘린 텍스트를 지정한 문자열로 포시 예:div{ text- overflow:"---";}

white-space

• 값 - normal | pre | nowrap | inherit
• 기본값 -
• 적용대상 - 모든요소
• 상속 - 상속됨
• 퍼센테이지 - 지정불가
• 미디어 - Visual

• normal : 정상적으로 출력하도록 지정. 연속된 공백 문자나 줄바꿈을 통합한다.
• pre : 연속된 공백 문자나 줄바꿈을 통합하지 않고, 원문그대로 출력한다.
• nowrap : 연속된 공백 문자는 통합하지만, 줄바꿈은 통합하지 않는다.
• inherit

after

• 값 - auto | always | avoid | left | right | inherit
• 기본값 - auto
• 적용대상 - 블럭레벨 요소
• 상속 - 상속안됨
• 퍼센테이지 - 지정불가
• 미디어 - Visual, paged

• auto : 페이지 넘김을 해당 엘리먼트의 앞에 강제적으로 하거나 금지하지 않습니다.
• always : 해당 엘리먼트의 앞에 페이지 넘김을 항상 하도록 지정합니다.
• avoid : 해당 엘리먼트의 앞에 페이지 넘김을 금지하도록 지정합니다.
• left : 엘리먼트 앞에서 분리된 페이지가 왼쪽 면에 위치하도록 지정합니다.
• right : 엘리먼트 앞에 분리된 페이지가 오른쪽 면에 위치하도록 지정합니다.

before

• 값 - auto | always | avoid | left | right | inherit
• 기본값 - auto
• 적용대상 - 블럭레벨 요소
• 상속 - 상속안됨
• 퍼센테이지 - 지정불가
• 미디어 - Visual, paged

• auto : 페이지 넘김을 해당 엘리먼트의 앞에 강제적으로 하거나 금지하지 않습니다.
• always : 해당 엘리먼트의 앞에 페이지 넘김을 항상 하도록 지정합니다.
• avoid : 해당 엘리먼트의 앞에 페이지 넘김을 금지하도록 지정합니다.
• left : 엘리먼트 앞에서 분리된 페이지가 왼쪽 면에 위치하도록 지정합니다.
• right : 엘리먼트 앞에 분리된 페이지가 오른쪽 면에 위치하도록 지정합니다.

컨텐츠 요소를 가운데 오게 하는 방법