CSS

CSS

CSS(Cascading Style Sheets)은 HTML을 꾸며주는 스타일 시트입니다. 즉 웹 페이지를 꾸미고 디자인 작업을 도와주는 언어입니다.

CSS Selector

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



이미지 스프라이트

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.
운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도모한다.
  • 스프라이트는 수직정렬 (vertical)형과 바둑판(tile)형 중 서비스에 따라 선택하여 사용
  • 수직 정렬형 스프라이트는 개체 수가 늘어남에 따라 공간 또한 늘어나 용량 이슈가 발생하므로 모바일 환경에서는 바둑판형 스프라이트로 진행한다.
  • 각 스프라이트 집합은 타이틀, 버튼, 아이콘, 메뉴(GNB 또는 Tab), 숫자 등 용도별로 나누어 그룹핑

이미지 타입 선택

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

이미지 스프라이트 가이드

PC Web

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


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


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


GNB와 Tab 이미지
  • Off 된 상태인 Default 개체가 On 된 상태 바로 위에 있도록 한다.


Mobile Web

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

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

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

이미지 처리 프로세스
  1. 640 PSD 파일을 기준으로 마크업 진행
  2. 640 PSD 기준 이미지 sprite 작업 결과물을 480과 320으로 각각 리사이징 하여 사용
    • image의 size는 4의 배수 ex) image size 40px * 120px, 600px * 800px..
    • Merge 할 psd에 이미지를 배치할 시 20 * 20 그리드에 배치 한다.
      단, shadow 효과가 들어간 이미지는 20 * 20 그리드에 배치하는데 이미지가 시작되는 지점은 4 * 4 그리드에 있도록 배치한다. (아래 그림 참고)

이미지 용량 및 크기

PC Web

  • 최대 사이즈: 가로 1024px X 세로 1024px
    (모바일 환경에서 pc웹에 접속하였을 때, 다운로드된 이미지의 사이즈가 1024px이 넘어갈 때 해당 이미지가 올바르게 표시되지 않으므로 pc웹에서 가로/세로 사이즈의 제한을 둔다.

Mobile Web

  • CSS image : 스프라이트 된 이미지의 용량이 60KB 를 넘지 않도록 한다.
  • promotion image : 스프라이트 된 이미지의 용량이 400KB 를 넘지 않도록 한다.




IR 효과(Image Replacement)

의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로, 시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다.
  • 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의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법

  • Leahy/Langridge Method

    자바스크립트를 이용하여 이미지로 대체할 엘리먼트의 텍스트를 img태그로 교체하는 방법

  • script replace Method

    이미지로 대체할 엘리먼트에 배경이미지를 설정하고 padding-top의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법

예시 참고


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-right 요소의 오른쪽 내부 여백을 설정합니다. CSS1
padding-bottom 요소의 아래쪽 내부 여백을 설정합니다. CSS1
padding-left 요소의 왼쪽 내부 여백을 설정합니다. CSS1
width 요소의 너비값을 설정합니다. CSS1
height 요소의 높이값을 설정합니다. CSS1
text-align 텍스트 정렬방식 설정합니다. CSS1
text-decoration 텍스트에 밑줄, 윗줄, 가운데줄이나 깜빡거림의 장식적인 요소를 지정합니다. CSS1
text-transform 텍스트의 대/소문자를 설정합니다.(한글에서는 불가능) CSS1
line-height 텍스트 줄 간격을 설정합니다. CSS1
letter-spacing 글자 사이의 간격을 설정합니다. CSS1
font-size 폰트 사이즈를 설정합니다. CSS1
font-weight font-weight 속성은 글자 두께를 의미한다. CSS1
font-family font-family 속성은 글꼴을 의미한다 CSS1
font-style font-family에서 지정된 폰트의 스타일을 지정합니다(normal, italic, oblique, inherit) CSS1
color 폰트 컬러를 설정합니다. CSS1
float 블록 요소의 정렬 상태를 설정합니다. CSS1
clear float 요소의 성질을 차단합니다. CSS1
background 백그라운드 속성을 설정합니다. CSS1
background-attachment 백그라운드 이미지의 고정 여부를 설정합니다. CSS1
background-blend-mode 백그라운드 색을 혼합 했을 때의 상태를 설정합니다. CSS3
background-clip 백그라운드 색의 영역을 설정합니다. CSS3
background-image 백그라운드 이미지를 설정합니다. CSS1
background-color 백그라운드 색을 설정합니다. CSS1
background-origin 백그라운드 방향을 설정합니다. CSS3
background-position 백그라운드 이미지 위치를 설정합니다. CSS1
background-repeat 백그라운드 이미지 반복 여부를 설정합니다. CSS1
background-size 백그라운드 이미지 크기를 설정합니다. CSS3
border 요소의 테두리 너비 사이즈, 색상, 스타일을 설정합니다. CSS1
border-top 위쪽 테두리 너비, 색상, 스타일을 설정합니다. CSS1
border-right 오른쪽 테두리 너비, 색상, 스타일을 설정합니다. CSS1
border-bottom 아래쪽 테두리 너비, 색상, 스타일을 설정합니다. 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 박스 테두리의 스타일을 지정합니다. CSS1
border-top-style 박스의 위쪽 테두리의 스타일을 지정합니다. CSS1
border-right-style 박스의 오른쪽 테두리의 스타일을 지정합니다. CSS1
border-bottom-style 박스의 아래쪽 테두리의 스타일을 지정합니다. CSS1
border-left-style 박스의 왼쪽 테두리의 스타일을 지정합니다. CSS1
border-width 박스의 테두리의 두께를 지정합니다. CSS1
border-top-width 박스의 위쪽 테두리 영역의 두께(너비)를 지정합니다. CSS1
border-right-width 박스의 오른쪽 테두리 영역의 두께(너비)를 지정합니다. CSS1
border-bottom-width 박스의 아래쪽 테두리 영역의 두께(너비)를 지정합니다. CSS1
border-left-width 박스의 왼쪽 테두리 영역의 두께(너비)를 지정합니다. CSS1
overflow 내용이 박스보다 큰 경우 밖으로 넘친 부분을 어떻게 표시할지를 지정한다. CSS1
text-overflow 요소 내에 문자열의 넘침 현상을 처리하는 방법을 결정한다. clip-텍스트를 잘라냄 /ellipsis-말줄임표(...)를 표시 CSS1
white-space 공백문자를 어떻게 다룰것인가를 정의 한다.(한줄만 출력) normal / pre / nowrap / inherit CSS1
cursor 마우스 오버시 이미지를 설정합니다. CSS1
display 요소의 성질을 설정합니다. (inline/block) CSS1
position 요소의 위치를 설정합니다. 값:static/relative/absolute/fixed/inherit CSS1
visibility CSS1
opacity 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-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: 16px;
  • 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 : pixed;
  • background-attachment : local;

background-position

  • background-position : left top;
  • background-position : left center;
  • background-position : left bottom;
  • background-position : rignt 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: dashed double dotted inset;

border-width

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

text-transform

  • text-transform: none;
  • text-transform: capitalize;
  • 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 :default;
  • cursor :e-resize;
  • cursor :ew-resize;
  • cursor :grab;
  • cursor :grabbing;
  • cursor :help;
  • cursor :move;
  • cursor :n-resize;
  • cursor :ne-resize;
  • cursor :nesw-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;
  • cursor :w-resize;
  • cursor :wait;
  • cursor : zoom-in;
  • cursor :zoom-out;
  • 예시

position

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