CSS 파일 위치

파일의 생성위치는 루트 디렉토리에서 /css/폴더로 한다.

공통 CSS

default.css : 공통으로 쓰이는 style sheet 정의 및 모든 style sheet를 정의한 파일

로컬 CSS

단독적인 레이아웃을 가지는 카테고리의 경우 카테고리명을 붙이고 파일을 추가한다

아이디/클래스 네이밍 규칙

ID 와 CLASS 구분

ID

1. CSS 선택자로 사용할 수 있다.
2. DOM이 객체를 식별하는 역할을 할 수 있다.
3. 한 문서에 한 번만 사용할 수 있다.
4. 링크에 대한 앵커(목표위치)로 사용할 수 있다.

CLASS

1. CSS선택자로 사용할 수 있다.
2. DOM이 객체를 식별하는 역할을 할 수 있다.
3. 한 문서에 여러번 사용할 수 있다.

ID / CLASS 권장 기준

1. 한 문서에서 반드시 한 번만 사용 확신 + 앵커로서 가치가 있다 = id
2. 한 문서에서 두 번 이상 사용 가능성 + 앵커로서 가치가 없다. = class
3. 한 문서에서 두 번 이상 사용 가능성 + 앵커로서 가치가 있다. = id / class를 함께 사용

네이밍 규칙

스타일 적용을 위한 아이디, 클래스의 경우 단어와 단어 사이를 언더바(_)로 구분한다.

.main_banner
#search_area

자바스크립트 적용을 위한 아이디, 라벨 연결을 위한 입력폼의 아이디의 경우 카멜케이스 규칙을 따른다.

#mainEventDiv

※ 카멜케이스: 영문소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 방법.

아이디/클래스 이름은 용도를 나타내는 단어를 사용하되, 위치/크기/색상 등의 스타일을 특정짓는 단어를 지양한다.

#right_section	(X)
#aside_section	(○)

#thumb_300	(X)
#thumb_large	(○)

.font_red		(X)
.font_warning	(○)

이하의 클래스는 UI 개편/리뉴얼 작업시 가능한 사용하지 않는다.

통상 .clear .clearfix .clfix 등의 클래스명으로 사용하는 float 요소 대응 클래스

통상 .margin_top10 .pd20 등의 클래스명으로 사용하는 여백 클래스

※ 선언은 허용

※ 운영에서 사용은 허용

※ 여러회 사용된 요소의 간격조정 용도로는 사용가능

이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.

#Table	(X)
#7week	(X)
.@email	(X)

유사한 용도인 경우 가장 뒤에 숫자를 붙여 사용할 수 있으며 첫번째 이름은 숫자를 생략할 수 있다.

.list_benefit
.list_benefit_02
.list_benefit_03

네이밍의 조합은 '형태_의미_순서_상태'을 기본 순서로 사용한다.

.btn_confirm_02_on

첫단어 (형태)

끝단어 (상태)

예약어

이하의 클래스명은 사이트 전역에서 반복하여 사용되는 이름이므로 부모 요소 없이 단독으로 스타일을 선언하지 않는다.

아이디/클래스 네이밍 예제

메인 개편시의 네이밍 예제

폰트 스타일

글자의 크기와 폰트

12픽셀 '돋움', 'Dotum' 을 기본 폰트로 사용한다.

14픽셀 이상으로 들어가는 일반 텍스트의 경우 선택적으로 '맑은 고딕', 'Malgun Gothic', 'Apple SD Neo Gothic' 을 사용할 수 있다.
14픽셀 이상으로 들어가는 숫자 텍스트의 경우 선택적으로 'Segoe UI', 'Helvetica Neue', 'Tahoma', 'Arial' 을 사용할 수 있다.

위와같이 '돋움' 이외의 폰트를 사용하는 경우, 해당 내용을 '돋움' 으로 바꿨을때에도 레이아웃에 문제가 생기지 않도록 가로폭에 여유를 두어 작업한다.

18픽셀 이하의 글자는 11픽셀, 12픽셀, 14픽셀, 16픽셀, 18픽셀 을 사용한다.

