웹표준 사이트 실습 예제 #6 PC/모바일 반응형 웹

웹접근성과 웹표준 2013. 8. 26. 17:24

1. HOME 화면

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</style>

</head>

<body>

</div>

<li><a href="about.html">ABOUT</a></li>

<li><a href="portfolio.html">PORTFOLIO</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</div>

<p class="caption">새로운 기술을 학습합니다. </p>

</div>

<i></i><span>팩스</span>(02)000-1111

</address>

</div>

</body>

</html>

2. ABOUT 화면

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ABOUT:YM</title>

</style>

</head>

<body>

</div>

<li class="current"><a href="about.html">ABOUT</a></li>

<li><a href="portfolio.html">PORTFOLIO</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</div>

<h1>about</h1>

<p>가족의 웃음이 담긴 따뜻한 사진에도, 친구와 함께 듣는 즐거운 음악에도, 연인을 위해 정성들인 맛있는 음식에도 일상의 작은 감동이 만드는 행복함이 있습니다. 마음을 나누는 행복한 생활 속에 삼성이 언제나 함께 하고 있습니다. 신뢰와 사랑으로 성장해 온 삼성은 더 좋은 세상을 위해 노력합니다.</p>

</div>

<h2>사람과 환경을 존중하는 지속가능경영을 실천합니다.</h2>

<p>장기적인 관점에서의 성장과 번영을 위한 친환경 녹색경영과 사회적 책임을 실천합니다. 기업시민으로서 사회구성원들과 서로 돕고 사랑을 나누는 삼성은 사랑,기업,사회, 환경의 조화로운 발전을 위해 노력합니다. 우리 아이들의 밝고 건강한 미래를 위해 삼성은 아름다운 세상을 만들어 갑니다.</p>

</div>

<p>전자,기계,화학,금융 등 대한민국을 뛰어 넘어 세계 속에 우뚝 선 우리의 대표 브랜드 삼성. 글로벌 일류기업으로서 최고의 기술력과 최상의 서비스, 새로운 미래를 위한 끊임없는 도전과 혁신으로 생각의 변화를 주도하고 있습니다. 삼성은 항상 여러분의 생활 속에 함께 합니다.</p>

</div>

<i></i><span>전화</span>(02)000-0000 <i></i><span>팩스</span>(02)000-1111

</address>

</div>

</body>

</html>

3. PORTFOLIO 화면

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>PORTFOLIO:YM</title>

</style>

</head>

<body>

</div>

<li><a href="about.html">ABOUT</a></li>

<li class="current"><a href="portfolio.html">PORTFOLIO</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</div>

<h1>portfolio</h1>

<!--

</ul>

</div>

-->

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

</div>

<i></i><span>전화</span>(02)000-0000 <i></i><span>팩스</span>(02)000-1111

</address>

</div>

</body>

</html>

4. CONTACT 화면

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CONTACT:YM</title>

</style>

</head>

<body>

</div>

<li><a href="about.html">ABOUT</a></li>

<li><a href="portfolio.html">PORTFOLIO</a></li>

<li class="current"><a href="contact.html" >CONTACT</a></li>

</ul>

</div>

<h1>contact</h1>

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

<p>Gender</p>

<label for="woman">female</label> <input type="radio" name="pgender" id="woman" value="woman" />

</p>

</li>

<li>

<p><label for="message">Message</label></p>

</li>

<li>

</li>

</ul>

</form>

</div>

</div>

<i class="phone"></i><span>전화</span>(02)000-0000 <i class="fax"></i><span>팩스</span>(02)000-1111

</address>

<div title="Code: 0xe804" class="the-icons span3"><i class="icon-briefcase"></i> <span class="i-name">icon-briefcase</span><span class="i-code">0xe804</span></div>

<div title="Code: 0xe803" class="the-icons span3"><i class="icon-phone"></i> <span class="i-name">icon-phone</span><span class="i-code">0xe803</span></div>

</div>

</body>

</html>

5. desktop.css

@charset "utf-8";

@font-face {

font-family: 'Nanum Gothic';

src: url('../font/nanum.ttf') ;

}

@font-face {

font-family: 'Yanone';

src: url('../font/Yanone.woff') ;

}

html, body {

width: 100%; height: 100%;

}

