CSS

CSS

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

CSS Selector

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

이미지 스프라이트

여러 개의 이미지를 하나의 이미지로 합쳐서 웹 문서 전송 속도를 높이는 기법
이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있으므로 가볍고 관리가 편리한 장점이 있다.
  • 이미지 타입 선택
종류 PC web Mobile Web Mobile App
GIF 기본 사용가능 X
JPG 컬러 수 많거나 운영성 이미지 일때 운영성 이미지일 때 X
PNG-8 X 기본 반투명효과 없고 컬러가 적을 때
PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본
이미지 스프라이트 O O O
  • 이미지 스프라이트 가이드
    • 타이틀 이미지
    • 수직 정렬형 이미지에서 각 개체의 기본간격은 50px이나, 높이가 크지 않으면 25px 단위로 줄일 수 있다.
    • 수직 정렬형은 좌우에 텍스트가 배치되거나 사이즈가 고정이 아니면 적용한다.
    • 버튼 이미지
    • 바둑판형에서 각 개체의 기본간격은 10px 단위로 한다
    • 가로세로 사이즈가 고정일 경우 타일형으로 적용할 수 있다.
    • 아이콘이미지
    • 좌측에 배치되는 아이콘은 가장 좌측에, 우측으로 배치되는 아이콘은 가장 우측으로 배치한다.
    • GNB와 Tab 이미지
    • Off 된 상태인 Default 개체가 On 된 상태 바로 위에 있도록 한다.

IR 효과

  • 의미가 포함되어 있는 이미지를 배경으로 처리하고 대신 전경에 상응하는 텍스트를 넣는 방법
  • 시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 '화면 낭독기를 사용하는 시각 장애인, 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의 값을 이미지의 높이만큼 주어 글자를 밑으로 밀어내어 숨기는 방법
    • script replace Method : 자바스크립트를 이용하여 이미지로 대체할 엘리먼트의 텍스트를 img태그로 교체하는 방법

CSS Reference

Attribute Description Version
margin 요소의 바깥쪽 여백을 설정 CSS1
margin-top 요소의 바깥 아래쪽 위쪽 여백을 설정 CSS1
margin-right 요소의 바깥 오른쪽 여백을 설정 CSS1
margin-left 요소의 바깥 왼쪽 여백을 설정 CSS1
margin-bottom 요소의 바깥 아래 여백을 설정 CSS1
padding 내용과 border 사이의 여백 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
font-size 폰트 사이즈를 설정 CSS1
font-weight 글자 두께 CSS1
font-family 글자 글꼴 CSS1
font-style 글자 스타일을 설정 CSS1
color 폰트 색상을 설정 CSS1
float 블록 요소의 정렬 상태를 설정 CSS1
clear float 요소의 성질을 차단 CSS1
background 배경 속성을 설정 CSS1
background-color 배경 색상을 설정 CSS1
background-attachment 배경 이미지의 고정 여부를 설정 CSS1
background-blend-mode 배경 색을 혼합 했을 때의 상태를 설정 CSS3
background-clip 배경 색의 영역을 설정 CSS3
background-image 배경 이미지를 설정 CSS1
background-origin 배경 방향을 설정 CSS3
background-position 배경 이미지 위치를 설정 CSS1
background-repeat 배경 이미지 반복 여부를 설정 CSS1
background-size 배경 이미지 크기 설정 CSS1
border CSS1
border-top 위 ″ CSS1
border-right 오른쪽 ″ CSS1
border-left 왼쪽 ″ CSS1
border-bottom 아래 ″ CSS1
border-color 선 색 CSS1
border-top-color 위 ″ CSS1
border-right-color 오른쪽 ″ CSS1
border-bottom-color 아래 ″ CSS1
border-left-color 왼쪽 ″ CSS1
border-style 4방향의 테두리에 적용될 선의 스타일을 지정 CSS1
border-top-style 위 ″ CSS1
border-right-style 오른쪽 ″ CSS1
border-left-style 왼쪽 ″ CSS1
border-bottom-style 아래 ″ CSS1
border-width 선의 width 값을 지정 CSS1
border-top-width 위 ″ CSS1
border-right-width 오른쪽 ″ CSS1
border-left-width 왼쪽 ″ CSS1
border-bottom-width 아래 ″ CSS1
overflow 요소의 박스에 내용이 더 길 때 사용하는 방법 CSS1
text-overflow 박스 안에 내용이 넘칠 때 텍스트를 처리하는 방법 CSS1
white-space 텍스트가 width를 넘어갈 때 사용하는 방법 CSS1
cursor 마우스 커서의 형태를 지정 CSS1
display 4가지 속성값이 사용되며, 요소의 성질을 설정 CSS1
position 위치값을 설정 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: midium;
  • ----------------까지 안씀 (옛날방식)----------------
  • font-size: 12px;
  • font-size: 16%;

float

  • float:none; (float의 성질을 적용하지 않습니다.)
  • float:left; (블록요소를 왼쪽으로 정렬합니다.)
  • float:right; (블록요소를 오른쪽으로 정렬합니다.)
  • float로 인한 영역 깨짐 방지법
    1. 깨지는 영역에 똑같이 float 사용 (x)
    2. float의 성질을 차단하는 clear를 사용 (x)
    3. float을 사용한 부모 박스한테 overflow:hidden을 사용
    4. float을 사용한 부모 박스한테 clearfix를 사용

background-attachment

  • background-attachment : scroll(기본값) -안써도 설정되어있다. (나중에 필요하면 쟤를 빼야함)
  • background-attachment : fixed; - 이미지 고정
  • background-attachment : local; - 글씨와 같이 움직임

background-positon

  • background-positon : left top;
  • background-positon : left center;
  • background-positon : left bottom;
  • background-positon : right top;
  • background-positon : right center;
  • background-positon : right bottom;
  • background-positon : center top;
  • background-positon : center; (중복은 한번만 써도 된당)
  • background-positon : center bottom;
  • background-positon : 10% 50%;
  • background-positon : 10px 50px;
  • background-positon : 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 groove ridge;

border-width

  • border-width: medium
  • border-width: thin
  • border-width: thick
  • border-width: 4px

text-transform

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

overflow

display

cursor

position