홈페이지 만들기

IT 공부/HTML, CSS

홈페이지 만들기

toraa 2022. 6. 2. 12:33

webservice.html

<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="코딩, 전문, FlexCoding">
<meta name="Description" content="코딩전문서비스, 웹표준에 준거한 고품질 핸드코딩을 제공합니다.">

<link rel="stylesheet" type="text/css" href="../common/css/css1_base.css" media="all">
<link rel="stylesheet" type="text/css" href="../common/css/css4_layout_image.css" media="all">
<link rel="stylesheet" type="text/css" href="../common/css/css3_공유레이아웃.css" media="all">
<link rel="stylesheet" type="text/css" href="../common/css/css5_img내비게이션.css" media="all">

<title>서비스의 특징|코딩전문의 FlexCoding</title>
</head>
<body id="service">

<header id="header">
<div class="inner clearfix">
<h1 id="logo">
<a href="../index.html">
<img src="../common/img/logo.png" width="164" height="53" alt="FlexCoding">
</a>
</h1>
<p id="catch">
코딩 전문 서비스의 FlexCoding<br>
~웹 표준에 준거한 고품질 핸드 코딩을 제공합니다!~
</p>
<dl id="info">
<dt>TEL:</dt><dd>000-1234-5678</dd>
<dt>영업시간:</dt><dd>평일 10:00 ~ 19:00</dd>
<dt>주소 : </dt><dd>서울시 강남구 논현동 </dd>
</dl>
</h1>
</div>
</header>

<nav id="gnav">
<ul class="inner">
<li class="gnav01"><a href="#">홈</a></li>
<li class="gnav02"><a href="#">FlexCoding에 대하여</a></li>
<li class="gnav03"><a href="#">코딩대행</a></li>
<li class="gnav04"><a href="#">세미나. 레슨</a></li>
<li class="gnav05"><a href="#">흔히 하는 뻔한 질문</a></li>
<li class="gnav06"><a href="#">문의</a></li>
</ul>
</nav>

<div id="contents">
<nav id="breadcrumbs">
<ol>
<li><a href="#">홈</a></li>
<li><a href="#">코딩대행</a></li>
<li><a href="#">서비스의 특징</a></li>
</ol>
</nav>

<main id="main">
<section>
<h2 class="ptitle"><img src="../common/img/hdg_service.png" width="680" height="80" alt="서비스의 특징"></h2>

<section class="sec">
<h3>1. 종래의 전용 사이트는 물론 반응형 웹디자인에도 대응</h3>
<p class="hdg">PC나 스마트폰 전용 사이트 코딩은 물론, 반응형 웹디자인 코딩에도 대응합니다.
반응형 웹 디자인의 경우, 대응 브라우저는 IE9이상을 표준으로 하고 있으나
원한다면 IE8대응 코딩도 가능합니다. 타깃 브라우저나 사용하는 언어 규격등
고객의 희망에 맞춰 유연하게 대응할 수 있습니다. 상담해주세요.</p>
<p><a href="#">제작기법</a></p>
</section>

<section class="sec">
<h3>코딩 업무에 특화되어 있어 실현 가능한 놀라운 단가와 고품질</h3>
<p class="hdg">저희는 각종 부품 제작을 제외한 디자인이나 프로그램 개발은 취급하지 않습니다.(※).
코딩만을 전문으로 하면서 스태프의 전문성과 생산성을 높이기 위해 노력하고 있습니다.
품질과 단가, 납기 등 모든 면에서 고객이 만족할 수 있는 서비스를 제공하겠습니다.</p>
기존 플러그인이나 JQuery의 기본 메서드를 이용한 간단한 UI대응은 옵션으로 받겠습니다.</p>
<p class="icon"><a href="#">발주에 필요한 데이터 일람</a></p>
</section>
<section class="sec">
<h3>모든 화면의 디자인 데이터는 필요없습니다.</h3>
<p class="hdg">코딩회사는 대부분 코딩을 하는데 필요한 모든 화면의 데이터를 준비해줄 것을 요구하고 있습니다.
그러나 코딩을 위해 몇십, 몇백 페이지나 되는 데이터를 준비하는 것은 시간과 노력의 낭비입니다.<br>
동일 디자인으로 전개할 수 있는 템플릿 화면만 준비해 주시면 나머지 화면은 저희 회사에서 준비하겠습니다.
반응형 웹 디자인의 경우는 PC용 디자인 시안을 토대로 스마트폰용 코딩도 가능합니다.</p>
<p class="icon"><a href="#">발주에 필요한 데이터 일람</a></p>
</section>

