CSS Reference

CSS

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

종류	설명
align-content	flex-wrap 속성 의 동작을 수정합니다 . 이는 align-items 와 유사 하지만 플렉스 항목을 정렬하는 대신 플렉스 선을 정렬합니다.
align-items	유연한 컨테이너 내부의 항목에 대한 기본 정렬을 지정합니다.
align-self	플렉시블 컨테이너에서 선택한 항목의 정렬을 지정합니다.
all	unicode-bidi 및 direction을 제외한 모든 속성을 초기 값 또는 상속 된 값으로 다시 설정합니다.
animation	속기 속성입니다.
animation-delay	애니메이션의 시작에 대한 지연을 지정합니다.
animation-direction	애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야하는지 여부를 정의합니다.
animation-duration	애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 정의합니다.
animation-fill-mode	애니메이션이 재생되지 않을 때 (시작 전, 끝나기 전에 또는 둘 다) 요소의 스타일을 지정합니다.
animation-iteration-count	애니메이션을 재생해야하는 횟수를 지정합니다.
animation-name	@keyframes 애니메이션 의 이름을 지정합니다 .
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	표 테두리를 단일 테두리로 축소할지 아니면 표준 HTML에서와 같이 구분할지 여부를 설정합니다.
border-color	테두리 컬러 속성을 설정합니다.
border-image	요소 주위의 경계선으로 사용할 이미지를 지정할 수 있습니다.
border-image-outset	테두리 이미지 영역이 테두리 상자를 넘어 확장되는 양을 지정합니다.
border-image-repeat	테두리 이미지를 반복하거나 반올림하거나 늘릴 지 여부를 지정합니다.
border-image-slice	border-image-source로 지정된 이미지를 슬라이스하는 방법을 지정합니다 . 이미지는 항상 네 개의 모서리, 네 개의 모서리 및 중간의 9 개의 섹션으로 슬라이스됩니다.
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	생성 된 내용을 삽입 하기 위해 :: before 및 :: after 가상 요소 와 함께 사용됩니다 .
counter-increment	하나 이상의 CSS 카운터 값을 늘리거나 줄입니다.
counter-reset	만들거나 하나 개 이상의 CSS 카운터를 재설정합니다.
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	<img>, <video> 태그의 크기를 정의합니다.
object-position	<img>, <video> 태그의 위치를 정의합니다.
opacity	투명도를 설정합니다.
order	flex 콘텐츠의 순서를 정의합니다.
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	3D를 표현할 때 원근점을 정의합니다.
perspective-origin	3D를 표현할 때 원근점의 방향을 정의합니다.
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-align이 "justify"로 설정된 경우 텍스트의 양쪽 맞춤 방법을 지정합니다.
text-overflow	표시되지 않는 오버플로 된 콘텐츠를 사용자에게 알리는 방법을 지정하며, 잘라내거나 줄임표 (...)를 표시하거나 사용자 정의 문자열을 표시 할 수 있습니다.
text-shadow	텍스트에 그림자를 추가합니다.
text-transform	대문자로 또는 소문자로 바꾸는 속성입니다.
top	위치 지정된 요소의 세로 위치에 영향을줍니다.
transform	D 또는 3D 변형을 요소에 적용하며, 이 속성을 사용하면 요소를 회전, 크기 조절, 이동, 기울이기 등의 작업을 할 수 있습니다.
transform-origin	변형 된 요소의 위치를 ​​변경할 수 있습니다.
transform-style	3D 공간에서 중첩 요소를 렌더링하는 방법을 지정합니다.
transition	전이 속성/전환 기간/이행 타이밍 기능/전이 지연대한 속기 속성입니다.
transition-delay	전환 효과가 시작될 때의 속성을 지정합니다.값은 초 (S) 또는 (밀리 초)로 정의된다.
transition-duration	전환 효과를 완료하는 데 걸리는 시간 (밀리 초 또는 밀리 초)을 지정합니다.
transition-property	환 효과가 적용되는 CSS 속성의 이름을 지정합니다 (지정된 CSS 속성이 변경 될 때 전환 효과가 시작됩니다).
transition-timing-function	전환 효과의 속도 곡선을 지정합니다.
unicode-bidi	direction 속성 과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정하거나 반환합니다.
user-select	요소의 텍스트를 선택할 수 있는지 여부를 지정합니다.
vertical-align	요소의 세로 맞춤을 설정합니다.
visibility	요소가 표시되는지 여부를 지정합니다.
white-space	요소 내부의 공백을 처리하는 방법을 지정합니다.
width	요소의 가로 값을 설정합니다.
word-break	줄 끝까지 도달 할 때 단어가 끊기는 방식을 지정합니다.
word-spacing	단어 사이의 공백을 늘리거나 줄입니다.
word-wrap	사용하면 긴 단어를 손상시키고 다음 줄로 감쌀 수 있습니다.
z-index	요소의 스택 순서를 지정합니다.
@charset	문자셋 선언은 문서의 첫 줄에 공백 없이 삽입합니다.
:active	마우스를 클릭했을 때
:focus	포커스 되었을 때 (input 태그 등)
:hover	마우스를 롤오버 했을 때

