CSS

CSS

CSS Selector

• id 선택자
• 하나의 태그만 식별하기 위한 선택자 입니다.
• CSS에서는 '#'으로 표시합니다.
• id는 한 요소에 하나만 사용할 수 있습니다.
• class 선택자
• 여러개의 태그를 중복해서 사용하기 위한 선택자 입니다.
• CSS에서는 '.'으로 표시합니다.
• class는 두개 이상 사용할 수 있습니다.

이미지 스프라이트

• 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다
• 스프라이트는 수직정렬 (vertical)형과 바둑판(tile)형 중 서비스에 따라 선택하여 사용합니다.
• 수직 정렬형 스프라이트는 개체 수가 늘어남에 따라 공간 또한 늘어나 용량 이슈가 발생하므로 모바일 환경에서는 바둑판형 스프라이트를 선택합니다.

이미지 타입 선택

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

이미지 용량 및 크기

• PC web
• 최대 사이즈 : 가로 1024px X 세로 1024px (모바일환경에서 PC 웹에 접속하였을 때, 다운로드된 이미지의 사이즈가 1024px이 넘어갈 때 해당 이미지가 올바르게 표시되지 않으므로 PC 웹에서 가로/세로 사이즈의 제한을 둔다.)
• Mobile web
• CSS image : 스프라이트 된 이미지의 용량이 60KB 를 넘지 않도록 합니다.
• promotion image : 스프라이트 된 이미지의 용량이 400KB 를 넘지 않도록 합니다.

이미지 스프라이트 가이드

PC WEB

타이틀 이미지

• 수직 정렬형 이미지에서 각 개체의 기본간격은 50px이나, 높이가 크지 않으면 25px 단위로 줄일 수 있다.
• 수직 정렬형은 좌우에 텍스트가 배치되거나 사이즈가 고정이 아니면 적용한다.

버튼 이미지

• 바둑판형에서 각 개체의 기본간격은 10px 단위로 한다.
• 가로세로 사이즈가 고정일 경우 타일형으로 적용할 수 있다.

아이콘 이미지

• 좌측에 배치되는 아이콘은 가장 좌측에, 우측으로 배치되는 아이콘은 가장 우측으로 배치한다

Mobile WEB

• 모바일은 최근 출시된 고해상도 기기에 또렷한(crispy) 서비스 제공을 위하여 고해상도 이미지 분기 대응한다.
• 이외 일반 태그, 즉 일반 콘텐츠 이미지(썸네일등)는 기기 해상도별 분기하기가 어려워 @1.5x(480px) 이미지를 기본으로 사용함

CSS 이미지

• 모바일 고해상도 이미지 대응에 따라 디자인 표현을 위한 image 사용 및 image 폰트(text 표현을 위한 image) 사용을 최소화하며, CSS3 / 시스템 폰트 활용을 높임

프로모션 이미지

• 프로모션 디자인 권장 형태는 `이미지 + 시스템폰트 혼합형` 임
• 통이미지 프로모션인 경우 이미지 용량에 따라 320 혹은 480 이미지로 대응 함

이미지 처리 프로세스

• 1.640 PSD 파일을 기준으로 마크업 진행
• 2.640 PSD 기준 이미지 sprite 작업 결과물을 480과 320으로 각각 리사이징 하여 사용
• 3.Merge 할 psd에 이미지를 배치할 시 20 * 20 그리드에 배치 한다. 단, shadow 효과가 들어간 이미지는 20 * 20 그리드에 배치하는데 이미지가 시작되는 지점은 4 * 4 그리드에 있도록 배치한다. (아래 그림 참고)

IR 효과

기법 종류

기법	내용
Phark Method (권장)	이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법
WA IR (권장)	이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리하는 방법
Farhner Image Replacement	이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 display:none 을 이용하여 화면에 안보이게 처리하는 방법
Dwyer Method	이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 width와 height를 각각 0으로 하여 글자를 숨기는 방법
Gilder/Levin Method	이미지로 대체할 엘리먼트 내에 빈 span태그를 추가하여 배경이미지를 설정하고 'position:absolute' 스타일을 이용하여 글자를 덮는 방법
Leahy/Langridge Method	이미지로 대체할 엘리먼트에 배경이미지를 설정하고 padding-top의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법
span padding : applied Method	이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span으로 감싼 후 블럭화하여 padding-top의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법
script replace Method	자바스크립트를 이용하여 이미지로 대체할 엘리먼트의 텍스트를 img태그로 교체하는 방법

CSS Reference