<aside class="r_box sec">
<h4>단순한 외주 작업이 아니라 파트너로서.</h4>
<p class="r_box_tit">코딩을 단순한 작업이라 생각하기 쉽습니다. 그러나 코딩은 웹 사이트의 얼굴인 디자인과 숨은 얼굴인
소스코드 쌍방의 퀄리티를 담보하는 중요한 공정입니다.<br>
디자인과 프로그램 개발 의도를 파악해, 디자이너와 프로그래머가 안심하고 각자의 일에 전념할 수 있도록
그 중간 공정을 전담하는 일이 우리 코더의 역할입니다. 코딩 전문가로서 코딩 작업뿐만 아니라 제안이나
문제해결을 위한 피드백도 해드립니다. 신뢰 받는 고객의 파트너가 되도록 노력하겠습니다.</p>
</aside>

<p class="btn_inquiry">
<a href="#">
<img src="../common/img/btn_inquiry.png" width="360" height="82"
alt="코딩의뢰, 문의는 이곳으로">
</a>
</p>
</section>
</main>

<div id="side">
<nav id="menu">
<ul>
<li class="current"><a href="#">서비스의 특징</a></li>
<li><a href="#">이용의 흐름</a></li>
<li><a href="#">단가표</a></li>
</ul>
</nav>
<aside id="banner">
<p>
<a href="#"><img src="../common/img/bnr_mitsumori.png" width="180" height="90"
alt="인터넷으로 간단히! 간이 견적은 이쪽">
</a>
</p>
<p>
<a href="http://www.flexcoding.jp/blog/" target="_blank">
<img src="../common/img/bnr_blog.png" width="180" height="50"
alt="금단의 스태프 블로그">
</a>
</p>
</aside>
</div>

<p id="pagetop"><a href="#header">이 페이지의 상단으로</a></p>

</div>

<footer id="footer">
<div class="inner clearfix">
<ul id="flink">
<li><a href="#">사이트 정책</a></li>
<li><a href="#">개인정보보호정책</a></li>
<li><a href="#">사이트 맵</a></li>
</ul>
<p id="copyright"><small>CopyrightⓒflexCoding All Rights Reserved.</small></p>
</div>
</footer>

</body>
</html>

CSS1_base

(기본설정)
리셋 CSS + 사이트 공통 설정

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

기본 문자설정
body {
color: #666666;
font-family: sans-serif;
font-size: 87.5%;
line-height: 1.5;
}

목록 마커 비표시
ul, ol{
list-style-type: none;
}

테이블 셀 테두리 설정
table{
border-collapse: collapse;
border-spacing: 0;
}

이미지 및 양식부분의 상하 위치를 텍스트 중간에
img, input, select, textarea{
vertical-align: middle;
}

기본 링크 색 설정
a{
color: #00C4AB;
}
a:hover{
color:#CCE739;
}

이미지 링크 설정
a img{
opacity : 1;
}
a:hover img{
opacity: 0.7;
}

clearfix: float레이아웃에서 가상 clear:both처리
.clearfix:after{
content: "";
display: block;
clear: both;
}

CSS2_layout

@charset "UTF-8";

레이아웃 설정

헤더의 정렬 레이아웃과 gnav 그리고 footer속의 inner
.inner{
width: 940px;
margin: 0 auto;
}

body {
border-top:#cce739 5px solid;
}
#header{
padding: 10px 0;
border-top: #00c4ab sollid 5px;
background: url("../../common/img/bg_header.png") #e6e6e6;
}

#header>.inner{display: table;}
#logo{
margin-right: 20px;
display: table-cell;
vertical-align: middle;

filter: hue-rotate(90deg); 색조를 진하게 변경 - filter학습요망

}