body, div, p, ul, ol, li, h1, h2, h3, h4 {

padding: 0; margin: 0;

}

ol, ul, li {

list-style: none;

}

img {

border: none;

}

body {

font-family: 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 20px;

color: #676767;

border-top: 7px solid #7CC0CB;

}

.hidden {

display: none;

}

.noVisible {

visibility: hidden;

position: absolute;

font-size: 0;

width: 0;

height: 0;

line-height: 0;

margin: 0;

padding: 0;

background: none;

}

#skipNav a {

display:block; height:1px; width:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0;

}

#skipNav a:hover, #skipNav a:active, #skipNav a:focus {

width:100%; height:auto; margin:0; padding:5px;

font-size:12px; line-height:1; text-decoration:none; text-align: center;

}

#footer a {

color: #fff;

text-decoration: none;

}

#wrap {

width: 960px;

margin: 0 auto;

}

#header {

width: 100%;

padding: 30px 0;

}

#logo, #logo a {

float: left;

}

#menu {

z-index: 999;

float: right;

margin: 23px 0 0 0;

}

#menu li {

display: inline;

margin: 0 0 0 20px;

}

#menu li a {

font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

font-size: 24px;

color: #999;

text-decoration: none;

}

#header:after {

display: block;

content: "";

clear: both;

}

#campaign {

position: relative;

}

#campaign .caption {

z-index: 500;

position: absolute;

bottom: 72px;

left: 0;

padding: 20px;

background: #7CC0CB;

background: rgba(124,192,203,0.7);

color: #FFF;

font-size: 22px;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);

}

#campaign img {

display: block;

}

#footer {

padding: 20px 0 15px;

margin-top: 70px;

background-color: #7CC0CB;

font-size: 0.9em;

text-align: center;

font-style: normal;

color: #fff;

clear: both;

}

#contents:after {

display: block;

content: "";

clear: both;

}

/* 메뉴에 현재 문서 표시 */

#menu li.current a{

color: #7CC0CB;

}

/* 타이틀 */

#contents h1 {

color: #888888;

font-size: 50px;

line-height: 70px;

padding: 0 0 15px 0 ;

margin-bottom: 30px;

border-bottom: 4px solid #888888;

text-transform:uppercase;

text-shadow: 1px 1px 1px #CECECE;

font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

}

/* about */

.onethird {

width: 306px;

margin-right: 21px;

float: left;

}

.last {

margin-right: 0;

float: right;

}

h2 {

font-size: 18px;

line-height: 25px;

margin-bottom: 15px;

}

/* contact */

.onehalf {

float: left;

width: 470px;

margin-right: 0;

}

.twohalf {

float: right;

width: 470px;

margin-right: 0;

}

form{

padding: 5%;

background-color: #f4f4f4;

-moz-box-shadow: 3px 3px 3px #CECECE;

-webkit-box-shadow: 3px 3px 3px #CECECE;

box-shadow: 3px 3px 3px #CECECE;

behavior: url("PIE.htc");

overflow: hidden;

}

form li{

position: relative;

margin-bottom: 12px;

}

form em {

color: #aaaaaa;

font-size: 11px;

font-style: normal;

}

form input, form textarea {

width: 85%;

position: relative;

padding: 2px 10px;

}

form input[type="radio"] {

width: 20px;

margin-right: 20px;

}

form input[type="submit"] {

width: 110px;

cursor: pointer;

text-align: center;

text-transform: uppercase;

font-size: 11px;

font-weight: bold;

line-height: 14px;

color: #fff;

text-decoration: none !important;

padding: 2% 12px;

background: #7CC0CB;

border: none;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

box-shadow: 0 0 0;

-moz-box-shadow: 0 0 0;

-webkit-box-shadow: 0 0 0;

behavior: url("PIE.htc");

}

form input[type="submit"]:hover {

background-color: #707070;

color: #fff;

}

/* 추가 css 리셋 */

img,input,select,textarea, label {

vertical-align: middle;

}

/* portfolio */

.portfolio ul {

overflow: hidden;

margin-left: -6px;

}

