CSS

autumn-code 2024. 8. 28. 16:00

CSS Reference

CSS

CSS HTML을 꾸며주는 스타일 시트입니다.

HTML은 웹 사이트의 몸체를 담당한다면, CSS는 옷과 액세사리 같은 꾸미는 역할을 담당합니다.

CSS Selector

Tage	Type	Description	Version
.	.class{color:#fff;}	클래스 선택자	CSS1
#	#id{color:#fff;}	아이디 선택자	CSS1
*	*{margin:0; padding:0;}	전체 선택자	CSS2
element	div{backfround:#fff;}	요소 선택자	CSS1
element > element	div > p{color:#fff;}	자식 선택자	CSS1
element + element	div + p{color:#fff;}	형제 선택자	CSS2
[attribute]	div[class] {color: #fff;}	속성 선택자	CSS2
[attribute=value]	div[class="white"] {color: #fff;}	속성 선택자	CSS2
[attribute~=value]	div[class~="white"] {color: #fff;}	속성 선택자(value값이 포함한 요소를 선택)	CSS2
[attribute^=value]	div[class^="white"] {color: #fff;}	속성 선택자(value값으로 시작하는 요소를 선택)	CSS3
[attribute*=value]	div[class*="white"] {color: #fff;}	속성 선택자(value 값을 포함한 요소를 선택)	CSS3
[attribute$=value]	div[class$="white"] {color: #fff;}	속성 선택자(value값으로 끝나는 요소를 선택)	CSS3

요소를 선택하여 속성을 줄 수 있습니다.

id 선택자
- 하나의 태그만 식별하기 위한 선택자이다.
- 하나의 태그에 하나만 사용할 수 있다.
- "#"으로 표시 한다.

class 선택자
- 여러 개의 태그를 식별하기 위한 선택자이다.
- 하나의 태그에 여러개를 사용할 수 있다.
- "."으로 표시한다.

CSS Color

CSS 색상표현은 4 가지 방법이 있습니다.

RGB/RGBA
- RGB 값은 #RRGGBB(red,green,blue) 형식의 16진수 색상 값을 사용하여 지정할 수도 있다.
- RGBA 색상은 rgba(적색, 녹색, 청색, 투명도)의 형태로, RGB의 색상 값에 알파채널을 확장한 것으로 투명도를 추가로 지정할 수 있게 한 것이며, 0.0(투명)~1.0(불투명) 사이의 값을 가지게 된다.
HSL/HSLA
- HSL 색상은 hsl(색조, 채도, 명도)의 형태로 색조, 채도 및 밝기를 원통형의 좌표를 이용해 나타낸다.
- HSLA 색상은 hsla(색조, 채도, 명도, 투명도)의 형태로, 위에서 설명한 HSL 색상 값에 알파채널을 확장한 것으로 투명도를 추가로 지정할 수 있게 한 것이며, 0.0(투명)~1.0(불투명) 사이의 값을 가지게 된다.
헥사코드
- Hexadecimal은 16진법을 의미합니다
- 샵(#)기호 이후의 여섯자리의 숫자가 온다.
- 첫번째,두번째 숫자는 빨간색(RED)의 정도를 의미한다.
- 세번째,네번째 숫자는 초록색(GREEN)의 정도를 의미한다.
- 다섯번째,여섯번째 숫자는 파란색(BLUE)의 정도를 의미한다.
- 숫자가 클수록 정도(색의 농도)가 높아(짙어)진다.
키워드
- 미리 정의된 이름을 가진 색상
- 17개의 표준 색상 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow

CSS 선언 방법

CSS 선언하는 방법은 3가지 입니다

외부 스타일 시트(External Style Sheet) : 외부 CSS 파일과 연결
내부 스타일 시트(Internal Style Sheet) : head 태그 안에 정의
요소 스타일 시트(Inline Style Sheet) : 해당 태그 안에 정의

float으로 인한 영역 깨짐(heigt:0) 방지법

float을 사용하면 height 값을 0으로 인식합니다.

깨지는 영역에 똑같이 float을 사용합니다.(x)
float의 성질을 차단하는 clear:both를 사용합니다.
float을 사용한 부모박스한테 overflow: hidden을 사용합니다.(O)

절대주소와 상대주소

절대주소: 웹 주소에서 https://를 통해 이동하는 주소이다.
상대주소: 웹 주소에서 ../또는./또는/폴더명/파일이름.확장자 만 되어있는 주소이다.
하위폴더 : <a href = "하위폴더명/파일명">연결할 문서</a>
상위폴더 : <a href = "../파일명">상세안내</a>
같은위치 : <a href = "../하위폴더명/파일명">연결할 문서</a>

이미지 표현 방법

웹 문서에서 이미지를 표현 할 수 있는 방법은 3가지가 있습니다.

<img>태그를 통해서 넣는 방법 : 이미지에 의미가 있을 때

<img src="img/icon.png" alt="아이콘" />
<img src="img/icon-1.png" alt="아이콘-1" />
<img src="img/icon-2.png" alt="아이콘-2" />
<img src="img/icon-3.png" alt="아이콘-3" />
<img src="img/icon-4.png" alt="아이콘-4" />
<img src="img/icon-5.png" alt="아이콘-5" />

CSS background -image : 이미지가 의미가 없을 때

	
    <a href="#" style="width:100px; height:100px; background:#ccc; display:inline-block; background-image:url(img/icon.png);"> </a>
    <a href="#" style="width:100px; height:100px; background:#ccc; display:inline-block; background-image:url(img/icon-1.png);"> </a>
    <a href="#" style="width:100px; height:100px; background:#ccc; display:inline-block; background-image:url(img/icon-2.png);"> </a>
    <a href="#" style="width:100px; height:100px; background:#ccc; display:inline-block; background-image:url(img/icon-3.png);"> </a>
    <a href="#" style="width:100px; height:100px; background:#ccc; display:inline-block; background-image:url(img/icon-4.png);"></a>
    <a href="#" style="width:100px; height:100px; background:#ccc; display:inline-block; background-image:url(img/icon-5.png);"></a>

이미지 스프라이트 기법을 통해서 넣는 방법

	<spen style="display:inline-block; width:100px; height:100px; background-image :url(img/iconset.png);background-color#ffff;background-position: 17px 17px; border-radius:50%" > </spen>
	<spen style="display:inline-block; width:100px; height:100px; background-image :url(img/iconset.png);background-color#ffff;background-position: 17px -185px; border-radius:50%" > </spen>
    <spen style="display:inline-block; width:100px; height:100px; background-image :url(img/iconset.png);background-color#ffff;background-position: 17px -385px; border-radius:50%" > </spen>
    <spen style="display:inline-block; width:100px; height:100px; background-image :url(img/iconset.png);background-color#ffff;background-position: 17px -585px; border-radius:50%" > </spen>
    <spen style="display:inline-block; width:100px; height:100px; background-image :url(img/iconset.png);background-color#ffff;background-position: 17px -785px; border-radius:50%" > </spen>

이미지 스프라이트

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 한번에 다운받는 시스템입니다.

여러번의 서버요청을 한 번으로 줄일 수 있습니다.
이미지 수정이나 관리가 간편합니다.
웹 접근성을 준수하기 위해서는 IR효과를 설정해야 합니다

IR 기법

IR 기법은 이미지 대체텍스트 제공을 위한 CSS기법입니다.

Css 콘텐츠 출력과 스크린리더 이슈

스크린리더가 발전하고 브라우저에서도 접근성 관련 api 기능이 발전하면서 스크린리더에 따라 css로 만들어진 텍스트 콘텐츠들도 읽을 수 있게 되었습니다
그런데 아이콘 폰트 클래스를 적용할 경우 특정 클래스의 경우 의미 없는 문자 코드가 css 콘텐츠에 포함되어 있어 스크린리더가 이러한 무의미한 텍스트를 읽게될수 있습니다. 아이콘에 대한 설명이 포함되어 있지 않은 이상 스크린리더 사용자에게 이러한 정보는 아무런 의미를 가지지 못하므로 aria-hidden=”true” 를 사용하여 이러한 의미 없는 요소들이 음성출력되지 않도록 해 주어야 합니다. 이것은 의미 없는 이미지에 alt=”” 속성을 적용하여 아예 이미지 자체가 음성출력되지 않도록 하는 것과 같은 원리입니다.

스크린 리더 이슈
1. 의미 있는 아이콘이라 하더라도 일반 텍스트에 아이콘에 대한 내용을 포함하는 경우에는 아이콘에 대한 설명을 생략할 수 있습니다.
2. 상황에 따라 aria-label 혹은 css를 활용한 스크린리더 텍스트를 추가함으로써 스크린리더 사용자를 위한 추가 설명 제공하기 아티클을 참고하여 추가 정보 제공이 가능합니다.
3. 아이콘에 대한 설명을 툴팁 형태로 title 속성을 추가할수 있으나 해당 요소는 대부분의 스크린리더에서 지원되지 않습니다.

Font Awesome 자동접근성 설정

Font Awesome 웹페이지에 접속하여 이메일 계정을 등록합니다.
. 로그인하여 환경설정 페이지로 이동합니다.
. Font Awesome cdn 방식을 스크립트 혹은 css로 설정할 수 있는데 스크립트 방식으로 설정해야 자동 접근성 기능을 사용할 수 있습니다.
스크립트 방식으로 설정 후 자동 접근성 항목에 체크합니다. 그러면 앞에서 설명한 바와 같이 타이틀 속성만 추가해도 스크린리더 테스트를 자동으로 추가해주게 됩니다.

컨텐츠를 보이지 않게 하는 방법

disply: none <=> display :block // 영역 사라짐 //애니메이션X
visivility: hidden <=> wisivility :visibl // 영역유지 //애니메이션X
opacity: 0 <=> opacity: 1 // 영역 유지 //애니메이션O
width:0;hight:0; overflow: hidden(IR효과)

position:relative를 사용해야 하는 경우

position:abslute:의 기준점이 필요할 때
z-index를 사용해야 하는 경우 포지션 값이 없으면 relative를 사용하여 z-index값을 사용하여 인식시킬 수 있습니다.
요소의 위치를 유지한채 left,top,right,bottom의 위치 값을 사용하고 싶을 때

컨텐츠 요소를 가운데 오게 하는 방법

반응형 사이트를 만들 때 제일 많이 쓰는 기법이 컨텐츠 요소를 정 가운데 오게 하는 방법입니다.

인라인구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)

블록구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 요소(블록구조) : margin:0 auto; width값 설정, line-height: (height값과 동일하게)

요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
- 부모요소 : display:table;
- 자식요소 : display:table-cell, text-align:center; vertical-align:middle;

절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);

만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);

절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;

CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
- 부모요소 : height 값 설정
- 자식요소 : display: flex; justify-content: center; align-items: center;

CSS Description

width

요소의 가로 값을 정의한다.

heigth

요소의 세로 값을 정의한다.

background

요소의 배경을 정의한다.

background-attachnemt : 배경이미지에 고정 여부를 설정합니다.
background- blend-mode : 배경을 혼합했을 때의 상태를 설정합니다.
background-clip : 배경을 혼합했을 때의 상채를 설정합니다.
background-color : 백그라운드 색상 설정합니다.
background-image : 백그라운드 이미지를 설정합니다.
background-origin : 백그라운드 이미지 영역 속성을 설정합니다.
background-position: 백그라운드 이미지 위치를 설정합니다.
background-repeat: : 백그라운드 이미지 반복 여부를 설정합니다.
background-size : 백그라운드 사이즈를 설정합니다.

background-color

백그라운드 색상을 정의합니다.

background-color: #fff -백그라운드 색을 설정합니다.
background-color. transparent -백그라운드 색을 투명하게 설정합니다.

background-image

백그라운드 이미지 속성을 정의합니다.

background-image: none; 백그라운드 이미지 속성을 설정하지 않습니다
background-image: url("이미지 경로"):백그라운드 이미지를 설정합니다.

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 : 10px 40px
background-position : 10% 5%
background-position : 10% 5%, 10px 40px, center top

background-repeat

백그라운드 이미지 반복 여부를 설정합니다.

background-repeat : repeat(기본값)이미지를 x축 y축으로 반복 설정합니다.
background-repeat : repeat-x -이미지를 x축으로 반복 설정합니다.
background-repeat : repeat--y-이미지를 y축으로 반복 설정합니다.
background-repeat : no-repeat - 이미지를 반복하지 않고, 하나만 나오게 합니다

text-align

텍스트의 정렬 방식을 정의합니다.

text-align : left -텍스트의 정렬을 왼쪽을 설정합니다
text-align : right -텍스트의 정렬을 오른쪽을 설정합니다
text-align : center -텍스트의 정렬을 가운데로 설정합니다
text-align : justify -텍스트의 정렬을 양쪽을 설정합니다

text-transform

대문자 또는 소문자로 바꾸는 속성입니다.

text-transform : none - 입력된 그대로 출력합니다.
text-transform : capitalize - 단어의 첫번째 글자를 대문자로 바꿉니다.
text-transform : uppercase - 모든 글자를 대문자로 바꿉니다.
text-transform : lowercase - 모든 글자를 소문자로 바꿉니다.

margin

박스 요소의 바깥쪽 여백을 설정합니다.

margin-top:10px; -요소의 위쪽 바깥쪽 여백을 설정합니다.
margin-right: 11px;-요소의 오른쪽 바깥쪽 여백을 설정합니다.
margin-bottom: 12px;-요소의 아래쪽 바깥쪽 여백을 설정합니다.
margin-left: 13px;-요소의 왼쪽 바깥쪽 여백을 설정합니다.
margin: 10px 11px 12px 13px-위쪽/오른쪽/아래쪽/왼쪽
margin: 10px 11px 12px -위쪽10px/오른쪽,왼쪽11px/아래쪽12px
margin: 10px 11px -위쪽,아래쪽10px/오른쪽,왼쪽11px
margin: 10px-위쪽오른쪽아래쪽왼쪽10px
margin: auto-기본값, 자동값
margin: 0 auto-블록구조를 가운데 정렬

padding

박스 요소의 안쪽 여백을 설정합니다.

padding-top:10px; -요소의 위쪽 안쪽 여백을 설정합니다.
padding-right: 11px;-요소의 오른쪽 안쪽 여백을 설정합니다.
padding-bottom: 12px;-요소의 아래쪽 안쪽 여백을 설정합니다.
padding-left: 13px;-요소의 왼쪽 안쪽 여백을 설정합니다.
padding: 10px 11px 12px 13px-위쪽/오른쪽/아래쪽/왼쪽
padding: 10px 11px 12px -위쪽10px/오른쪽,왼쪽11px/아래쪽12px
padding: 10px 11px -위쪽,아래쪽10px/오른쪽,왼쪽11px
padding: 10px-위쪽오른쪽아래쪽왼쪽10px

- fontsize 를 xx-small size로 설정한다.
- font size 를 extra small size 로 설정한다.
- font size 를 small size 로 설정한다.
- font-size 를 medium size 로 설정한다.. 이것은 default이다
- font-size 를 large size 로 설정한다
- font-size 를 extra large size 로 설정한다.
- font-size 를 xx-large size 로 설정한다.
- font-size 를 parent element보다 작은 크기로 설정한다.
- font-size 를 parent element보다 큰 크기로 설정한다.
- font-size 를 고정크기(in px, cm, etc.)로 설정한다.
- font-size 를 parent element's font size의 percent로 설정한다.
- Font-size property 가 parent element로부터 상속 되어져야 한다는 것을 명시한다.

line-height

문장과 문장 사이의 간격을 설정합니다.

line-height : normal 기본값입니다.
line-height : number 줄 크기를 설정합니다.
line-height : lengh 고정된 줄 높이를 지정합니다.
line-height : % 현제 글꼴 크기 기준으로 백분율로 된 줄 높이를 지정합니다.
line-height : intial 속성을 기본값으로 설정 합니다.
line-height : ingerit 부모 요소애서 이 속성을 상속받습니다.
line-height : heifht 한 줄일 떄 중간으로 오는 효과

position

요소의 위치를 설정합니다.

position : static(기본값)
position : absolute - 요소의 위치를 절대값을 설정합니다.
position : relative - 요소의 위치를 상대적 또는 기준점으로 설정합니다.
1. position : absolute의 기준점이 필요할 때 사용합니다
2. 요소의 위치를 유지한채로 left, top. right, bottom의 위피 값을 사용하고 싶을 때
3. z-index를 사용하고 싶은데 포지션이 없으면 relarive를 사용하여 z-index 값을 인식시킬 수 있습니다
position : fixed - 요소의 위치를 고정으로 설정합니다.

border

테두리 속성을 설정합니다.

border-width: 테두리 두께 속성을 설정합니다.
border-style: 테두리 스타일 속성을 설정합니다.
border-color: 테두리 색 속성을 설정합니다.
border-image: 테두리 이미지 속성을 설정합니다.
border-radius: 테두리 굴곡을 설정합니다.

border-width

border-top-width
border-right-width
border-bottom-width
border-left-width
border-width: 10px 11px 12px 13px;
border-width: 10px 11px 12px;
border-width: 10px 11px;
border-width: 10px;
border-width: thin(1px);
border-width: mudium;(3px)
border-width: thick(5px);

border-style

border-style: solid - 실선
border-style: dotted - 짧은 점선
border-style: dashed - 긴 점선
border-style: double - 두 줄
border-style: outset - 바깥쪽으로 튀어나온 듯한 느낌
border-style: inset - 안쪽으로 파인듯한 느낌
border-style: groove - 테두리 자체가 파인듯한 느낌
border-style: ridge - 테두리 자체가 엠보싱
border-style: none - 선 없앰
border-style: hidden -

border-color

border-color: 색상코드
border-color: transparent

border-image

border-image-source: 이미지의 URL;
border-image-slice: 값(픽셀수,%,fill)
border-image-width: 값(px,%,auto)
border-image-ouset
border-image-repeat

border-radius

border-top-radius : 상단
border-right-radius : 오른쪽
border-bottom-radius : 아래
border-left-radius : 왼쪽

list-style

ul,ol의 목록 스타일을 정해줄수 있다.

list-style-image : 목록 마커의 이미지를 설정합니다
list-style-position : 목록 마커의 위치를 설정합니다
list-style-type : 목록 마커의 유형을 설정합니다
- list-style-type : disc;
- list-style-type : circle;
- list-style-type : square;
- list-style-type : upper-alpha;
- list-style-type : upper-latin;
- list-style-type : upper-roman;
- list-style-type : upper-alpha;
- list-style-type : upper-latin;
- list-style-type : upper-roman;
- list-style-type : decimal-leading-zero

letter-spacing

글자사이를 늘리거나 줄입니다.

letter-spacing : normal(기본값)
letter-spacing : length

word-spacing

단어사이를 늘리거나 줄입니다.

word-spacing : normal(기본값)
word-spacing : length

overflow

요소의 박스에 콘텐츠가 넘칠때 표현방법을 지정합니다.

visible : 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시합니다.
hidden : 넘치는 콘텐츠를 자르고 보이지 않게 합니다.
scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시합니다.
auto : 넘치면 콘텐츠를 자르지만 스크롤바가 표시됩니다.
inherit : 부모 요소로부터 값을 상속 받습니다.

cursor

마우스 커서를 선택할 수 있도록 도와주는 속성입니다.

text-overflow

표시되지 않는 오버플로된 컨텐츠를 사용자에게 알리는 방법을 지정합니다.

clip : 기본값. 오버플로되어도 렌더링되지 않습니다.
ellipsis : 잘라낸 텍스트를 나타내는 줄임표("...")로 렌더링해서 표시합니다.
string : 지정된 문자열로 렌더링해서 표시합니다.
initial : 속성을 기본값으로 설정합니다.
inherit : 부모 요소에서 이 속성을 상속받습니다.

white-space

스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다.

normal : 일련의 공백이 하나의 공백으로 축소됩니다.
nowrap : 일련의 공백이 하나의 공백으로 축소됩니다.
텍스트는 절대로 다음 행으로 넘어가지 않습니다.
br 태그가 나타날 때까지 텍스트는 같은 줄에서 계속됩니다.
pre : 공백은 브라우저에 의해 보존됩니다.
pre 태그와 같은 역할을 수행합니다.
pre-line : 일련의 공백이 하나의 공백으로 축소됩니다.
필요한 경우 텍스트가 줄 바꿈됩니다.
pre-wrap : 공백은 브라우저에 의해 보존됩니다.
필요한 경우 텍스트가 줄 바꿈을 합니다.
initial : 속성을 기본값으로 설정합니다.
inherit : 부모 요소에서 이 속성을 상속받습니다.

::after

선택자의 뒤에 속성값을 지정할 때 사용합니다.

::before

선택자의 앞에 속성값을 지정할 때 사용합니다.

box-sizing

padding, border값에 영향받지 않고 width, height 설정이 가능 합니다

box-sizing: content-box = 기본값
box-sizing: border-box = 박스 앨리먼트의 width,height, padding, border에 영향 받지 않음
box-sizing: initial = 기본값으로 설정한 값
box-sizing: ingerit = 부모 속성

display

요소를 보여주거나 숨기는 기능

display: none = 박스가 생성되지 않는다. 영역도 차지하지 않습니다.
display: inline = 기본 값 요소를 inline레벨로 만든다
1. inline 은 줄바꿈이 되지 않고 한 행에 위치됩니다.
2. width와 height를 지정할 수 없습니다. 지정해도 표현되지 않습니다
3. margin-top, margin-bottom 값을 정의해도 실현되지 않습니다.
4. 한 행에 이어질 때 자동으로 5px정도 띄어집니다.
5. inline태그 - a, em, img, strong, input, label, select, textarea ,span
display: blok =기본값 요소를 blok으로 만든다
1. blok은 한행에 위치되지 않고 한 줄 전체를 차지합니다. 너비는100
2. width, hight모든 margin속성을 정의할 수 있습니다
3. 아애로 이어지고 레이아웃 배치시 쓰입니다
4. inline태그 - div, ul, ol, li, dl, dt, dd, blockquote, form, fieldset
display: inline-blok = inline+blok
1. inline과 blok의 속성을 같이 갖고 있습니다.
2. 한행에 이어지지만 width, height, 모든 margin값을 실현할 수 있습니다

'CSS' 카테고리의 다른 글

Box-shadow (0)	2024.08.28
Border-radius (0)	2024.08.28
Blend Effect (0)	2024.08.28
CSS background (0)	2024.08.28
Animation (0)	2024.08.28

현재글CSS

autumn-code 님의 블로그

데이터 모델링, SQLD,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

CSS