#catch{
display: table-cell;
vertical-align: middle;
}
#info{
width: 20em;
padding: 10px;
border: 1px solid #ccc;
background: #fff;

display: table-cell;
vertical-align: middle;
}

헤더의 dt를 왼쪽으로 배치하고 여기서 앞에 것을 clear처리
#info dt{
clear: left;
float: left;
width: 6em;
}

#footer{
padding: 10px 0;
background: #e6e6e6;
}
#flink{
float: left;
}
#flink a{
padding: 0 10px;
background: url("../../img/ico_arw01.png") left center no-repeat;
color: #666;
text-decoration: none;
}

#flink a:hover{
text-decoration: underline;
}

#copyright{
float: right;
}

#gnav{
background-color: #00c4ab;
}
#gnav ul{
overflow: hidden;
}
#gnav li{
float: left;
width: 156px;
border-right: #fff 1px solid;
}

#gnav li:first-child{ 안잡히면 띄어쓰기
width: 153px;
border-left: #fff 1px solid;
}

#gnav a{
display: block;
padding: 10px 0;
text-align: center;
text-decoration: none;
color:#fff;
}
#gnav a:hover{
background: #cce739;
}

콘텐츠 영역
1) 콘텐츠박스 전체 설정 : 콘텐츠를 중앙으로 위치시킨다
#contents{
width: 898px;
margin: 0 auto;
padding: 10px 20px 0 20px;
border-left: #e6e6e6 1px solid;
border-right: #e6e6e6 1px solid;
}

2) 빵 부스러기 네비게이션에 대한 설정: 아래 여백을 주고 하단에 점선을 추가한다
#breadcrumbs{
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: #ccc 1px dotted;
}

#breadcrumbs li{
display: inline;
font-size: 83%;
}
#breadcrumbs li{
padding-right: 15px;
background: url("../../common/img/icon_arw01.png") right center no-repeat;
}

#main{
width: 680px;
margin-bottom: 40px;
float: right;
}
#side{
width: 180px;
margin-bottom: 40px;
float: left;
}
#pagetop{
clear: both;
}

CSS3_공유레이아웃

@charset "UTF-8";

메인콘텐츠 영역의 마진설정

- 각 요소에 고유의 margin을 설정하는 방법
- margin만 설정하여 범용 class별로 개별 margin을 설정하는 방법

페이지별 큰 제목
.ptitle{
margin-bottom: 30px;
}

섹션 스타일 지정
.sec{
margin-bottom: 30px;
}
.sec p+p{
margin-top: 10px;
}

부제목 설정
.hdg{
margin-bottom: 15px;
padding: 8px 10px;
border: #e6e6e6 1px solid;
background: url("../common/img/bg_hdg_grad.png") left bottom repeat-x #f2f2f2;
line-height: 1.2em;
border-radius: 3px;
box-shadow: 0 0 0 1px #fff inset;
}

.hdg span{
display: block;
padding-left: 5px;
border-left: #00c4ab 8px solid;
}

주의사항 설정
.note{
padding: 5px;
background: #f2f2f2;
font-size: 85%;
}

링크 아이콘
.icon{
text-align: right;
}
.icon a{
padding-left: 10px;
background: url('../../common/img/ico_arw02.png') Left center no-repeat;
}

문의버튼 설정
.btn_inquiry{
margin: 50px 0;
text-align: center;
}

aside박스 설정
.r_box{
padding: 15px;
border: #cce91d 1px solid;
background-color: #f8ffd1;
border-radius: 5px;
box-shadow: 0 0 0 2px #fff inset;
}

.r_box_tit{
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #79906f;
color: #79906f;
}

CSS4_layout image

@charset "UTF-8";

　 레이아웃 설정

헤더의 정렬레이아웃과   글로벌 nav  그리고  푸터에 있는 레이아웃 :  두군데 inner클래스
.inner{
   width: 940px;
   margin: 0 auto;
}

헤더상세 레이아웃지정

body{
   border-top: #cce739 5px solid;
}

#header{
   padding: 10px 0;
   border-top: #00c4ab solid 5px;
   background: url("../../common/img/bg_header.png") #e6e6e6;
}

#header>.inner{display: table;}

