고정 헤더 영역
상세 컨텐츠
본문
반응형
웹디자인 기능사 실기 6일안에 합격하기 (3/6) : Header(헤더) 1
안녕하세요 A입니다.
공개문제 기준으로 앞선 포스트에서 웹디자인 기능사에서 구현해야할 과제물의 구성은 크게 1)헤더(Header), 2)슬라이드(Slide), 3)콘텐츠(Contents), 4)푸터(Footer) 라고 말씀드렸는데요,
3번째 포스트에서는 첫번째 구성요소인 '헤더(Header)'를 구현해보려고 합니다.
앞 포스트가 궁금하신 분들은
https://youngdesigners.tistory.com/39
웹디자인 기능사 실기 6일안에 합격하기 (1/6)
웹디자인기능사 실기 6일안에 합격하기 (1/6) 안녕하세요 A입니다. 저는 저번 8월말과 9월 초에 '컴퓨터그래픽스기능사'와 '웹디자인기능사' 실기를 둘 다 4일간 독학으로 공부 하고 시험을 쳤습니다. 그 결과 :..
youngdesigners.tistory.com
https://youngdesigners.tistory.com/40
웹디자인 기능사 실기 6일안에 합격하기 (2/6)
웹디자인 기능사 실기 6일안에 합격하기 (2/6) 웹디자인 기능사 필기에 합격하신 분들 축하드립니다! 이제 실기가 남았는데요, 웹디자인 기능사 실기 시험은 총 4시간..
youngdesigners.tistory.com
를 참고해주세요 :)
<!--웹디자인 기능사 헤더 구현하기(1/2) - 로고 구현 -->
헤더는 로고와 메뉴(주메뉴, 서브메뉴)로 이루어져있고, 우선 왼쪽 상단의 로고를 구현하겠습니다.
로고의 세부 지시사항은 다음과 같습니다.
A.1 로고
❍ 가로세로 200픽셀×40픽셀 크기로 웹사이트의 이미지에 적합한 로고를 직접 디 자인하여 삽입한다.
❍ 심벌 없이 로고명을 포함한 워드타입으로 디자인한다. 로고명은 Header 폴더의 제공된 텍스트 사용한다.
로고 div에 들어갈 로고 이미지가 필요하겠죠?
따라서 우선 일러스트레이터에서 '심벌없이 로고명을 포함한 워드타입'으로 이미지를 제작 하겠습니다.
본 시험에서는 로고에 들어갈 텍스트 파일이 제공이 되는데 공개문제에는 없으므로 임의로 'JUST 쇼핑몰'이라고 하겠습니다.
1. 파일-(File)-새로만들기(New)에서 가로 세로 200px, 40px인 대지(Artboard)를 만들어주세요.
2. 시험지 컬러가이드에 있는 기본 텍스트의 색(#222328)으로 로고를 디자인해주세요.
3. png 파일로 저장해주세요.
*로고 가장자리에 청록색선은 본 시험에서는 없어도 되지만 확인을 위해서 임의로 넣었습니다.
*로고는 꼭 일러스트레이터가 아니라도 괜찮으니 편한 툴로 만들어 주세요.
이미지를 완성 했으면 로고가 들어갈 Header 영역을 구현해야겠죠?
우선 index.html과 style.css 파일을 만들어 초기화를 하고 과제 와이어프레임에 맞게 페이지의 기본적인 틀(헤더/메인 슬라이드/ 콘텐츠 / 푸터 영역)을 설정 나눠줍니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JUST 쇼핑몰</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header class="whole">
<div class="header_div" >
헤더 영역
</div>
</header>
<div class="clear"></div>
<div class="mainslide_div whole">
메인 슬라이드 영역
</div>
<div class="clear"></div>
<div class="contents whole">
콘텐츠 영역
</div>
<div class="clear"></div>
<footer class ="footer whole">푸터 영역
</footer>
</body>
</html>style.css
/*CSS RESET*/
*{
margin: 0 auto; /*좌우 바깥 여백을 자동할당 시켜서 중앙정렬*/
padding : 0;
font-family: 맑은고딕;
}
a {text-decoration: none;
color: inherit; }
li {list-style: none;}
button{cursor: pointer;}
body,html{min-width:1200px;} /*작업조건 전체 가로영역 1200px*/
.clear{ clear: both; /*float 된 영역을 clear합니다.*/
position: inherit;}/*부모태그의 속성값을 상속받아 태그를 위치시킵니다.*/
.whole{
width: 100%;
float: left;
}
/*1. 헤더*/
.header_div{
height:100px;
width: 1200px;
}
/*2. 메인 슬라이드*/
.mainslide_div{
height: 300px;
}
/*3. 콘텐츠 영역*/
.contents{
height: 200px;
}
/*4. 푸터영역*/
.footer{
height: 100px;
background-color: #ABCDEF; /*배경색 : 주조색*/
width: 1200px;
color: #FFFFFF; /*글자색*/
overflow: hidden;/*이미지가 지정된 영역을 벗어나면 밖으로 넘치는 부분은 보이지 않게 합니다*/
}
2. 헤더 영역안에 로고 영역을 만들어주세요.
index.html
<div class="header_div" >
<div class="logo">
<a href=# > <!--모든 링크는 임시링크 되어야 합니다.-->
<img src=logo/logo.png alt="no"> <!--로고 이미지와 대체 텍스트(필수)-->
</a>
</div>
</div>3. 로고의 스타일(CSS)을 조정해주세요.
style.css
/*1. 헤더*/
.header_div{
height:100px;
width: 1200px;
}
.logo{
float:left;
overflow: hidden;
}
.logo img{
height: 40px;
width: 200px;
}4.로고영역이 완성되었습니다.
로고를 완성했으니 메뉴 영역을 이어서 만들어야 헤더가 완성됩니다.
다음 포스트에서는 헤더영역에 들어갈 메뉴(주메뉴, 서브메뉴)를 만들어볼게요.
https://youngdesigners.tistory.com/42
웹디자인 기능사 실기 6일안에 합격하기 (3/6) : Header(헤더) 2
웹디자인 기능사 실기 6일안에 합격하기 (3/6) : Header(헤더) 2 안녕하세요. 헤더는 로고와 메뉴(주메뉴, 서브메뉴)로 구성되데요, 이전 포스트에서는 헤더안에 들어갈 로고 이미지와 로고 부분을 구현했습니다...
youngdesigners.tistory.com
*이 포스트가 도움이 되었으면 공감(♡)을 눌러주세요. 감사합니다 :)
반응형
'IT✨ > 웹디자인' 카테고리의 다른 글
| 쉽고 빠르게 모달 UI 만들기 (html, css, js) (0) | 2019.11.26 |
|---|---|
| 웹디자인기능사 실기 6일안에 합격하기 (4/6) : Slide (슬라이드 영역) (0) | 2019.11.25 |
| 웹디자인 기능사 실기 6일안에 합격하기 (3/6) : Header(헤더) 2 (0) | 2019.11.19 |
| 웹디자인 기능사 실기 6일안에 합격하기 (2/6) (0) | 2019.11.19 |
| 웹디자인 기능사 실기 6일안에 합격하기 (1/6) (0) | 2019.11.19 |
댓글 영역