.portfolio li {

width: 235px;

height: 210px;

text-align: center;

float: left;

position: relative;

margin: 0 0 6px 6px;

padding: 0;

background-color: #f4f4f4;

-moz-box-shadow: 1px 1px 1px #CECECE;

-webkit-box-shadow: 1px 1px 1px #CECECE;

box-shadow: 1px 1px 1px #CECECE;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

behavior: url("PIE.htc");

}

.portfolio li img {

width: 100%;

-moz-border-top-left-radius: 10px;

-webkit-border-top-left-radius: 10px;

border-top-left-radius: 10px;

-moz-border-top-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

border-top-right-radius: 10px;

behavior: url("PIE.htc");

}

.portfolio li p {

padding: 15px;

font-weight: bold;

}

6. mobile.css

@charset "utf-8";

@font-face {

font-family: 'Nanum Gothic';

src: url('../font/nanum.ttf') ; /*웹폰트 불러오기*/

}

@font-face {

font-family: 'Yanone';

src: url('../font/Yanone.woff') ; /*웹폰트 불러오기*/

}

@font-face {

font-family: 'fontello';

src: url('../font/fontello.eot?92193028');

src: url('../font/fontello.eot?92193028#iefix') format('embedded-opentype'),

url('../font/fontello.woff?92193028') format('woff'),

url('../font/fontello.ttf?92193028') format('truetype'),

url('../font/fontello.svg?92193028#fontello') format('svg');

font-weight: normal;

font-style: normal;

}

html, body {

width: 100%; height: 100%;

}

body, div, p, ul, ol, li, h1, h2, h3, h4 {

padding: 0; margin: 0;

}

ol, ul, li {

list-style: none;

}

img {

border: none;

}

body {

font-family: 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 20px;

color: #676767;

}

.hidden {

display: none;

}

.noVisible {

visibility: hidden;

position: absolute;

font-size: 0;

width: 0;

height: 0;

line-height: 0;

margin: 0;

padding: 0;

background: none;

}

#skipNav a {

display:block; height:1px; width:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0;

}

#skipNav a:hover, #skipNav a:active, #skipNav a:focus {

width:100%; height:auto; margin:0; padding:5px;

font-size:12px; line-height:1; text-decoration:none; text-align: center;

}

#footer a {

color: #fff;

text-decoration: none;

}

#wrap{width:300px;margin:0 auto;} /*모바일은 통상 가로폭 300으로 잡고 시작*/

#header{width:100%;padding:30px 0;}

#logo {text-align:center;}

#menu li{display:inline;margin: 0 0 0 12px;} /*원래 블록요소였던 것은 인라인요소로 바꿔도 기본요소는 어느정도 가져감. 원래 인라인은 상하여백 조절이 불가함*/

#menu li:first-child{margin:0;}

#menu {text-align:center;margin-top:23px;}

#menu li a {

font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif; /*불러온 웹폰트 적용*/

font-size: 24px;

color: #999;

text-decoration: none;

}

#menu li.current a{color: #7CC0CB;} /* 메뉴에 현재 문서는 파란색으로 표시 */

#campaign img{

max-width:300px; /* 모바일에 맞춰 이미지 사이즈 최대치의 사이즈를 설정. 부모가 되는 wrap에 일치시킴. */

height:auto; /* 위의 사이즈 변경에 따른 높이값도 자동으로 비례 일치시킴 */

}

.onehalf iframe{

max-width:300px; /* 모바일에 맞춰 구글맵 iframe 사이즈 최대치의 사이즈를 설정. 부모가 되는 wrap에 일치시킴. */

height:auto;

}

#footer {

padding: 20px 0 15px;

margin-top: 70px;

background-color: #7CC0CB;

font-size: 0.9em;

text-align: center;

font-style: normal;

color: #fff;

}

.phone:before {

font-family: "fontello";

content: '\e804';

}

.fax:before{

font-family: "fontello";

content: '\e803';

}

#footer i {margin: 0 5px 0 10px;}

< 모바일 화면 >

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

테이블 선 색깔 다를 때 선겹침 해결방법 css (1)	2019.08.07
이메일에 html 적용하기 (0)	2017.09.08
워드프레스(WordPress) 설치하기 (0)	2013.08.25
모바일 웹사이트 구축과 반응형 웹 (0)	2013.08.24
네이버 검색을 이용한 input바 만들기 (0)	2013.08.23