#logo{
   margin-right:20px;
   display: table-cell;
   vertical-align: middle;

   filter: hue-rotate(90deg);
}
#catch{
   display: table-cell;
   vertical-align: middle;

}
#info{
   width: 20em;
   padding: 10px;
   border: 1px solid #ccc;
   background: #fff;

   display: table-cell;
   vertical-align: middle;
}

#info dt{
   clear:left;
   float:left;
   width: 6em;
}

2. 푸터 레이아웃 지정

#footer{
   padding: 10px 0;
   background: #e6e6e6;
}

1) 푸터의 ul을  왼쪽에 배치
#flink {
   float: left;
}

2) 목록을 가로로 배치
#flink li{
   display: inline;
}

3) ul의  앵커태그에  글자에 대한 이미지 지정
#flink a{
   padding: 0 10px;
   background: url(../../common/img/ico_arw01.png)  left center no-repeat;   /* 이미지(>>)를  반복없이 왼쪽, 중앙에 위치 */
   color: #666;
   text-decoration: none;
}

3) ul의  앵커태그에  hover되었을때 글자에 밑줄처리 지정 */
#flink a:hover{
   text-decoration: underline;
}

4) a태그에 hover되었을때
#copyright{
   float:right;
}

/* ********************************************************************************** */

글로벌 네비게이션 레이아웃설정 - 이 부분을  css3_img내비게이션에서 다시 작성하기 위해 막아놓는다.

      1) 배경색 지정
#gnav{
   background-color: #00c4ab;
}

#gnav ul{
   overflow: hidden;
}

#gnav li{
   float: left;
   width: 156px;
   border-right: #fff 1px solid;
}

#gnav li:first-child{
   width: 153px;
   border-left: #fff 1px solid;
}

#gnav a{
   display: block;
   padding: 10px 0;
   text-align: center;
   text-decoration: none;
   color: #fff;
}

#gnav a:hover{
   background: #cce739;
}

#gnav a.selected{
   background: #fff;
   color:#00c4ab;
   font-weight: bold;
}
*/
/* ********************************************************************************** */

콘텐츠 영역
콘텐츠박스 전체 설정 : 콘텐츠를 중앙으로 위치시킨다
#contents{
   width: 898px;
   margin: 0 auto;
   padding: 10px 20px 0 20px;
   border-left: #e6e6e6 1px solid;
   border-right: #e6e6e6 1px solid;
}

빵 부스러기 네비게이션에 대한 설정: 아래 여백을 주고, 하단에 점선을 추가한다
#breadcrumbs{
   margin-bottom: 30px;
   padding-bottom: 10px;
   border-bottom: #ccc 1px dotted;
}

목록을 옆으로 하고 글자크기를 지정한다
#breadcrumbs li{
   display: inline;
   font-size: 83%;
}

목록에  안쪽 여백을 주고 이미지(>>)를 목록별 오른쪽 중앙에 반복없이 설정한다
#breadcrumbs li{
   padding-right: 15px;
   background: url('../../common/img/ico_arw01.png') right center no-repeat;
}

메인 콘텐츠 전체 설정
#main{
   width: 680px;
   margin-botton: 40px;
   float: right;
}

사이트바(내비+이미지)영역 설정
#side{
    width:180px;
   margin-bottom: 40px;
   float: left;
}

"페이지 상단" 에서 clear:both 처리해서 위의 float배치정렬
#pagetop{
   clear:both;
}

/*--------------------------
　   공유 레이아웃
---------------------------*/

.ptitle{
   /margin-bottom: 30px;
}

.sec{
   margin-bottom: 30px;
}
.sec p+p{ 인접선택자 - 두번째 p에 지정
   margin-top:10px;
}

.hdg{
   margin-bottom: 15px;
   padding: 8px 10px;
   border: #e6e6e6 1px solid;
   background: url('../common/img/bg_hdg_grad.png') left bottom repeat-x #f2f2f2;
   line-height: 1.2;
   border-radius: 3px;
   box-shadow: 0 0 0 1px #fff inset;
}

.hdg span {
   display: block;
   padding-left:5px;
   border-left:#00c4ab 8px solid;
}

주의사항
.note{
   padding:5px;
   background: #f2f2f2;
   font-size: 85%;
}

