DAY31, 32 - 페이지 만들기 코드 복습 - main.css

main.css

@charset "UTF-8";

@import url("./reset.css");

/* '나눔고딕체'이고, 웹 폰트를 활용 */
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

hr {
	display: none;
}

.blind {
	display: none;	
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
}

/* skip css */
.skip a {
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
	z-index: 9999;
	width: 100%;
	background-color: navy;
	color: white;
	font: bold 1.3em Tahoma, sans-serif;
	text-decoration: none;
	text-align: center;
}

.skip a:hover, .skip a:active, .skip a:focus {
	top: 0;
	padding: 0.5em 0;
}

/* 가로 너비 지정 및 가운데 정렬 */
#wrap {
	width: 760px;
	margin: 0 auto;
}

/* header 시작 */
/* 어떤 영역에 'position: absolute'를 지정할 경우에는,
   그 영역을 감싸는 부분에 반드시 'position: relative'를 지정한다.
   그 상위 영역이 'absolute' 위치의 기준이 된다.*/

#header {
	position: relative;
	padding-bottom: 99px;
	border-bottom: 1px solid #cccccc;
	background: url("../image/bg_header.png") no-repeat 50% 100%;
}

.logo {
	padding: 12px 0 12px 26px;
}

.logo a {
	display: block;
	overflow: hidden;
	width: 90px;
	height: 30px;
	background: url("../image/logo.png") no-repeat;
	text-indent: -9999em; /* 들여쓰기, 양수이면 들여쓰기, 음수이면 내어쓰기가 된다. */
}
.topnav {
	position: absolute;
	right: 35px;
	top: 18px;
}

.topnav dd {
	float: left;
	padding-right: 11px;
	margin-right: 10px;
	background: url("../image/bg_topnav.png") no-repeat 100% 50%;

}

.topnav dd:last-child {
	padding-right: 0;
	margin-right: 0;
	background: none;
}

.topnav dd a {
	color: black;
	font-size: 9pt;
}

.mainnav {
	padding-left: 50px;
	background-color: #005B9B;
}

.mainnav:after {
	content: '';
	display: block;
	clear: both;
}

.mainnav li {
	float: left;
}

.mainnav li a {
	display: block;
	padding: 0 13px;
	background-color: #005B9B;
	color: #ffffff;
	font: bold 16px/40px 'Nanum Gothic', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.mainnav li a:hover {
	color: #660000;
	background-color: #ffcc00;
}
/* header 끝 */

/*
[형식]
font : 폰트두께 폰트크기/line-height 서체
*/
/* container 시작 */
#container {
	background: url("../image/bg_snb.png") repeat-y 170px 0;
	padding-bottom: 20px; /* container와 footer의 간격 지정*/
}

#container:after { /* float 해제 */
	content: '';
	display: block;
	clear: both;
}

/* snb 시작 */
.snb {
	float: left;
	width: 170px;
}

.snb h2 {
	padding: 28px 14px 8px 0;
	margin-left: 11px;
	margin-bottom: 15px;
	border-bottom: 1px solid #cccccc;
	color: #005B8B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
}

.snb ul {
	margin-left: 11px;
}

.snb ul a {
	display: block;
	padding-right: 14px;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	text-decoration: none;
	line-height: 30px;
}

.snb ul a:hover{
	color: #660000;
	text-decoration: underline;
}
/* snb 끝 */

/* content 시작 */
#content {
	position: relative;
	float: right;
	width: 560px;
}

.locate {
	position: absolute;
	right: 28px;
	top: 26px;
	color: #ccc;
	font-size: 0.9em;
	word-spacing: 0.3em;
}

.locate a {
	color: #666666;
}

.locate strong {
	font-weight: normal;
	color: #666666;
	word-spacing: 0em;	
}

#content h2 {
	padding: 24px 0;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 24px;
	font-weight: bold;
}

#content .thum {
	float: left;
	margin-left: 14px;
	
}

#content .thum img {
	width: 114px;
	height: 111px;
	border: 1px solid #cccccc;
}

#content .text{
	margin-left: 148px;
}

#content .text p {
	margin-bottom: 15px;
	line-height: 1.4;
	/* 
	웹브라우저에서 정한 기본값이 보통 1.2이다.
	예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 된다.
	 */
}
/* content 끝 */

/* container 끝 */

/* footer 시작*/
#footer {
	border-top: 1px solid #cccccc;
	padding: 18px 30px 40px 20px;
	color: #666;
	font-size: 0.9em;
}
#footer:after {
	content: '';
	display: block;
	clear: both;
}

.btmnav {
	float: right;
}

.btmnav dd {
	float: left;
}

.btmnav dd:after {
	content: '|';
	padding: 0 0.7em;
	color: #999;
}

.btmnav dd:last-child:after {
	content: '';
	padding: 0 0;
}

.copy {
	float: left;
	line-height: 1.8;
}
/* footer 끝*/

---

1. @charset "UTF-8";

• CSS 파일의 문자 인코딩을 UTF-8로 설정하여 한글 등 다양한 문자를 지원한다.

---

2. @import 지시문

