안녕하세요. 오늘은 메인 웹페이지 리디자인 기초를 정리해볼까 합니다.
"제주 게스트하우스 요안도라 메인 웹페이지 만들기"인데요!
HTML/CSS 과정 초보가 따라해보기 좋은 작업입니다.
▼ 화면 설계 과정과 하단에는 전체 파일 코드와 사진까지 공유하고 있으니
참고하시어 연습해보심 좋을 것 같아요.
^^
그럼 시작하겠습니다.
1. 화면설계(구조/요소 분석하기)
- 가로 1000px
- 헤더 300px
- 내비게이션 50px
- section width 70%
- aside width 30%
(section float 사용해서 배치)
- footer
이렇게 화면설계를 위하여 구조를 분석하고 값을 지정해주었습니다.
2. 바디 Container 박스안에 Header 작성하기
<div id="container"> <!-- 전체 박스 -->
<header id="header">
<div id="titleBox">
<h1 id="title1">Joandora</h1> <br />
<h1 id="title2">가장 제주다운 수산리집</h1>
</div>
</header>
</div>
- body 안에 container 큰박스로 묶어주고 헤더 다음 title 박스는 div태그로 묶어주었습니다.
3. Style을 지정하기 위해 파일 새로 하나 만들어 .css 확장자로 별도로 지정하기
- 내부스타일시트 장/단점
- 장점: 바로 확인가능/단점:페이지를 새로 만들게 되면 페이지마다 만들어줘야합니다.
- 순수하게 스타일 내용만 적기. <style> 태그를 쓰지 않는 것을 주의해주세요!
※ 기존에는 내부 스타일 시트를 지정해왔지만, 스타일 정보를 따로 저장해놓은 외부스타일 시트를 사용해보도록 합니다.
- 외부스타일 시트 사용
- .css파일 확장자를 이용합니다.
- 사이트를 제작할 때 여러 웹문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때마다 가져와서 사용하는 것이 일반적입니다.
- 외부스타일 시트 연결해서 사용할 때는 <link> 태그를 사용합니다.
4. <!-- 외부 스타일 시트 연결 -->
<link rel="stylesheet" href="0515.css" /> 외부 스타일을 링크로 연결해주었습니다.
- 연결해주면 현재에는 공통사항과 폰트만 연결이 되어있기 때문에 위 사진처럼만 나옵니다.
5. 삽입할 소스, 사진 다운 받아서 삽입하기
삽입된 사진 파일을 담았습니다.
HTML/CSS 메인페이지 연습용도로 사용하시면 되겠습니다.
출처는 pixabay 무료이미지 입니다.
6. 0515.css 파일에 스타일 요소 주기
위에 파일첨부된 0515.css 파일에 스타일 요소들을 삽입했습니다.
※ 저와 같은 초보들도 이해를 돕기 위해 주석처리를 해놨으니 확인하시어 이해하시며 작업하심 좋을 것 같습니다.
#container { /*전체박스 영역*/
width: 1000px; margin: auto;
border: 1px solid #aaa;
}
#header { /*헤더 영역*/
width: 100%; /*컨테이너 기준의 100프로니까 1000px이 되는 것임*/
height: 300px;
background: url(images/jeju2.jpg) no-repeat center;
background-size: cover;
position:relative; /*헤더 영역에 내용 위치 맞추기*/
}
#titleBox { /*헤더 안에 타이틀 div 박스*/
position:absolute; /*relative에 맞추기*/
right: 1.5em; /*오른쪽에서 2글자 띄워진 분량*/
bottom: 3em;
text-align: right;
}
#title1 {
font-size: 3.5em;
color: #fff1b9;
text-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
#title2 {
font-size: 1.5em;
color: #fffcf0;
text-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
7. HTML 내비게이션 영역 만들어주기
<nav id="navi">
<ul id="menu">
<li class="list"><a href="#">이용 안내</a></li>
<li class="list"><a href="#">객실 소개</a></li>
<li class="list"><a href="#">예약 방법</a></li>
<li class="list"><a href="#">예약하기</a></li>
</ul>
</nav>
8. CSS 내비게이션 들어갈 스타일 작업하기
/*내비게이션 영역------*/
#navi {
width:100%; height: 50px;
background:black;
}
#menu {
list-style: none; padding: 0;
text-align: center;
}
.list {
width:20%; display:inline-block; /*20%씩 나누어 이어서 배치하기, 틈이 생김*/
}
.list > a {
display: block; /*항상 바꾸어놔야함, 공간 맞추고 채우는 역할 : 글씨가 아닌 옆에 공간도 누를 수 있게끔 채워진다.*/
line-height: 50px; /*세로 가운데 맞춤*/
color: #eee; font-size: 1.2em;
text-decoration: none; /*밑줄 제거*/
transition: .3s;
}
/*list 닿았을 때 전환*/
.list > a:hover {
background: #fae280;
line-height: 50px;
color:rgb(77, 75, 72);
}
9. HTML 섹션 영역 지정해주기
다시 HTML 파일로 가서 본문 - 섹션영역을 지정해줍니다.
<section id="sec1">
<h2>요안도라 소개</h2>
<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p> 내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. 그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다. </p>
<div id="imageBox">
<img src="images/bg.png" id="image" alt="이미지박스" />
<div id="caption">Lorem ipsum dolor sit amet.</div>
</div>
</section>
10. CSS 섹션 영역 스타일 작업하기
- 미리 어떤 스타일을 주어야할 지 생각하고 작성해놓으면 편하게 작업이 가능합니다.
/*섹션 영역-----------------------------------*/
#sec1 {
width: 70%; border: 1px solid #aaa;
float: left;
padding: .5em;
transition: .3s
}
#sec1 > h2 {
color: rgb(241, 208, 15);
font-size: 1.5em;
margin-bottom:1em;
}
#sec1 > h3 {
font-size: 1em;
margin-bottom:1em;
}
#sec1 > p {
line-height: 1.6em; margin-bottom: 1em;
text-align: justify; /*양쪽 정렬, 끝선 맞추기*/
}
#imageBox {
width: 100%; border: 3px solid #ccc;
position:relative; /*위치 기준*/
}
#image {
width: 100%; /*공간안에 이미지 채워짐*/
display: block;
transition: .3s;
}
#caption {
position:absolute; /*이미지 박스에 맞춰지도록*/
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,.3);
/*글씨 센터맞추기*/
color: #fff; font-size:1.2em;
text-align: center;
padding-top: 100px;
opacity: 0; /*투명 상태*/
transition:.3s;
}
#imageBox > #image { width:100%; transition: .3s; }
.list > a { }
11. CSS - 이미지박스에 닿으면 내부사진을 확대하고 이미지 박스에 닿으면 내부 캡션을 보이게 해주기
- 이미지에 애니메이션 효과를 주기 위해서 CSS파일에서 아래와 같이 transform과 opacity를 주었습니다.
/*이미지 박스에 닿으면 내부 사진을 확대*/
#imageBox:hover > #image {
transform: scale(1.05); /*5% 키우기*/
}
/*이미지 박스에 닿으면 내부 캡션을 보임*/
#imageBox:hover > #caption {
opacity: 1; /*불투명 상태*/
}
12. CSS - 이미지가 박스 밖으로 벗어나지 않게 해주기
- overflow:hidden; 을 줍니다.
#imageBox {
width: 100%; border: 3px solid #ccc;
position:relative; /*위치 기준*/
overflow:hidden;
}
13. Aside 영역(사이드영역/페이지내 오른쪽) html 사이드 영역 지정해주고 CSS 작업해주기
[HTMl 작업]
<!-- aside 영역이나 section으로 만드는 경우가 많다. -->
<aside id="side">
<h3>¤ 알립니다</h3>
<p>
게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.
인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.
</p>
<img src="images/home1.jpg" class="image"alt="집사진" />
<img src="images/home2.jpg" class="image"alt="집사진" />
<img src="images/home3.jpg" class="image"alt="집사진" />
</aside>
[CSS 작업 ]
/*사이드 영역 ----------*/
#side {
width: 30%; background: #fcf7e4;
float: right;
padding: .5em;
transition: .3s
}
#side > h3 {
font-size: 1em;
margin-bottom:1em;
}
#side > p {
line-height: 1.6em; margin-bottom: 1em;
text-align: justify; /*양쪽 정렬, 끝선 맞추기*/
}
.image {
width: 90%; /*공간안에 이미지 채워짐*/
display: block;
transition: .3s;
margin: 0.5em auto;
border: 1px solid #aaa;
}
.image:hover {
opacity: .8;
}
15. HTML 푸터(꼬릿말) 영역 지정해주고 푸터 부분 CSS 스타일 작업하기
[HTML 작업]
<footer id="foot">
<p><em>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라</em></p>
<p><em>yoan##@naver.com</em></p>
<p><em>Copyright ⓒ. All rights reserved.</p>
</footer>
[CSS 작업]
/*푸터(꼬리말) 영역---------------*/
#foot {
clear:both; /*직전의 float를 해제하는 역할*/
background: #fae280; padding:2em 0;
text-align: center;
color:rgb(49, 48, 46);
}
#foot > p {
margin:1em;
}
▼ 완성된 메인페이지 ▼
작업한 모든 결과물
애니메이션 효과도 넣었으니 확인해보세요~!
▼ 위에서부터 순서대로 작업한 제주 게스트하우스▼
▼펜션/숙박/민박 메인 웹페이지 HTML/CSS 코드 파일공유 ▼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제주요안도라</title>
<!-- 네이버 폰트 CDN 연결 -->
<!-- 외부 스타일 시트 연결 -->
<link rel="stylesheet" href="0515.css" />
</head>
<body>
<div id="container"> <!-- 전체 박스 -->
<header id="header">
<div id="titleBox">
<h1 id="title1">Joandora</h1> <br />
<h1 id="title2">가장 제주다운 수산리집</h1>
</div>
</header>
<nav id="navi">
<ul id="menu">
<li class="list"><a href="#">이용 안내</a></li>
<li class="list"><a href="#">객실 소개</a></li>
<li class="list"><a href="#">예약 방법</a></li>
<li class="list"><a href="#">예약하기</a></li>
</ul>
</nav>
<section id="sec1">
<h2>요안도라 소개</h2>
<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p> 내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. 그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다. </p>
<div id="imageBox">
<img src="images/bg.png" id="image" alt="이미지박스" />
<div id="caption">Lorem ipsum dolor sit amet.</div>
</div>
</section>
<!-- aside 영역이나 section으로 만드는 경우가 많다. -->
<aside id="side">
<h3>¤ 알립니다</h3>
<p>
게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.
인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.
</p>
<img src="images/home1.jpg" class="image"alt="집사진" />
<img src="images/home2.jpg" class="image"alt="집사진" />
<img src="images/home3.jpg" class="image"alt="집사진" />
</aside>
<footer id="foot">
<p><em>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라</em></p>
<p><em>yoan##@naver.com</em></p>
<p><em>Copyright ⓒ. All rights reserved.</p>
</footer>
</div> <!-- 전체박스 -->
</body>
</html>
'IT > 웹코딩기초' 카테고리의 다른 글
| [웹사이트_리디자인] 화면설계 - 와이어프레임, 메인페이지, 스토리보드 레이아웃 잡는 방법 (0) | 2023.05.23 |
|---|---|
| [CSS] Transition Animation 광주시 마우스 닿으면 위로 올라가며 바뀌는 로고 애니메이션 효과/HTMl 파일 공유 (0) | 2023.05.12 |
| [HTMl/CSS] 헤더, 메인, 푸터 섹션 나누기 / 시멘틱 태그 레이아웃 예제 (0) | 2023.05.10 |
| [HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기 (1) | 2023.05.09 |
| [CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리 (0) | 2023.05.08 |
댓글