'돋움', '굴림' 폰트의 경우 글자 크기를 13픽셀로 지정시 12픽셀과 같은 크기로, 15픽셀로 지정시 14픽셀과 같은 크기로 출력되므로,
'맑은 고딕'이 설치되지 않은 윈도우XP 환경에서는 글자의 크기가 의도에 맞지 않게 출력되는 문제가 있다.

돋움 11픽셀 돋움 12픽셀 돋움 13픽셀 돋움 14픽셀 돋움 15픽셀 돋움 16픽셀 돋움 17픽셀 돋움 18픽셀

웹폰트의 사용

한글 웹폰트 사용시 최소 1MB 이상의 웹폰트 파일을 사용하게 되어 속도 및 트래픽 관련 이슈가 발생하고,
12픽셀 이하의 크기에서 글자가 흐려서 잘 보이지 않는 선명도 이슈가 발생하므로 반드시 관련부서와의 충분한 협의를 거친다.

글자의 색상

검은색 계열의 본문 글자 색상값은 다음의 단계를 기본으로 사용한다.

• #000000
• #111111
• #222222
• #333333
• #444444
• #555555
• #666666 (기본색상)
• #767676

상품 이미지 삽입

다양한 상품 이미지의 색상, 크기와 비율을 고려한다.

테두리 서식 지정

➜

상품 이미지에는 반드시 border 스타일이 들어가야 한다.
테두리가 포함된 이미지 파일을 만들어서 html 페이지에 삽입하지 않는다.
디자인에 없더라도 배경이 흰색인 이미지를 고려하여 회색의 테두리를 넣는다.

<div class="cover"><a href="#"><img src="" alt="s9791185392127.jpg" /></a></div>

