CSS

CSS

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

CSS Selector

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

이미지 스프라이트

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 된다.

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.

이미지 타입 선택

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

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

이미지 스프라이트 가이드

타이틀 이미지

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

버튼 이미지

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

아이콘 이미지

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


이미지 용량 및 크기

PC Web

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

Mobile Web

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

IR효과

(Image Replacement)의미가 포함된 이미지에 alt를 사용하는 대신, 이미지를 배경으로 처리하고, 그 내용을 텍스트로 넣은 후 텍스트는 css로 숨겨버리는 기법이다.
이렇게하면, 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다.

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' 스타일을 이용하여 글자를 덮는 방법을 말한다.

CSS Reference

Tag Description Version
margin 요소(태그)의 바깥쪽 여백을 설정합니다. CS1
margin-top 요소(태그)의 바깥쪽 위쪽 여백을 설정합니다. CS1
margin-right 요소(태그)의 바깥쪽 오른쪽 여백을 설정합니다. CS1
margin-bottom 요소(태그)의 바깥쪽 아래쪽 여백을 설정합니다. CS1
margin-left 요소(태그)의 바깥쪽 왼쪽 여백을 설정합니다. CS1
padding 블럭요소의 안쪽 여백을 설정합니다. CS1
padding-top 블럭요소의 위 안쪽 여백 설정합니다. CS1
padding-right 블럭요소의 오른쪽 안쪽 여백을 설정합니다. CS1
padding-bottom 블럭요소의 아래쪽 안쪽 여백을 설정합니다. CS1
padding-left >블럭요소의 왼쪽 안쪽 여백을 설정합니다. CS1
width 요소의 너비값을 지정한다. 바깥쪽부터 기준 CS1
height 요소의 높이값. 안쪽 컨텐츠에 의해 정해진다. CS1
text-align 글씨를 정렬할 때 필요합니다. CS1
text-decoration 글자 라인 속성을 설정합니다. CS1
text-transform 텍스트를 대문자나 소문자로 변경합니다. CS1
line-height 줄 사이의 간격을 지정하는 데 사용됩니다. CS1
letter-spacing 글자 사이의 간격을 설정합니다. CS1
font-size 글씨의 크기를 조절할 때 사용합니다. CS1
font-weigh 폰트 두께 속성을 설정합니다. CS1
font-family 폰트 종류를 설정합니다. CS1
font-style 폰트 스타일 속성을 설정합니다. CS1
color 글씨의 색상을 입력할 때 필요합니다. CS1
float 블록 요소의 정렬 상태를 설정합니다. CS1
clear float요소의 성질을 차단합니다. CS1
background 백그라운드 속성을 설정합니다. CS1
background-attachment 백그라운드 이미지의 고정 여부를 설정합니다. CS1
background-blend-mode 백그라운드 색을 혼합했을 때의 상태를 설정합니다. CS3
background-clip 백그라운드 색의 영역을 설정합니다. CS3
background-image 백그라운드 이미지를 설정합니다. CS1
background-color 백그라운드 색을 설정합니다. CS1
background-origin 백그라운드 방향를 설정합니다. CS3
background-position 백그라운드 이미지 위치를 설정합니다. CS1
background-repeat 백그라운드 이미지 반복 여부를 설정합니다. CS1
background-size 백그라운 이미지 크기를 설정합니다. CS3
border-right 오른쪽 테두리 속성을 설정합니다. CS1
border-bottom 아래쪽 테두리 속성을 설정합니다. CS1
border-left 왼쪽 테두리 속성을 설정합니다. CS1
border-color 테두리 색 속성을 설정합니다. CS1
border-top-color 위쪽 테두리 색 속성을 설정합니다. CS1
border-right-color 오른쪽 테두리 색 속성을 설정합니다. CS1
border-bottom-color 테두리 아래쪽 색 속성을 설정합니다. CS1
border-left-color 왼쪽 테두리 색 속성을 설정합니다. CS1
border-style 테두리 스타일 속성을 설정합니다. CS1
border-top-style 위쪽 테두리 스타일 속성을 설정합니다. CS1
border-right-style 오른쪽 테두리 스타일 속성을 설정합니다. CS1
border-bottom-style 아래쪽 테두리 스타일 속성을 설정합니다. CS1
border-left-style 왼쪽 테두리 스타일 속성을 설정합니다. CS1
border-width 테두리 두께 속성을 설정합니다. CS1
border-top-width 위쪽 테두리 두께 속성을 설정합니다. CS1
border-right-width 오른쪽 테두리 두께 속성을 설정합니다. CS1
border-bottom-width 아래쪽 테두리 두께 속성을 설정합니다. CS1
border-left-width 왼쪽 테두리 두께 속성을 설정합니다. CS1
overflow 지정한 영역에 요소들이 벗어났을 때 속성을 설정한다. CS2
text-overflow 글자들이 속한 영역에서 벗어났을 때 어떤 방식으로 보여줄지를 지정한다. CS3
white-space 엘리먼트 안에서 공백문자를 어떻게 처리할지 지정한다. CS1
cursor 해당 요소에 마우스 포인터가 위치할 경우 커서의 타입(모양)을 지정한다. CS2
display 인라인(inline) 타입인지 블럭(block) 타입인지 등에 관한 해당 요소의 유형을 지정한다. CS1
position 속성은 해당 요소가 문서나 브라우저 상에서 어디에 위치 될지를 지정한다. CS2

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: lager;
  • 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

    • baground-attachment : scroll(기본값)
    • baground-attachment : fixed;(이미지를 고정시킨다.)
    • baground-attachment : local;

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

background-position

  • 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: capitalizee
  • 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-ltem;
  • 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 : non;e
  • 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 : w-resize;
  • cursor : wait;
  • cursor : zoom-in;
  • cursor : zoom-out;

dposition

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