css

@media screen and (min-width: 760px)
{
	...
}

@media screen and (min-width: 990px)
{
	...
}

@media screen and (max-width: 759px)
{
	...
}

@media screen and (min-width: (size)) - size 이상일때 적용되는 스타일
@media screen and (min-width: 760px) - Tablet 일때 사이트 최대 width 값
@media screen and (min-width: 990px) - Laptop 일때 사이트 최대 width 값
- PC 브라우저에서는 min-width 값과 div의 width 값이 같으면 가로 스크롤바가 생기기 때문에, div 의 최대 크기는 @media screen의 max-width 에서 스크롤바 크기(17px 이상)를 빼야 함
@media screen and (max-width: (size)) - size 미만일때 적용되는 스타일
- IE8용 css 에는 적용하지 않음

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/css?family=Days+One);

구글 웹 폰트 적용.

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption
{
	display: block;
}

html5 태그를 인식할 수 없는 브라우저를 위한 설정

*
{
	margin: 0;
	padding: 0;
	max-height: 99999px;
	-webkit-text-size-adjust: none;
}

max-height: 99999px : 뷰포트의 width 값이 device-width 가 아닐때 글자 비율을 고정

body
{
	font-family: "Nanum Gothic", "나눔고딕";
	font-size: 12px;
	color: #333333;
	background: #272727;
}

background: #272727 - 하단영역의 배경색이 height 100% 인 경우 body에 배경색을 적용하고 , <div id="top"> 과 <div id="middle"> 에 배경색을 적용함

input[ type="text" ],
input[ type="email" ],
input[ type="submit" ],
input[ type="number" ],
input[ type="password" ]
{
	-webkit-appearance: none;
	-moz-appearance: none;
}

폼 요소의 모양을 어떻게 표시할 것인지를 정의하는 웹킷 전용 속성
none 설정은 브라우저 자체에 기본적으로 설정된 모양을 해제하겠다는 의미

input[ type="radio" ]:checked
{
	border: none !important;
}

사파리 브라우저 체크박스 스타일 처리

pre
{
	display: block;
	white-space: pre-wrap;
	margin: 12px 0 0 0;
	padding: 10px 10px 10px 10px;
	line-height: 22px;
	font-family: 'Nanum Gothic', 나눔고딕;
	font-weight: bold;
	border: 1px solid #cccccc;
}

white-space: pre-wrap - 코드를 그대로 표시하고 , 공간이 부족하면 자동 줄바꿈이 됨

.drop
{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

불록 태그 내 컨텐츠가 공간이 부족하면 , 넘어가는 부분을 삭제하고 '...' 으로 표시함. 게시판 말줄임에 사용
white-space: nowrap - 텍스트가 줄바꿈 되지 않고 같은 줄에 계속 표시
text-overflow: ellipsis - 잘린 텍스트를 생략부호 ( ... )로 표시함

@media screen and (max-width: 989px)
{
	*:focus
	{
		outline: 0;
	}
}

Mobile 및 Tablet 브라우저에서 링크 테두리 라인을 표시하지 않음

div#top
{
	float: left;
	width: 100%;
	border-top: 4px solid #0062c3;
	border-bottom: 1px solid #cccccc;
	background: #ffffff
}

background: #ffffff - body 에 배경색이 적용되었고 body 배경색과 다른 경우

ul#util li a
{
	line-height: 13px;
}

line-height - 언어별 행간 크기를 무시하고 높이를 맞추기 위한 속성
border 속성을 가지고 있고 다른 언어를 사용할 가능성이 많은 공간에는 line-height 속성을 같이 사용하는 것이 좋음
게시판 메뉴의 a 태그와 input 태그에 사용중

@media screen and (min-width: 990px)
{
	...

	div#family_site
	{
		position: absolute;
		right: 0;
		bottom: 50px;
		width: 180px;
		padding: 0 0 0 0;
	}

	...

bottom: 50px - 패밀리사이트의 버튼을 클릭시 리스트 목록이 위로 열림

div#middle
{
	background: #ffffff;
}

body 에 배경색이 적용되었고 body 배경색과 다른 경우

@media screen and (min-width: 990px)
{
	div#container
	{
		position: relative;
		left: 50%;
		width: 970px;
		margin: 0 0 0 -485px;
	}
}

Laptop 에서 970px 크기로 중앙 배치

@media screen and (min-width: 760px)
{
	div#sidemenu
	{
		display: block;
		float: left;
		width: 20%;
		padding: 34px 0 40px 0;
		background: url("/images/common/bg_main_contents.jpg") right 0 repeat-y;
	}

	...

사이드 메뉴 영역과 컨텐츠 영역 사이 경계선. 사이드 메뉴 영역이 켄텐츠 영역보다 높이값이 클때 사용됨

div#main_contents
{
	float: right;
	left: -1px;
	width: 80%;
	padding: 30px 0 50px 0;
	background: url("/images/common/bg_main_contents.jpg") 0 0 repeat-y;
}

left: -1px - 사이드 메뉴 경계선과 컨텐츠 영역 경계선을 겹치기 위한 속성

div#main_contents div.box
{
	float: left;
	overflow: hidden;
}

div#main_contents div.clear_box
{
	clear: both;
	float: left;
	overflow: hidden;
}
div#main_contents div.box_mobile_100 { width: 100%; }
div#main_contents div.box_mobile_75 { width: 75%; }
div#main_contents div.box_mobile_50 { width: 50%; }
div#main_contents div.box_mobile_25 { width: 25%; }
div#main_contents div.box_mobile_33 { width: 33.33333333333333%; }

@media screen and (min-width: 760px)
{
	div#main_contents div.box_tablet_100 { width: 100%; }
	div#main_contents div.box_tablet_75 { width: 75%; }
	div#main_contents div.box_tablet_50 { width: 50%; }
	div#main_contents div.box_tablet_25 { width: 25%; }
	div#main_contents div.box_tablet_33 { width: 33.33333333333333%; }
}

@media screen and (min-width: 990px)
{
	div#main_contents div.box_laptop_100 { width: 100%; }
	div#main_contents div.box_laptop_75 { width: 75%; }
	div#main_contents div.box_laptop_50 { width: 50%; }
	div#main_contents div.box_laptop_25 { width: 25%; }
	div#main_contents div.box_laptop_33 { width: 33.33333333333333%; }
}

컨텐츠 영역의 width
서브 스타일인 box_( 디바이스 )_( 넓이 ) 를 함께 사용

div#main_contents div.article
{
	position: relative;
	padding: 0 12px 0 12px;
}

...

@media screen and (min-width: 760px)
{
	div#main_contents div.article
	{
		padding: 0 20px 0 20px;
	}
}

@media screen and (min-width: 990px)
{
	div#main_contents div.article
	{
		padding: 0 0 0 30px;
	}
}

컨텐츠 영역의 padding

Leap's

css

common

common.css