CSS

CSS

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

CSS Selector

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

이미지 스프라이트

  • 이미지 스프라이트는 단일 이미지에 들어있는 이미지 모음입니다.
  • 이미지 스프라이트를 사용하면 서버에 요청 수를 줄이고 대역폭도 절약할 수 있습니다
  • 여러개의 이미지를 따로 두고 코딩하는게 아니라 하나의 png 파일에 모아서 코딩하는 방식입니다.
  • background-position 을 이용해서 배경의 위치를 조절해 주는 방법입니다
  • 이미지 스프라이트 방법

    • 타이틀 이미지
    • 버튼 이미지
    • 아이콘 이미지

IR 효과

  • 텍스트를 이미지로 대처하는 방식
  • 텍스트 형태로 되어있는 태그의 background 속성을 통해 이미지를 불러오고 text-indent 속성을 통해 텍스트를 날려버리는 형태의 방식입니다
  • 이미지를 배경으로 처리하고, 그 내용을 텍스트로 넣은 후 텍스트는 css로 숨겨버리는 기법이다
  • "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다

  • IR 기법 종류

    1. Text-indent를 활용한 IR기법 : Text-indent를 활용한 IR 기법은 가장 손쉽게 사용할 수 있는 방법입니다. 간단한 사용 방법은 text-indent 속성 값에 현재 사용되고 있는 디스플레이의 해상도보다 작은 음의 정수 값을 주는 것입니다.
      • ‘span{text-indent: -9999’}와 같이 사용할 수 있습니다.

    2. CSS의 위치 속성과 overflow: hidden을 사용하는 방법 : IR 기법은 원리상 text-indent와 유사합니다. 사용 방법은 텍스트가 있는 <span> 또는 <div> 등의 요소에 디스플레이 해상도 보다 훨씬 작은 음의 정수 값으로 위치를 부여한 다음, 높이와 너비를 1px 정도로 작게 설정합니다. 그다음 overflow: hidden과 position: absolute로 대체 텍스트를 화면에서 완전히 숨깁니다.

    3. 높이와 넓이를 0으로 설정하는 IR기법 : 이 방법은 대체 텍스트 글자가 들어가는 등의 요소의 높이와 너비를 0으로 지정하는 방법입니다. 먼저, 대체할 텍스트 요소에 BackGround 이미지를 설정한 다음 대체 텍스트가 포함되는 요소의 높이와 너비를 0으로 지정합니다.

    4. z-index를 활용한 IR기법 : z-index로 IR 기법을 사용했을 때의 특징은 만약 브라우저에서 CSS를 끄거나, 어떠한 이유로 웹 페이지에 적용된 CSS가 정상적으로 로드되지 않을 때 숨겨진 텍스트가 화면에 출력됩니다. 또한, position 속성을 사용하기 때문에 디바이스의 사양에 따라 성능에 영향을 줄 수 있습니다.


Attribute Description Version
margin 요소의 바깥쪽 여백을 설정합니다 CSS1
margin-top 요소의 바깥쪽 위쪽 여백을 설정합니다 CSS1
margin-right 요소의 바깥쪽 오른쪽 여백을 설정합니다 CSS1
margin-bottom 요소의 바깥쪽 아래쪽 여백을 설정합니다 CSS1
margin-left 요소의 바깥쪽 왼쪽 여백을 설정합니다 CSS1
padding 해당 요소의 상단,하단,오른쪽,왼쪽 여백을 한꺼번에 지정합니다 CSS1
padding-top 해당 요소의 내부 영역 상단에 간격을 지정한다. CSS1
padding-right 해당 요소의 내부 영역 오른쪽에 간격을 지정한다. CSS1
padding-bottom 해당 요소의 내부 영역 하단에 간격을 지정한다. CSS1
padding-left 해당 요소의 내부 영역 왼쪽에 간격을 지정한다. CSS1
width 가로 길이 설정, 바깥쪽부터 기준 CSS1
height 세로 길이 설정, 높이값, 안쪽 컨텐츠에 의해 정해짐 CSS1
text-align 텍스트 정렬 방식 설정 CSS1
text-decoration 텍스트에 효과를 주는 것으로 line 스타일과 관련이 있다. CSS1
text-transform 텍스트의 대문자화 속성을 지정한다 CSS1
line-height 문장과 문장 사이의 간격을 설정 CSS1
letter-spacing 텍스트 내에서 문자 간의 간격의 좁고 넓음의 여부를 지정한다. CSS1
font-size 폰트 크기를 설정 CSS1
font-weight 폰트를 굵게 또는 얇게 나타내는 것을 지정한다. CSS1
font-family 해당 요소에 사용되는 폰트의 종류를 정의한다 CSS1
font-style 속성은 폰트의 스타일(모양)을 지정한다. CSS1
color 폰트 색상값을 설정 CSS1
float 블록 요소의 정렬 상태를 설정합니다 CSS1
clear float 요소의 성질을 차단합니다 CSS1
background 백그라운 속성을 설정합니다 CSS1
background-attachment 백그라운 이미지의 고정 여부를 설정합니다 CSS1
background-mode 백그라운 색을 혼합 했을 때의 상태를 설정합니다 CSS3
background-color 백그라운 색을 설정합니다 CSS1
background-clip 백그라운 색의 영역을 설정합니다 CSS3
background-image 백그라운 이미지을 설정합니다 CSS1
background-origin 백그라운 방향을 설정합니다 CSS3
background-position 백그라운 이미지 위치를 설정합니다 CSS1
background-repeat 백그라운 이미지 반복 여부을 설정합니다 CSS1
background-size 백그라운 이미지 크기를 설정합니다 CSS1
border 전체 요소에 테두리 효과를 주는 것이다. CSS1
border-top 전체 테두리 중에서도 상단 부분에 효과를 준다. CSS1
borde-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 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. CSS2
text-overflow 글자들이 속한 영역에서 벗어났을 때 어떤 방식으로 보여줄지를 지정한다. CSS1
white-space 텍스트 관련 스타일 시트로 하얀색 공백 문자 처리 기능과 요소의 넓이를 넘어갔다면 자동으로 줄 바꿈을 할것인가 결정함 CSS1
cursor 마우스 오버시 이미지를 설정합니다. CSS1
display 인라인(inline) 타입인지 블럭(block) 타입인지 등에 관한 해당 요소의 유형을 지정한다. CSS1
position 해당 요소가 문서나 브라우저 상에서 어디에 위치 될지를 지정한다. CSS1
CSS1
CSS1
CSS1

margin

  • margin-tpo : 10px;
  • margin-right : 11px;
  • margin-bottom : 12px;
  • margin-left : 13px;
  • margin : 10px 11px 12px 13p; (위쪽, 오른쪽 아래쪽 왼쪽)
  • 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 : 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 : fixed;(고정)
  • background-attachment : locale;

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 top;
  • 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 : coner; (이미지를 요소 크기에 맞게 설정: 화면 크기에 맞게 공백없이 설정)

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-table;
  • display : list-item;
  • display : table;
  • display : none;

cursor

  • cursor : alias;
  • cursor : all-scroll;
  • cursor : auto;
  • cursor : cell;
  • cursor : context-menu;
  • cursor : resize;
  • cursor : copy;
  • cursor : crosshair;
  • cursor : defaulf;
  • 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-resiz;e
  • cursor : nw-resize;
  • cursor : no-drop;
  • cursor : none;
  • cursor : not-allowed;
  • cursor : pointer;
  • cursor : progress;
  • 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;

position

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