CSS 선택자

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

CSS Selector

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

속성 선택자

특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다.

상태 선택자

입력양식의 상태를 선택할때 사용하는 선택자입니다.

입력폼 선택자

포커스 여부나 사용가능성, 체크 여부 등의 컨트롤 상태에 따라 엘리먼트를 선택합니다.

링크 선택자

href 속성을 가지고 있는 a태그에 적용되는 선택자입니다.

CSS 단위

부모나 기타 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위이다.

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

CSS 색상

색상값을 표현하는 여러가지 색상 모델을 지원한다.

• #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 등 미리 정의된 색상 이름을 사용한다.

CSS 선언 방법

HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다.

• 외부선언 (external css) : css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.
• 내부선언 (internal css) : HTML문서내에서 HTML 문서 안의 <head>과 </head> 안에 CSS 코드를 넣는 방법입니다.
• 엘리먼트에 직접 선언 (inline css) : 위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.

상대주소와 절대주소

이미지의 경로를 지정하는 방법은 절대경로와 상대경로가 있습니다. 이 절대경로와 상대경로는 이미지 삽입뿐 아니라 링크를 걸때도 똑같이 적용되는 부분이므로 아주 중요합니다.

• 상대주소 : 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식하는 방법입니다.
• 절대주소 : 이미지의 절대적인 경로로 지정하는 방식입니다.

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

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

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

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

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

이미지 표현 방법

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

• <img> 태그로 표현하는 방법 : 이미지에 의미가 있는 경우
  
• background 속성으로 표현하는 방법 : 이미지가 의미가 없고, 장식용인 경우

• 이미지를 60px로 설정한 경우 : PC화면
  
• 이미지를 120px로 설정한 경우 : 모바일 화면
  

이미지 스프라이트

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

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

• 이미지 스프라이트 기법을 통해서 넣는 방법(60px)
• 이미지 스프라이트 기법을 통해서 넣는 방법(120px)

이미지 타입 선택

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

PC Web

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

Mobile Web

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

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



Phark Method 항목	Phark Method 장점	Phark Method 단점
스크린 리더기 읽어줌	O
추가적인 태그 사용 안 함	O
CSS on / Image off 시 텍스트 안보임		O

• WA IR : 의미 있는 이미지의 대체 텍스트로 이미지를 off시에도 대체 텍스트를 보여주고자 할 때 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리
  아이콘1 아이콘2 아이콘3 아이콘4



WA IR 항목	WA IR 장점	WA IR 단점
스크린 리더기 읽어줌	O
CSS on / Image off 시 텍스트 보임	O
추가적인 태그 사용함		O
position 속성 사용(성능 관련 이슈)		O

• 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 : 앞과 뒤의 조건을 나타냅니다. (생략가능)
• (조건문) : 해당 조건을 설정합니다.
• (실행문) : 조건에 따른 실행을 설정합니다.