/*******************기본 설정 *******************/
/* font-size: 10pt 처럼 고정해 놓기 때문에 방문객은 사이트에서 정해놓은 크기대로 보아야 합니다.
그러나 상대값으로 지정하면 방문객이 원하는 크기로 볼 수 있습니다. 1em = 12pt, 2em = 24pt, 0.5em = 6pt
font-size: 1em 처럼 상대값으로 지정할 경우 방문객은 브라우저의 글자 크기 조절로 선택하여 볼 수 있습니다.*/
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
html, body{height:100%;width:100%;margin: 0;padding: 0;font-size:12px;font-family:맑은 고딕,dotum;}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code,
blockquote, form, fieldset, legend, input, textarea, th, td {margin: 0;padding: 0;font-size:12px;font-family:맑은 고딕,dotum;}
input, select, button, select, textarea {vertical-align:middle;margin: 0;padding: 2px;border:1px solid #ccc;font-size:12px;font-family:맑은 고딕,dotum;}
input[type=radio], input[type=check] {border:none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;font-weight: normal;}
a:link, a:visited {color: #333333;text-decoration: none}
a:hover, a:focus, a:active {color: #666666;}
a img { border: none;vertical-align:middle;}
fieldset { border: none;}
li {list-style: none;}
/*input { padding:0 10px;height:24px; border:1px solid #ddd; background:ffffff;font-family:dotum;font-size:1em;border-radius:0 } */
textarea { /*text-align:left;*/ padding:4px 4px; border:1px solid #ddd; background:ffffff; }
select { /*text-align:left;*/ padding:4px 4px; border:1px solid #ddd; background:ffffff; }
input[type=text] { padding:0 10px;height:24px; border:1px solid #ddd; background:ffffff;font-family:dotum;font-size:1em;border-radius:0 }
input[type=button], input[type=submit], input[type=cancel] {padding:0 13px;height:24px; border:1px solid #ddd; background:ffffff;font-family:dotum;font-size:1em;border-radius:0 }
input[type=image], input[type=radio], input[type=check] {border:none;}
input.txt_common{ /*text-align:left;*/ padding:4px 4px;height:16px; border:1px solid #ddd; background:ffffff; }
input.btn_ok {padding:0 13px;height:24px;border:0;background:#006CD9;color:#fff;vertical-align:top;cursor:pointer}
input.btn_cancel {padding:0 13px;height:24px;border:0;background:#666;color:#fff;vertical-align:top;cursor:pointer}
input.btn_common {padding:0 13px;height:24px;border:1px solid #ccc;background:#f7f7f7;color:#000;vertical-align:top;cursor:pointer}
input.btn_ok:hover {background:#003991;}
input.btn_cancel:hover {background:#333;}
input.btn_common:hover {background:#CCC;}
.clearfloat { /* #content에서 .footer가 제거되거나 없어진 경우
이 클래스는 마지막 부동 div(#content 내) 뒤에 오는 최종 요소로 빈 div에 배치될 수 있습니다. */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*
가독성 좋은 순서 폰트 속성 : 굴림(체), 12pt, 자간 보통, 행간 140%, 글줄길이 17~20, 줄길이 대비 문장길이 120%,
앨리어스 None. 세리프가 있는 명조체보다 고딕체가 상대적으로 가독성 우수. PC모니터 상에서 12포인트의 크기가
가장 적당하고 행간은 150% 이상이면 무난, 자간은 넓히지 않은 기본 설정이 가장 무난
pt/px/em/%관계-------------
9pt 13px 0.75em 75% / 10pt 13px 0.8em 80%
12pt 16px 1em 100% / 13pt 17px 1.05em 105%
*/
/*******************유저 설정 *******************/
#header {
width:100%; /*넓이: 자동100%, 높이: 내용+padding */
/*background-color: #033F75; */
background-image:url(/images/bg_header.png);
background-repeat:repeat;
border-bottom:1px solid #000000;
}
#navt {
width:100%; /*넓이: 자동100%, 높이: 내용+padding */
/*height:44px; 자식이 padding,margin으로 만 되어있으면 크기를 정해줘야 background-color적용*/
background-color: #333333;
}
#footer {
width:100%; /*넓이: 자동100%, 높이: 내용+padding */
/*height:100%;*/
background-color: #F2F2F2;
border-top:1px solid #d3d3d3;
}
.vspace4{ display:block; height:4px; clear:both; }
.vspace6{ display:block; height:6px; clear:both; }
.vspace8{ display:block; height:8px; clear:both; }
.vspace10{ display:block; height:10px; clear:both; }
.vspace12{ display:block; height:13px; clear:both; }
.vspace14{ display:block; height:14px; clear:both; }
.vspace16{ display:block; height:16px; clear:both; }
.vspace18{ display:block; height:18px; clear:both; }
.vspace20{ display:block; height:20px; clear:both; }
.vspace30{ display:block; height:30px; clear:both; }
.vspace40{ display:block; height:40px; clear:both; }
.vspace50{ display:block; height:50px; clear:both; }
.vspace60{ display:block; height:60px; clear:both; }
.vspace100{ display:block; height:100px; clear:both; }
#lblPager
{
display:block;
width:100%;
text-align:center;
}
#refer
{
display:block;
width:100%;
text-align:left;
font-weight:bold;
}
#header0
{
/*overflow:hidden;*/ /*margin: 0 auto; IE10~외. 블록내용이 넘어갈경우 크기 조절*/
/*margin: 0 auto; IE8.0문제*/ /* 측면 자동 값, 폭으로 연결, 레이아웃 가운데 정렬 */
position:relative;
margin:0 auto; width:980px;
/*
width: 980px;
left:50%;
margin-left: -480px;
*/
text-align: center;
height: 60px;
}
#header0 img#logo_top
{
float:left;
/*margin-top:16px;*/
padding-left:10px;
width:220px;
height:60px;
}
#header0 form {
float:right;
padding-top: 18px;
}
#header0 #navt_top {
float:right;
padding-top: 18px;
}
#header0 #navt_top li{
list-style:none;
float:left;
padding-left: 8px;
padding-right: 8px;
text-align:center;
}
/*
#header0 #navt_top li:hover{
display:block;
background-image:url(../images/header_navt_bg_on.jpg);
}
*/
#header0 #navt_top li a:link,
#header0 #navt_top li a:visited,
#header0 #navt_top li a:hover,
#header0 #navt_top li a:active,
#header0 #navt_top li a:focus
{
font: 14px 맑은 고딕,Nanum Gothic, 돋움, 돋움, Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight:bold;
text-decoration: none;
}
#header0 #navt_top li a:hover
{
display:block; /*리스트가 아닌 block화 하라*/
background:#003973;
}
/*
#header2 li:hover {
display:block;
background-image:url(../images/header_navt_bg_on.jpg);
}
*/
#navt1
{
position:relative;
margin:0 auto; width:980px;
display:block;
height:44px; /****웹표준:높이넓이가 설정되어있어야 부모 배경색이 적용*******/
line-height:44px;
background-color: #333333;
/*
width: 980px;
left:50%;
margin-left: -480px;
*/
text-align: center;
}
#navt1 a:link,
#navt1 a:visited,
#navt1 a:hover,
#navt1 a:active,
#navt1 a:focus
{
font: 16px 맑은 고딕,Nanum Gothic, 돋움, 돋움, Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight:bold;
text-decoration: none;
height:44px; /****반드시해줘야 세로 정렬됨*******/
line-height:40px; /****반드시해줘야 세로 정렬됨*******/
}
#navt1>#navt11,
#navt1>#navt12,
#navt1>#navt13,
#navt1>#navt14,
#navt1>#navt15,
#navt1>#navt16,
#navt1>#navt17,
#navt1>#navt18
{
float:left;
/*display:table-cell; 텍스트가운데정렬 안됨x
vertical-align:middle;*/
height:44px; /****웹표준:높이넓이가 설정되어있어야 부모 배경색이 적용*******/
line-height:40px;
width:140px;
text-align:center;
/*padding-top:8px;*/
}
#navt1>#navt11:hover,
#navt1>#navt12:hover,
#navt1>#navt13:hover,
#navt1>#navt14:hover,
#navt1>#navt15:hover,
#navt1>#navt16:hover,
#navt1>#navt17:hover,
#navt1>#navt18:hover
{
display:block; /*ul,li일때;*/
/*background-image:url(../images/header_navt_bg_on.jpg); */
background-color:#505050;
}
#navt_s {
/*width: 100%;*/
/*overflow:hidden;*/ /*margin: 0 auto; IE10~외. 블록내용이 넘어갈경우 크기 조절*/
background-color: #505050; /*background-image:url(../images/header_navt1_bg.jpg);*/
}
#navt_s1
{
position:relative;
margin:0 auto; width:980px;
display:none;
height:40px;
line-height:38px;
/*
width: 980px;
left:50%;
margin-left: -480px;
*/
/*height: 70px;*/
/*z-index:auto;*/
}
#navt_s1 a:link,
#navt_s1 a:visited,
#navt_s1 a:hover,
#navt_s1 a:active,
#navt_s1 a:focus
{
font: 14px 맑은 고딕,Nanum Gothic, 돋움, 돋움, Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight:bold;
text-decoration: none;
height:40px;
line-height:38px;
}
#navt_s1 #navt_s11,
#navt_s1 #navt_s12,
#navt_s1 #navt_s13,
#navt_s1 #navt_s14
{
float:left;
display:none;
position:relative;
left:0px;
/*height:40px;*/ /*넓이: 자동100%, 높이: 내용+padding */
width:180px;
height:40px;
line-height:38px;
text-align:center;
}
#navt_s1 #navt_s11:hover,
#navt_s1 #navt_s12:hover,
#navt_s1 #navt_s13:hover,
#navt_s1 #navt_s14:hover
{
display:block;
background-color:#333333;
}
/*
#navt1 #navt13:hover
#navt_s1 #navt_s11
{
display:block;
background-color:#F90;
}
#navt1 #navt13:hover
#navt_s1 #navt_s12
{
display:block;
background-color:#F90;
}
#navt1 #navt13:hover
#navt_s1 #navt_s13
{
display:block;
background-color:#F90;
}
*/
#content
{
position:relative;
margin:0 auto; width:980px;
border-left: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
padding-left:13px;
padding-right:13px;
text-align:center;
background-color: #FFFFFF;
}
#content #content_l {
float: left;
text-align: center;
width: 200px;
padding-right:16px;
}
#content #content_c
{
float: right;
text-align: left;
width: 760px;
}
#content #content_c2 {
float: left;
text-align: center;
width: 760px;
}
#content #content_r {
float: right;
width: 220px;
text-align: center;
}
#contentlogin
{
overflow-x: hidden;
overflow-y: visible !important;
padding: 15px 15px;
text-align: center;
}
#footer0 {
/*overflow:hidden;*/ /*margin: 0 auto; IE10~외. 블록내용이 넘어갈경우 크기 조절*/
position:relative;
margin:0 auto; width:980px;
/*
width: 980px;
left:50%;
margin-left: -480px;
*/
height:180px;
}
#footer0 .logo
{
float:left;
padding-top:20px;
padding-left:30px;
padding-right:30px;
padding-bottom:40px;
text-align:center;
}
#footer0 .aboutus {
/*margin: 0 auto; IE8.0문제*/ /* 측면 자동 값, 폭으로 연결, 레이아웃 가운데 정렬 */
padding-top:20px;
padding-left:30px;
padding-right:30px;
padding-bottom:40px;
font: 13px 돋움, 맑은 고딕,Nanum Gothic, Arial, Helvetica, sans-serif;
color: #666666;
line-height:130%;
text-align:left;
}
.pager
{
text-align:center;
padding-top:10px;
}
.form_header, .form_content, .form_footer
{
text-align:center;
padding-top:14px;
}
/*
#ban_main_bg
{
width: 980px;
height: 240px;
overflow:hidden;
}
#ban_main_bg_s
{
width: 980px;
height: 120px;
overflow:hidden;
}
*/
.ban_main_title0
{
float:right;
padding-top:30px;
padding-right:70px;
font-size:24px;
color:#ffffff;
font-weight:bold;
font-family:돋움,굴림,dotum;
}
.ban_main_title1
{
float:right;
padding-top:30px;
padding-right:70px;
font-size:24px;
color:#ffffff;
font-weight:bold;
font-family:돋움,굴림,dotum;
}
.lmenu_head
{
height: 48px;
line-height: 48px;
font-weight: bold;
padding-right: 10px;
padding-left: 14px;
text-align: left;
clear: left;
font-size: 17px;
color: #2A5FA8;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #D1D9EE;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A5FA8;
}
.lmenu_list
{
height: 40px;
line-height: 40px;
text-align: left;
padding-right: 10px;
padding-left: 4px;
border-bottom-width: 1px;
font-weight: bold;
font-size: 14px;
border-bottom-style: solid;
border-bottom-color: #E4E8F2;
}
.lmenu_list:hover {
background-color: #E4E8F2;
}
.lmenu_head img,
.lmenu_list img{
padding-right: 8px;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 4px;
}
.lmenu_head2 {
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 14px;
text-align: left;
clear: left;
font-size: 17px;
color: #2A5FA8;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #D1D9EE;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A5FA8;
}
.lmenu_list2 {
text-align: left;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 4px;
border-bottom-width: 1px;
font-size: 13px;
border-bottom-style: solid;
border-bottom-color: #E4E8F2;
}
.lmenu_list2:hover
{
background-color: #E4E8F2;
}
.lmenu_head2 img,
.lmenu_list2 img{
padding-right: 2px;
text-align: center;
vertical-align: top;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.ban0 {
font-weight: bold;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 14px;
text-align: left;
clear: left;
font-size: 16px;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #D1D9EE;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A5FA8;
}
.ban00 {
text-align: left;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
font-weight: bold;
font-size: 13.6px;
/*
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E4E8F2;
border-right-color: #E4E8F2;
border-bottom-color: #E4E8F2;
border-left-color: #E4E8F2;
*/
}
.ban0 img,
.ban00 img{
padding-right: 8px;
text-align: center;
vertical-align: top;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.list_header
{
font-family: 맑은 고딕,Nanum Gothic,돋움;
font-size: 19px;
color: #333333;
display: block;
font-weight: bold;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #636870;
padding-right: 10px;
padding-left: 16px;
height: 48px;
line-height: 48px;
margin-bottom:8px;
}
.list_content{
font-size: 13px;
display: block;
font-weight: bold;
padding-top: 8px;
padding-bottom: 8px;
}
.list_content0{
font-size: 13px;
display: block;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 8px;
padding-right: 40px;
padding-bottom: 8px;
padding-left: 10px;
}
#content #content_c .list_content img
{
padding-right: 8px;
text-align: center;
vertical-align: top;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#content #content_c .list_content0 img {
text-align: center;
vertical-align: top;
padding-right: 8px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
table.gray_base
{
/* border:1px solid #e5e5e5;*/ /* border-spacing:1px;*/
border-collapse:collapse; /*테두리선겹침*/
/*border-spacing:0px; 테두리간격*/
/*rules="rows" 줄구분 선만 표시*/
width:100%;
margin: 0 auto; /*테이블마진 상하 0px, 좌우 auto. 수평남은여백을 좌우 동등 분배*/
}
table.gray_base th {
background-color:#F7F7F7;
color: #333;
text-align:left;
padding:6px 6px;
border:1px solid #e5e5e5; /* border-spacing:1px;*/
border-bottom:1px solid #E5E5E5;
}
table.gray_base td {
background-color:#FFF;
color: #333;
text-align:left;
padding:6px 6px;
border:1px solid #e5e5e5; /* border-spacing:1px;*/
border-bottom:1px solid #E5E5E5;
}
table.gray
{
/* border:1px solid #e5e5e5;*/ /* border-spacing:1px;*/
border-collapse:collapse; /*테두리선겹침*/
/*border-spacing:0px; 테두리간격*/
/*rules="rows" 줄구분 선만 표시*/
width:100%;
margin: 0 auto; /*테이블마진 상하 0px, 좌우 auto. 수평남은여백을 좌우 동등 분배*/
}
table.gray td.td_toptitle {
font-weight:bold;
font-size:14.6px;
color: #666;
padding:8px 16px;
border-top:1px solid #E5E5E5;
border-bottom:1px solid #E5E5E5;
}
table.gray td.td_header
{
font-weight:bold;
background-color:#F7F7F7;
color: #333;
padding:6px 6px;
text-align:center;
border-top:1px solid #E5E5E5;
border-bottom:1px solid #E5E5E5;
}
table.gray td.td_header_list
{
font-weight:bold;
background-color:#F7F7F7;
color: #333;
padding:6px 6px;
text-align:center;
border-left:none;
border-right:none; /* border-spacing:1px;*/
}
table.gray td.td_list {
background-color:#FFF;
color: #333;
text-align:left;
padding:6px 6px;
border-left:none;
border-right:none; /* border-spacing:1px;*/
}
table.gray td {
background-color:#FFF;
color: #333;
text-align:left;
padding:6px 6px;
border:1px solid #e5e5e5; /* border-spacing:1px;*/
}
table.gray td.td_title{
background-color:#F7F7F7;
color: #333;
text-align:right;
padding:6px 10px;
}
table.gray td.td_content{
padding:16px 16px;
height:200px;
vertical-align:top;
overflow-y:visible;
}
table.grayform
{
border-top:1px solid #e5e5e5; /* border-spacing:1px;*/
border-bottom:1px solid #e5e5e5; /* border-spacing:1px;*/
border-collapse:collapse; /*테두리선겹침*/
/*border-spacing:0px; 테두리간격*/
/*rules="rows" 줄구분 선만 표시*/
width:100%;
margin: 0 auto; /*테이블마진 상하 0px, 좌우 auto. 수평남은여백을 좌우 동등 분배*/
}
table.grayform td.td_toptitle {
font-weight:bold;
font-size:14.6px;
color: #666;
padding:8px 16px;
border-top:1px solid #E5E5E5;
border-bottom:1px solid #E5E5E5;
}
table.grayform td.td_header
{
font-weight:bold;
background-color:#F7F7F7;
color: #333;
padding:6px 6px;
text-align:center;
border-top:1px solid #E5E5E5;
border-bottom:1px solid #E5E5E5;
}
table.grayform td {
background-color:#FFF;
color: #333;
text-align:left;
padding:6px 6px;
border-bottom:1px dotted #ddd; /* border-spacing:1px;*/
}
table.grayform td.td_title{
background-color:#F7F7F7;
color: #333;
text-align:center;
padding:6px 6px;
/*border-right:1px dotted #e5e5e5;*/
}
table.grayform td.td_content{
padding:10px 10px;
height:200px;
vertical-align:top;
overflow-y:visible;
}
table.green
{
border:1px solid #C2CDAB; /* border-spacing:1px;*/
border-collapse:collapse; /*테두리선겹침*/
/*border-spacing:0px; 테두리간격*/
/*rules="rows" 줄구분 선만 표시*/
width:100%;
margin: 0 auto; /*테이블마진 상하 0px, 좌우 auto. 수평남은여백을 좌우 동등 분배*/
}
table.green td.td_header {
background-color:#EDFAE4;
color: #00793D;
text-align:center;
padding:6px 6px;
}
table.green td {
background-color:#FFF;
color: #333;
text-align:left;
padding:6px 6px;
border:1px solid #C2CDAB; /* border-spacing:1px;*/
}
table.green td.td_title{
background-color:#F8FFF4;
/*color: #444444;*/
text-align:center;
padding:6px 6px;
}
table.green td.td_content{
padding:10px 10px;
height:200px;
vertical-align:top;
overflow-y:visible;
}
table.blue {
border:1px solid #89CBFC; /* border-spacing:1px;*/
border-collapse:collapse; /*테두리선겹침*/
/*border-spacing:0px; 테두리간격*/
/*rules="rows" 줄구분 선만 표시*/
width:100%;
margin: 0 auto; /*테이블마진 상하 0px, 좌우 auto. 수평남은여백을 좌우 동등 분배*/
}
table.blue td.td_header {
background-color:#F0FAFF;
color: #1A63AC;
padding:6px 6px;
text-align:center;
}
table.blue td {
background-color:#FFF;
color: #333;
text-align:left;
padding:6px 6px;
border:1px solid #89CBFC; /* border-spacing:1px;*/
}
table.blue td.td_title{
background-color:#FBFEFF;
/*color: #444444;*/
text-align:center;
padding:6px 6px;
}
table.blue td.td_content{
padding:10px 10px;
height:200px;
vertical-align:top;
overflow-y:visible;
}
pre{
width:100%;
overflow:hidden;
word-break:break-all;
word-break:break-word;
line-height:21px;
white-space: pre-wrap; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.pager {
font-size: 11px;
font-weight:bold;
}
.pager a {
color: #15B;
}
.pager a, .pager span {
display: block;
float: left;
}
.pager .current {
color: #fff;
}
.pager .current.prev, .pager .current.next{
color:#999;
}
/*
.font_center {text-align: center} // 수평 중앙 정렬
//수직정렬
.button {
width: 150px;
height: 70px; // 글자를 감싸는 박스의 높이
}
.button > a{
display: block;
line-height: 70px; // 글자를 감싸는 박스의 높이와 같게 설정
}
//ie외 테이블중앙정렬
테이블의 마진을 상하는 0px로, 좌우는 auto.
수평방향으로 남은 여백을 좌우에 동등하게 분배한다는 의미인듯.
제일 좁은 범위를 갖는 스타일이 우선권을 갖습니다. 즉,
개별 태그의 스타일 속성
블록 (blockquote, p 같은) 스타일
문서의 head에서 규정한 스타일
외부에서 읽어 들인 css 파일에 있는 스타일
순서대로 우선순위가 있습니다. 1이 있다면 1을 적용, 없다면 2, 없다면 3,.. 식입니다. 만약 같은 레벨의 css끼리 충돌하면 먼저 나온 것보다 나중에 나온 것이 더 우선권을 갖습니다.
a:link, a:visited, a:hover, a:active
HTML5
header - 로고영역
navt1 - 메뉴부분
content - 본문 내용
aside - 서브 혹은 광고 컨텐츠
footer - 사이트 하단부
이외에
article - content 내의 주요 컨텐츠
hgroup - header 영역의 구조 담당
기본 구성
semantic : '의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻
header : 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨
navt1 : 사이트에 메뉴나 링크 같은 네비게이션 요소들이 포함
content : 실제 문서 내용이 들어감
article : 문서 내용이 많을 경우 여러개의 요소로 나눌 수 있음
aside : 문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치
footer : 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음, 주로 문서 하단에 배치
content안에 들어간 header는 소제목
이 달의 인물
article은 내용
교내 영상제에서 최우수상을 받은 이빛나양을 만나봅니다.
jQueryMobile의 레이아웃은 page 및 header, content, footer로 구성된다.
page와 header, content, footer는 다음과 같이 포함관계에 있다.
data-role="page"
└-> data-role="header"
└-> data-role="content"
└-> data-role="footer"
- data-role : html5의 data-* 태그로, jQueryMobile에서는 Layout 을 설정하는데 사용된다.
- page : 모바일 브라우저에 표시되는 하나의 페이지
- header : 페이지의 PageHeader 영역. 페이지 상단에 Toolbar 형태로 표현됨
- content : 실제 콘텐츠가 표시되는 영역
- footer : 페이지의 PageFooter 영역. 페이지 하단에 Toolbar 형태로 표현됨
- data-position : Layout 의 위치를 지정하는데 사용된다 "fixed"로 지정한 경우, 화면 하단의 고정위치로 표시된다.
*/