아이콘 링크: 제작기번,단가표,기법 아이콘 오른쪽으로 배치
.icon{
   text-align: right;
}
.icon a{
   padding-left: 10px;      /*  >> 이미지설정 */
   background: url('../../common/img/ico_arw02.png') left center no-repeat;
}

문의버튼 설정 : 하단 중안앙의 이미지 html쪽에서 붙여놓았음
.btn_inquiry{
   margin: 50px 0;
   text-align: center;
}

둥근 모서리 테두리 설정: 아래측 하단 aside박스 설정
.r_box{
    padding: 15px;
   border: #cce91d 1px solid;
   background: #f8ffd1;
   boder-radius:5px;
   box-shadow: 0 0 0 2px #fff inset;
}

aside박스안의 h3 박스 설정: 제목아래에 밑줄처리
.r_box_tit{
   margin-bottom: 15px;
   padding-bottom: 5px;
   border-bottom: 1px solid #79906f;
   color: #79906f;
}

CSS5_이미지 내비게이션

CSS스프라이트 방식
; 여러 화면에, 여러 곳에 사용될 이미지를 한곳에 모아서 background-position으로
위치를 바꿔가면서 이미지를 적용하는 기법이다.

. 이미지 불러오기를 한번에 처리할 수 있다.
. 출력시간이 빠르다.
. 이미지를 만드는 어려움도 있다.

CSS 시그니쳐 방식
; body에 class와 id를 부여해서 페이지별 디자인을 CSS를 통해서 선택 적용할 수 있다.
- 카테고리 : class
- 페이지 시그니쳐 : id

* 이미지 정보
156 157 157 157 156

40 - 보통
40 - 롤 오버 (투명색)
40 - 현재위치 (배경색)

* 글로벌 메뉴
ul ) overflow: hidden
li ) float: left
a ) block, width, height,
글자처리 : text-indent: -9999px
background-position: left top

@charset "UTF-8";

#gnav{
   background-color: #00c4ab;
}

#gnav ul{
   overflow: hidden;
}

#gnav li{
   float: left;
}

#gnav a{
   display: block;
   width: 157px;
   height: 40px;
   background: url(".././img/gnav.png") no-repeat;
   text-indent: -9999px;
   color: #fff;

   background-position: 0 0;

}

#gnav .gnav01 a,
#gnav .gnav06 a{
   width: 156px;
}

#gnav .gnav01 a{background-position: 0px 0px;}
#gnav .gnav02 a{background-position: -156px 0px;}
#gnav .gnav03 a{background-position: -313px 0px;}
#gnav .gnav04 a{background-position: -470px 0px;}
#gnav .gnav05 a{background-position: -627px 0px;}
#gnav .gnav06 a{background-position: -784px 0px;}

CSS스프라이트: 롤오버표시) 각 목록별에 따른 롤오버시의  배경이미지의 위치를 지정

#gnav .gnav01 a:hover{background-position:   0px -40px;}
#gnav .gnav02 a:hover{background-position: -156px -40px;}
#gnav .gnav03 a:hover{background-position: -313px -40px;}
#gnav .gnav04 a:hover{background-position: -470px -40px;}
#gnav .gnav05 a:hover{background-position: -627px -40px;}
#gnav .gnav06 a:hover{background-position: -784px -40px;}
*/

맨 아래의 이미지를 적용해 보자.

#gnav .gnav01 a:hover{background-position: 0 -80px;}
#gnav .gnav02 a:hover{background-position: -156px -80px;}
#gnav .gnav03 a:hover{background-position: -313px -80px;}
#gnav .gnav04 a:hover{background-position: -470px -80px;}
#gnav .gnav05 a:hover{background-position: -627px -80px;}
#gnav .gnav06 a:hover{background-position: -784px -80px;}

저작자표시 (새창열림)

'IT 공부 > HTML, CSS' 카테고리의 다른 글

2차원 변형, 애니메이션 (1)	2022.05.30
레이아웃 (0)	2022.05.30
문서구조화 (0)	2022.05.27
배치 (0)	2022.05.27
layout, display, position (0)	2022.05.26

현재글홈페이지 만들기

기록 저장소