@import url("./reset.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

 

• reset.css 파일을 불러와 브라우저의 기본 스타일을 초기화한다.
• Google Fonts에서 '나눔고딕(Nanum Gothic)' 폰트를 불러온다. 이 폰트는 이후 텍스트 스타일링에 사용된다.

---

 

 

3. hr, .blind, .skip 스타일

hr {
	display: none;
}

• <hr> 요소를 숨깁니다. <hr>는 수평선을 표시하는 요소인데, 여기서는 사용하지 않기위해 적는다.

---

.blind {
	display: none;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
}

• .blind 클래스는 시각적으로 요소를 숨기지만, 스크린 리더가 읽을 수 있도록 한다. position: absolute;와 top: -1000em;을 사용해 화면에서 완전히 벗어나게 한다.

---

.skip a {
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
	z-index: 9999;
	width: 100%;
	background-color: navy;
	color: white;
	font: bold 1.3em Tahoma, sans-serif;
	text-decoration: none;
	text-align: center;
}
.skip a:hover, .skip a:active, .skip a:focus {
	top: 0;
	padding: 0.5em 0;
}

• .skip a 클래스는 "Skip Navigation" 링크 스타일을 정의한다 이 링크는 기본적으로 화면에서 보이지 않다가 사용자가 키보드로 포커스를 맞추거나 클릭하면 화면 상단에 나타난다. 웹 접근성을 위해 사용되며, 키보드만 사용하는 사용자가 쉽게 본문으로 이동할 수 있도록 한다.

---

4. 레이아웃 스타일링 (#wrap, #header, #container, #footer)

#wrap {
	width: 760px;
	margin: 0 auto;
}

• #wrap은 페이지 전체의 너비를 760px로 설정하고, margin: 0 auto;를 사용해 페이지를 수평으로 가운데 정렬한다.

---

Header 스타일링

#header {
	position: relative;
	padding-bottom: 99px;
	border-bottom: 1px solid #cccccc;
	background: url("../image/bg_header.png") no-repeat 50% 100%;
}

 

• #header는 페이지 상단의 헤더 영역을 정의한다. position: relative;는 내부 요소들의 absolute 포지셔닝 기준이 되게한다.
• 배경 이미지를 설정하며, 아래쪽(100%) 가운데(50%)에 위치시킨다.

---

.logo {
	padding: 12px 0 12px 26px;
}
.logo a {
	display: block;
	overflow: hidden;
	width: 90px;
	height: 30px;
	background: url("../image/logo.png") no-repeat;
	text-indent: -9999em;
}

 

• .logo는 로고의 위치를 조정하며, 로고 이미지를 배경으로 설정한다. text-indent: -9999em;을 사용해 텍스트를 화면에서 내어쓰기하여 보이지 않도록 하지만, 스크린 리더는 읽을 수 있다.

---

.topnav {
	position: absolute;
	right: 35px;
	top: 18px;
}
.topnav dd {
	float: left;
	padding-right: 11px;
	margin-right: 10px;
	background: url("../image/bg_topnav.png") no-repeat 100% 50%;
}

• .topnav는 상단 네비게이션을 절대 위치시킨다. dd 요소는 좌우에 간격을 두고 배경 이미지를 추가하여 링크들을 구분한다.

---

.mainnav {
	padding-left: 50px;
	background-color: #005B9B;
}
.mainnav li {
	float: left;
}
.mainnav li a {
	display: block;
	padding: 0 13px;
	background-color: #005B9B;
	color: #ffffff;
	font: bold 16px/40px 'Nanum Gothic', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}
.mainnav li a:hover {
	color: #660000;
	background-color: #ffcc00;
}

• .mainnav는 메인 네비게이션 메뉴로, float: left;를 사용해 메뉴 항목들을 수평으로 나열한다. 링크에 hover 효과를 주어 마우스를 올리면 색상이 변경되도록 한다.

---

Container 및 Sidebar (Snb) 스타일링

#container {
	background: url("../image/bg_snb.png") repeat-y 170px 0;
	padding-bottom: 20px;
}
#container:after {
	content: '';
	display: block;
	clear: both;
}
.snb {
	float: left;
	width: 170px;
}

 

• #container는 메인 콘텐츠 영역으로, float를 사용해 내부 요소들을 정렬한다. background: url(...) repeat-y;는 좌측 네비게이션(SNB)의 배경 이미지를 수직 반복으로 설정한다.
• .snb는 사이드 네비게이션으로, 왼쪽에 고정된 위치로 배치된다.

---

#content {
	position: relative;
	float: right;
	width: 560px;
}

 

• #content는 본문 내용을 포함하며, 오른쪽에 위치하도록 float: right;를 사용한다.

---

.locate {
	position: absolute;
	right: 28px;
	top: 26px;
	color: #ccc;
	font-size: 0.9em;
	word-spacing: 0.3em;
}

• .locate는 현재 위치를 표시하는 요소로, 페이지 상단에 절대 위치시킨다.

---

#content h2 {
	padding: 24px 0;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 24px;
	font-weight: bold;
}

• 본문 내 제목(h2)의 스타일을 정의한다. '나눔고딕' 폰트를 사용하고, 굵고 큰 글씨로 강조한다.

---

#content .thum {
	float: left;
	margin-left: 14px;
}
#content .text {
	margin-left: 148px;
}
#content .text p {
	margin-bottom: 15px;
	line-height: 1.4;
}

• #content .thum는 썸네일 이미지를 왼쪽에 배치하고, 본문 텍스트(.text)는 썸네일 오른쪽에 위치하도록 margin-left: 148px;로 간격을 준다.

---

Footer 스타일링

#footer {
	border-top: 1px solid #cccccc;
	padding: 18px 30px 40px 20px;
	color: #666;
	font-size: 0.9em;
}

• #footer는 페이지 하단의 푸터 영역으로, 경계선을 추가하고 적절한 간격과 색상을 설정한다.

---

.btmnav {
	float: right;
}
.btmnav dd {
	float: left;
}
.btmnav dd:after {
	content: '|';
	padding: 0 0.7em;
	color: #999;
}

• .btmnav는 푸터의 네비게이션을 오른쪽에 정렬하고, 각 항목 사이에 구분선(|)을 추가한다.

---

.copy {
	float: left;
	line-height: 1.8;
}

• .copy는 저작권 정보를 왼쪽에 정렬하며, line-height를 사용해 텍스트의 높이를 조정한다.