.cover img { border:1px solid #dadada; }
.cover a:hover img { border-color:#aaaaaa; }

현행 이미지 파일의 사용

상품 이미지는 다양한 비율과 색상이 고려되어야 하므로 현행의 이미지를 그대로 사용한다.

상품 메인 또는 목록에서 사용하는 이미지 규격은 다음과 같이 총 3가지가 있다.

http://image.kyobobook.co.kr/images/book/small/127/s9791185392127.jpg
http://image.kyobobook.co.kr/images/book/medium/127/m9791185392127.jpg
http://image.kyobobook.co.kr/images/book/large/127/l9791185392127.jpg

디자인된 상품 이미지의 크기가 규격과 일치하는 경우 해당 규격의 이미지를 사용하고, 일치하지 않는 경우 디자인보다 큰 규격의 이미지를 사용한다.

large 사이즈 이미지는 한페이지에 30개를 초과하여 사용하지 않는다.

Small (40px)

Medium (72px)

Large (198px)

※ 상품 상세페이지에서는 상품 원본 이미지 표시를 위해 xlarge 규격을 추가로 사용한다.
http://image.kyobobook.co.kr/images/book/xlarge/127/x9791185392127.jpg

원본 이미지 비율 유지

내가 사랑한 유럽 TOP 10 You are doing a preaking great job The Five People You Meet in Heaven ➜ 내가 사랑한 유럽 TOP 10 You are doing a preaking great job The Five People You Meet in Heaven

상품군 별로 기본 썸네일 사이즈에 차이가 있으므로 css에서 width값은 반드시 지정하고 영역의 높이가 제한된 경우 height 또는 max-height 값을 지정한다.

이미지의 가로세로 비율 차이에 따라 레이아웃에 문제가 생기지 않는지 확인한다.

책표지에 테두리, 액자, 그림자, 음영효과 등 추가 디자인이 들어가는 경우 다양한 크기의 이미지가 들어갔을때 문제가 없는지 확인한다.

.cover a { border:1px solid #dadada; width:75px; max-height:110px; }

고정 이미지 비율 사용

디자인 컨셉에 따라 원본 이미지 비율을 무시하고 가로 세로 크기를 지정할 수 있다.

내가 사랑한 유럽 TOP 10 You are doing a preaking great job The Five People You Meet in Heaven ➜ 내가 사랑한 유럽 TOP 10 You are doing a preaking great job The Five People You Meet in Heaven

.cover a { border:1px solid #dadada; width:75px; height:105px; }

서식 제어 요소의 디자인 변경

서식 제어 요소 중에 셀렉트박스, 체크박스, 라디오버튼 및 파일업로드의 경우 CSS 수정에 의한 디자인 변경에 제약이 있다.
이와같은 요소에 디자인을 입히고자 하는 경우 다양한 변칙 기법을 사용하게 되는데, 가능한 시스템 기본 컨트롤을 활용하고, 키보드만으로 기능을 사용할 수 있어야 한다.

서식에 디자인을 적용하는 방법

실제 서식 요소의 사용

실제 서식 요소를 화면에서 숨기고 label 및 각종 대체요소를 활용하여 스타일을 적용한 뒤 추가로 필요한 기능은 스크립트로 구현한다.
※ 모바일 페이지인 경우 :checked 선택자, appearance:none; 속성 등을 활용하여 스크립트 없이 CSS3 만으로 기능을 구현할 수 있다.

서식이 아닌 대체요소의 사용

a, button 등 키보드 포커스가 가능한 대체요소에 스타일을 적용하고 스크립트를 사용하여 서식의 기능을 모사한 뒤, 입력값을 hidden타입의 input 요소로 전달한다.
이 경우 WAI-ARIA 기법을 사용하여 시각장애인을 고려하여 역할(Roles), 속성(Properties), 상태정보(State Information)를 정의하는 것이 바람직하다.

스크립트로 서식의 기능을 구현시 확인사항

• 체크박스, 라디오버튼에 키보드 포커스시 시각적으로 인식이 가능해야 한다.
• 셀렉트박스 레이어가 열려있을 때 서식의 바깥쪽 영역을 클릭시 레이어가 닫혀야 한다. (마우스 아웃시 닫히는 것은 부적절)
• 서식의 입력값을 변경한 상태에서 페이지 새로고침시 실제 컨트롤의 상태과 스타일이 동기화되는지 확인한다.
• 체크박스, 라디오버튼을 빠르게 연속 클릭했을 때 실제 컨트롤의 상태과 스타일이 동기화되는지 확인한다.

CSS 리셋

PC/모바일 공통 리셋 스타일

html, body {height:100%;}
body {font-size:14px; line-height:1.4; font-family:'Malgun Gothic', 'Apple SD Gothic Neo', Dotum, 'Segoe UI', Helvetica, Arial, Sans-serif; color:#222;}
table, th, td, input, select, button, textarea, pre {font:inherit; color:inherit;}
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
ol, ul {list-style:none;}
img, fieldset {border:0;}
img {vertical-align:middle;}
a {color:#222; text-decoration:none;}
table {border-spacing:0; border-collapse:collapse; border:0;}
th, td {word-break:break-all; word-wrap:break-word;}
label {cursor:pointer;}
input, button {border:0; border-radius:0;}
textarea {resize:none;}
input, button, select, textarea {vertical-align:middle;}
address, caption, cite, code, dfn, em, var {font-style:normal;}
hr {clear:both; display:none;}
blockquote, q {quotes:none;}
abbr, acronym {border:0;}
legend, caption {visibility:hidden; overflow:hidden; line-height:0; width:0; height:0; margin:0; padding:0; text-indent:-99999px; font-size:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display:block;}

.hidden {position:absolute; visibility:hidden; overflow:hidden; height:0; line-height:0; width:0; margin:0; padding:0; font:0/0 Arial;}

※ PC 또는 모바일만을 위한 속성은 제외되었으므로 별도로 정의 바랍니다.

※ 다음의 속성은 기본 태그에 스타일 지정 금지
box-sizing, font-weight, letter-spacing

※ body에만 font-family를 지정할 것 (영역별로 폰트를 자유롭게 지정할 수 있기 위함)
폰트 스타일이 상속되지 않는 button, input, select, table, textarea는 inherit으로 처리하였음
body, p, li, div {font-family:'xxx';} (X)
body {font-family:'xxx';} (O)

CSS 코드 작성 규칙

기본규칙

모든 속성은 영문 소문자로만 작성

.my_class {color:#ffffff;}

작은 따옴표('') 사용 범위

폰트의 선언, 배경 url, filter, content에 작은 따옴표('')를 사용한다. 그 외의 경우는 사용하지 않는다.

.my_class {background-image:url('image.jpg')}

세미콜론(;)

마지막 선언된 속성에도 세미콜론(;)을 사용한다.

.my_class {color:red;font-size:16px;line-height:20px;}

공백의 사용

선택자 간, 중괄호간 한칸의 공백을 사용한다, 중괄호 안쪽 좌우에는 공백은 사용하지 않는다.

.my_class█{color:red;font-size:18px;}

들여쓰기

CSS 코드 작성시 들여쓰기는 허용하지 않는다.

※ @-규칙에 한해 들여쓰기 허용

@media all and (min-width:640px) {
	.my_class {color:red;font-size:16px;line-height:20px;}
}

@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
        url(../fonts/NotoSansKR-Regular.woff) format('woff'),
        url(../fonts/NotoSansKR-Regular.otf) format('opentype');
 }

@keyframes fade_in {
	0% {opacity:0;}
	100% {opacity:1;}
}

줄바꿈

객체를 구분하기 위하여 코드 그룹 간 1줄의 빈 줄을 허용한다. 빈 줄은 1줄을 초과하지 않는다.

중괄호( { , } ) 사이는 줄바꿈하지 않는다.

두개 이상의 요소에 하나의 스타일을 지정하는 경우 쉼표(,) 뒤로 줄바꿈한다.

.my_class1,
.my_class2 {font-weight:bold;}

주석

CSS 주석 처리는 시작 주석을 작성하며 종료 주석은 작성하지 않는다. 종료코드 이후에 오는 요소에 한 칸 띄어 쓰기를 허용한다.

/* 오늘의 책 */
.todaybook_area { height:291px;background:url('http://image.kyobobook.co.kr/ink/images/korean/todaybook_bg.gif') no-repeat 0 0;position:relative;}
.todaybook_area dl {padding-top:45px;}
.todaybook_area dl dt {position:absolute;left:29px;top:38px;}
.todaybook_area dl dt img {width:159px;height:233px;vertical-align:middle;}

.todaybook_area .book_select {position:absolute;left:217px;top:205px;}
.todaybook_area .book_select a {display:inline-block;margin:1px 10px 1px 1px;border:1px solid #ccc;}
.todaybook_area .book_select a img {width:45px;height:64px;}
.todaybook_area .book_select a.on {margin:0 9px 0 0;border:2px solid #ff8900;}

/* 도서 상세 */
.content_middle .ctnent_left{float:left;width:768px;margin-right:15px;border-top:solid #319bef 2px;border-left:solid #dadada 1px;border-right:solid #dadada 1px;border-bottom:solid #dadada 1px;}
.content_middle .ctnent_left .book_info{position:relative;width:728px; z-index:110;padding:8px 20px 0 20px;}

선택자

공통선택자

공통 선택자(*)는 웹 페이지의 성능을 저하를 가져오기 때문에 사용하지 않는다.

앵커태그 선택자

앵커태그의 선택자는 다음의 순서로 지정한다.

a:link
a:visited
a:hover
a:active

브라우저별 선택자 지원 현황

참고 : CSS selectors

속성의 선언 순서

속성은 형태 - 흐름 - 위치 - 크기 - 박스모델 - 배경 - 글자 - 기타 순으로 지정한다.

1. 형태 : display visibility
2. 흐름 : float clear
3. 위치 : position left right top bottom z-index
4. 크기 : width height overflow
5. 박스 : margin padding border
6. 배경 : background
7. 글자 : text font color
8. 기타 : cursor

전체 속성의 선언 순서는 시계 방향으로 명시한다. top, right, bottom, left

약식 속성

Background 약식 속성

배경 이미지의 속성의 초기 선언시 반드시 background 단일 속성을 사용하며, 이후 배경적인 부분의 속성이 변경될 경우 background 관련 속성을 사용하여 제 선언 한다.

선언 순서는 background-attachment, background-color, background-image, background-repeat, background-position 이다.

Border 약식 속성

테두리의 스타일이 동일할 경우 반드시 border 단일 속성을 사용하고 동일하지 않을 경우 부분적 border 속성을 사용할 수 있다.

속성의 값의 선언 순서는 border-width, border-style, border-color의 순서이다.

Font 약식 속성

폰트의 약식 속성에 대하여는 부분적으로 허용하며 폰트의 크기와 라인의 높이를 동시에 제어를 하는 경우에 한하여 사용한다.

속성의 선언순서는 font-style font-variant font-weight font-size/line-height font-family 이며 style, variant, weight는 생략 가능하지만 font-size/line-height font-family는 필수 입력 사항이다.

미디어타입

미디어 타입은 공통(common.css)CSS 파일의 가장 아랫 부분에 선언한다. 또한 미디어 타입의 코드 작성시 1탭의 들여쓰기는 허용한다.

/* Print */
 @media print {
     #header {display:none;}
 }

미디어 타입의 종류

1. all : 모든 출력장치
2. aural : 음성출력
3. braille : 점자 출력
4. handheld : 포켓, 모바일
5. print : 인쇄
6. projection : 투사 장치

크로스 브라우징

지원 브라우저

• Microsoft Edge 최신버전
• Internet Explorer 11
• Chrome 최신버전
• Safari 최신버전
• Firefox 최신버전
• Opera 최신버전

브라우저 버전별 설치 가능한 운영체제

CSS핵

CSS 핵의 사용은 최소화 하되 구버전 브라우저의 지원이 필요한 경우는 CSS핵을 사용한다.

잘 알려진 문제의 해결

하위버전의 브라우저에서도 기본적인 화면 레이아웃이 깨지지 않도록 설계한다. (미세한 간격차이는 무시 가능)

웹킷 기반 브라우저에서 테이블 컬럼 간격 버그

<table>의 <caption>을 숨길 목적으로 position:absolute 를 적용하면 웹킷 기반의 브라우저(크롬,사파리)에서 컬럼의 너비가 고정되어 조정할 수 없는 버그가 발생한다.

해결방법 : position:absolute 를 삭제하고 다른 방법을 사용해서 숨김처리 한다.

caption {visibility:hidden;position:absolute;}

caption {visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}

크롬에서 세밀한 자간 조정이 안되는 문제

일부 브라우저에서 1픽셀 미만 단위(-0.5px, -0.05em 등)의 자간 조정이 되지 않으므로 지정한 자간이 아니더라도 내용을 보는데 지장이 없도록 스타일을 유연하게 적용한다.

다양한 사용자 환경의 고려

다음과 같은 사용자 환경에서 레이아웃이 깨지지 않도록 작업하도록 한다.

화면 확대/축소 (웹브라우저에서 지원)

테두리가 있는 블럭이 float를 통해 다른 블럭과 맞닿아 있는 경우에 화면 축소시 테두리의 폭이 초과계산되어 깨질 수 있다.

화면 인쇄

화면 인쇄시에 웹브라우저에서 보여주는 화면과 랜더링 방식에 차이가 있을 수 있다.

미디어 타입 선언을 screen 으로 설정한 경우 해당 CSS는 모니터에서 보는 경우에만 적용되고 화면 인쇄시 적용되지 않는다.
여러 미디어 타입을 고려한 CSS를 운용하는 것이 아니라면 미디어 타입은 기본값(all)을 사용하도록 한다.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> ( X )

<link rel="stylesheet" type="text/css" href="style.css" media="all" /> ( O )

<link rel="stylesheet" type="text/css" href="style.css" /> ( O )

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> ( O )

사용자 폰트

스타일로 지정한 폰트가 없거나 사용자 지정 폰트를 사용하는 경우 자폭이나 행간의 차이가 있을 수 있음에 유의