Attribute	Description	Version
margin	요소의 바깥쪽 여백을 설정합니다.	CSS1
margin-top	요소의 바깥쪽 위쪽 여백을 설정합니다.	CSS1
margin-right	요소의 바깥쪽 오른쪽 여백을 설정합니다.	CSS1
margin-left	요소의 바깥쪽 왼쪽 여백을 설정합니다.	CSS1
margin-bottom	요소의 바깥쪽 아래쪽 여백을 설정합니다.	CSS1
padding	안쪽 여백을 설정하는 속성입니다.	CSS1
padding-top	상단의 안쪽 여백을 설정합니다.	CSS1
padding-bottom	하단의 안쪽 여백을 설정합니다.	CSS1
padding-left	좌측의 안쪽 여백을 설정합니다.	CSS1
padding-right	우측의 안쪽 여백을 설정합니다.	CSS1
width	요소의 가로 값을 설정합니다.	CSS1
height	요소의 세로 값을 설정합니다.	CSS1
text-align	문서를 정렬할 때 쓰는 속성으로 text-align 은 block요소 안에 있는 inline요소를 정렬합니다.	CSS1
text-decoration	텍스트를 몇가지 형태로 꾸밀 수 있는 속성입니다.	CSS1
text-transform	문자를 대문자로 설정해줍니다.(none:기본값)(capitaliza:첫글자만 대문자)(uppercase:모두 대문자)(lowercase:모두 소문자)	CSS1
line-height	문장과 문장 사이의 간격을 설정합니다.	CSS1
letter-spacing	글자 사이의 간격을 설정합니다.	CSS1
font-size	폰트사이즈를 설정합니다.	CSS1
font-weight	폰트 두께를 설정합니다.	CSS1
font-family	font-family 속성은 글꼴을 의미합니다.	CSS1
font-style	글씨의 스타일을 주는 속성입니다.하지만 사실상, 이탤릭 형식으로 표현할 때 사용합니다.	CSS1
color	폰트 색을 설정합니다.	CSS1
float	블록 요소의 정렬 상태를 설정 합니다.	CSS1
clear	float 요소의 성질을 차단합니다.	CSS3
background	백 그라운드 속성을 설정합니다.	CSS1
background-attachment	백 그라운드 이미지의 고정여부를 설정합니다.	CSS1
background-color	백 그라운드 색을 설정합니다.	CSS1
background-blend-mode	백 그라운드 색을 혼합 했을 때의 상태를 설정합니다.	CSS3
background-clip	백 그라운드 색의 영역을 설정합니다..	CSS3
background-image	백 그라운드 이미지를 설정합니다.	CSS1
background-origin	백그라운드 방향을 설정합니다.	CSS3
background-position	백그라운드 이미지 위치를 설정합니다.	CSS1
background-repeat	백그라운드 반복 여부를 설정합니다.	CSS1
background-size	백그라운드 이미지 크기를 설정합니다.	CSS3
border	테두리 속성을 설정합니다.	CSS1
border-top	테두리 상단의 속성을 설정합니다.	CSS1
borde-bottom	테두리 하단의 속성을 설정합니다.	CSS1
border-right	테두리 우측의 속성을 설정합니다.	CSS1
border-left	테두리 좌측의 속성을 설정합니다.	CSS1
border-color	테두리의 컬러를 지정합니다.컬러 지정은 상하좌우 각각 지정 가능	CSS1
border-top-color	테두리 상단의 색을 설정합니다.	CSS1
border-right-color	테두리 우측의 색을 설정합니다.	CSS1
border-bottom-color	테두리 하단의 색을 설정합니다.	CSS1
border-left-color	테두리 좌측의 색을 설정합니다.	CSS1
border-style	테두리 종류로 "solid", "dashed", "dotted" 등으로 지정할 수 있습니다.	CSS1
border-top-style	테두리 상단의 스타일을 설정합니다.	CSS1
border-right-style	테두리 우측의 스타일을 설정합니다.	CSS1
border-bottom-style	테두리 하단의 스타일을 설정합니다.	CSS1
border-left-style	테두리 좌측의 스타일을 설정합니다.	CSS1
border-width	테두리 두께로, px을 이용하여 설정합니다.	CSS1
border-top-width	테두리 상단의 두께을 설정합니다.	CSS1
border-right-width	테두리 우측의 두께을 설정합니다.	CSS1
border-bottom-width	테두리 하단의 두께을 설정합니다.	CSS1
border-left-width	테두리 좌측의 두께을 설정합니다.	CSS1
overflow	block 레벨의 부모요소를 자식이 넘쳤을 때 자식요소를 스크롤바를 랜더링해서 자를지 혹은 그냥 보여 줄지를 설정합니다.	CSS1
text-overflow	CSS3에 추가된 속성으로 요소 내에 문자열의 넘침 현상을 처리하는 방법을 설정합니다.	CSS1
white-space	내부에서의 자동 줄 바꿈 여부를 나타내는 값을 설정합니다. 이 속성은 상속됩니다.	CSS1
cursol	cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 설정합니다.	CSS1
display	요소를 어떻게 보여줄지를 설정합니다.	CSS1
position	요소의 위치를 설정 합니다.	CSS1
position	태그의 위치 표시 상태를 의미합니다.	CSS1
visibility	태그의 위치 표시 상태를 의미합니다.	CSS1
opacity	태그의 위치 표시 상태를 의미합니다.	CSS1
vertical		CSS1

margin

• margin-top : 10px;
• margin-right : 11px;
• margin-bottom : 12px;
• margin-left : 13px;
• margin : 10px 11px 12px 13px; (위쪽, 오른쪽, 아래쪽, 왼쪽)
• margin : 10px 11px 12px; (위쪽, 왼쪽/오른쪽, 아래쪽)
• margin : 10px 11px; (위쪽/아래쪽, 왼쪽/오른쪽)
• margin : 10px; (위쪽/오른쪽/아래쪽/왼쪽)
• margin : auto; (자동값, 기본값)
• margin : 0 auto; (블록구조를 가운데 정렬할 때)

text-align

• text-align : left; (텍스트를 왼쪽으로 정렬)
• text-align : right; (텍스트를 오른쪽으로 정렬)
• text-align : center; (텍스트를 가운데로 정렬)
• text-align : justify; (텍스트를 양쪽으로 정렬)

font-size

• font-size : xx-small;
• font-size : x-sall;
• 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 : 12px;
• font-size : 16%;

float

• float:none; (float의 성질을 적용하지 않습니다.)
• float:left; (블록요소를 왼쪽으로 정렬합니다.)
• float:right; (블록요소를 오른쪽으로 정렬합니다.)
• float로 인한 영역 깨짐 방지법
  1. 깨지는 영역에 똑같이 float을 사용합니다.(비추천)또 넣어줘야함
  2. float의 성질을 차단하는 clear를 사용합니다.(단점)깨지는 영역을 찾기힘듬
  3. float을 사용한 부모 박스한테 overflow:hidden을 사용합니다.(내가 지정한 영역이외에는 안보이게하기)
  4. float을 사용한 부모 박스한테 clearfix를 사용합니다.

background-attachment

• background-attachment :scroll(기본값)
• background-attachment :fixed;
• background-attachment :local;

background-position

• background-position :left-top;
• background-position :left-center;
• 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 :10% 50%;
• background-position :10px 50px;
• background-position :10% 50%, 20% 50%;

background-repeat

• background-repeat :repeat; (기본값)
• background-repeat :repeat-x;
• background-repeat :repeat-y;
• background-repeat :no-repeat;

background-size

• background-size :auto; (기본값)
• background-size :120px 500px;
• background-size :50% 120%;
• background-size :contain; (이미지를 요소 크기에 맞게 설정:가로와 세로 비율이 유지)
• background-size :cover; (이미지를 요소 크기에 맞게 설정:화면크기에 맞게 공백없이 설정

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-style :dotted dashed solid outset;

border-width

• border-width : medium(3px)
• border-width : thin(1px)
• border-width : thick(5px)
• border-width : 4px

text-transform

• text-transform : none;
• text-transform : capitaliza;
• text-transform : uppercase;
• text-transform : lowercase;

overflow

• overflow : visible;(기본값)
• overflow : hidden;
• overflow : scroll;
• overflow : auto;

display

• display : inline;
• display : block;
• display : flex;
• display : inline-block;
• display : inline-flex;
• display : inline-table;
• display : list-item;
• display : table;
• display : none;

cursor

• cursor : alias;
• cursor : all-scroll;
• cursor : auto;
• cursor : cell;
• cursor : context-menu;
• cursor : col-resize;
• cursor : copy;
• cursor : crosshair;
• cursor : e-resize;
• cursor : ew-resize;
• cursor : grab;
• cursor : grabbing;
• cursor : help;
• cursor : move;
• cursor : n-resize;
• cursor : ne-resize;
• cursor : new-resize;
• cursor : ns-resize;
• cursor : nw-resize;
• cursor : no-drop;
• cursor : none;
• cursor : not-allowed;
• cursor : pointer;
• cursor : progress;
• cursor : row-resize;
• cursor : s-resize;
• cursor : se-resize;
• cursor : sw-resize;
• cursor : text;
• cursor : vertical-text;
• cursor : wait;
• cursor : zoom-in;
• cursor : zoom-out;

position

• position: static;(기본값)
• position: absolute;(절대적인 위치)
• position: relative;(상대적인 위치, 기준값)
• position: fixed;(고정적인 위치)