728x90
반응형
네비게이션
html 골격만들기
전체메뉴는 안보여도 되지만 ir_pm > 이미지를 대체할 때 사용할 때
ir_su : 아무것도 안들어가도 됨
h2에 class ir_su를 넣어서 전체메뉴가 안보이도록한다.
메뉴 만들어주기
css .nav편집
컬러가 있을 때는 padding 을 사용하는 것이 좋다.
padding 사용했을 때
margin 사용했을 때
div float 띄우고 부모(nav)에 clearfix 주기
단 나누기
a태그에 마우스 올렸을 때 밑줄 나오게 하기
**reset.css 에서 h3 태그만의 스타일을 지정해주고 html에 class = "h3" 이름만 넣어주면 공통적으로 스타일이들어간다.
.tit 편집
css에서 .tit 편집해주기
아이콘 넣어주기
ir_pm 으로 전체메뉴 글씨 없애주기
아래 아이콘 누르면 .nav 내려오게 하기
올라가는 방향 아이콘으로 바꿔주기
<html>
<section id="contents">
<article id="cont_nav">
<div class="container">
<h2 class="ir_su">전체메뉴</h2>
<div class="nav clearfix">
<div>
<h3 class="h3">HTML5</h3>
<ol class="clearfix">
<li><a href="#">html1</a></li>
<li><a href="#">html2</a></li>
<li><a href="#">html3</a></li>
<li><a href="#">html4</a></li>
<li><a href="#">html5</a></li>
<li><a href="#">html6</a></li>
<li><a href="#">html7</a></li>
<li><a href="#">html8</a></li>
<li><a href="#">html9</a></li>
<li><a href="#">html10</a></li>
</ol>
</div>
<div>
<h3 class="h3">CSS3</h3>
<ol class="clearfix">
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">css4</a></li>
<li><a href="#">css5</a></li>
<li><a href="#">css6</a></li>
<li><a href="#">css7</a></li>
<li><a href="#">css8</a></li>
<li><a href="#">css9</a></li>
<li><a href="#">css10</a></li>
<li><a href="#">css11</a></li>
<li><a href="#">css12</a></li>
</ol>
</div>
<div>
<h3 class="h3">웹표준</h3>
<ol class="clearfix">
<li><a href="#">웹표준1</a></li>
<li><a href="#">웹표준2</a></li>
<li><a href="#">웹표준3</a></li>
<li><a href="#">웹표준4</a></li>
<li><a href="#">웹표준5</a></li>
<li><a href="#">웹표준6</a></li>
<li><a href="#">웹표준7</a></li>
<li><a href="#">웹표준8</a></li>
</ol>
</div>
</div>
</div>
</article>
<article id="cont_tit">
<div class="container">
<div class="tit">
<h2> “ 프론트 엔드는 너무 쉬워서 금방 끝난다.” </h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</article>
<article id="cont_ban">
<div class="container"></div>
</article>
<article id="cont_cont">
<div class="container"></div>
</article>
</section>
<div id="footer">
<div class="container"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".tit .btn").click(function(){
// $(".nav").show();
// $(".nav").fadeIn(500);
// $(".nav").slideDown(500);
// $(".nav").CSS("dispaly","block");
// $(".nav").toggle();
$(".nav").slideToggle();
$(this).toggleClass("on");
});
</script>
</body>
</html><css>
/* nav */
.nav{
padding: 30px 0;
/* background-color: #4aa8d4; */
display: none;
}
.nav > div{
float: left;
width: 40%;
/* 전체너비의 40%사용 */
}
.nav > div:nth-of-type(3){
width: 20%;
/* 마지막 div 전체너비의 20%사용 */
}
/* .nav > div > h3{
font-size: 18px;
font-weight: bold;
color: #25a2d0;
하단 여백 띄워주기
margin-bottom: 4px;
} */
.nav > div > ol{}
.nav > div > ol > li{
width: 50%;
float: left;
}
.nav > div:nth-of-type(3) li{
width: 100%;
}
.nav > div > ol > li > a{}
.nav > div > ol > li > a:hover{
text-decoration: underline;
}
/* .tit */
.tit{
position: relative;
}
.tit h2{
font-size: 40px;
/* 아이콘 사이여백 넣기 위해 10px 추가 */
height: 70px;
line-height: 70px;
text-align: center;
font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
width: 60px;
height: 60px;
background: url(../image/icon.png) 0px -600px;
display: block;
position: absolute;
right: 0;
top: 5px;
}
.tit a.btn:hover{
background-position: -60px -600px;
}
.tit a.btn.on{
background-position: 0px -660px;
}
.tit a.btn.on:hover{
background-position: -60px -660px;
}배너 만들기
#con_ban 높이값, 배경색 없애주기
html 골격만들기
prev 와 next 사이에 ul > li > a > img 넣어주기
이미지 인라인구조이기 때문에 이미지 사이에 여백이생긴다.
여백을 없애주기 위해 블럭구조로 변경해준다.
css .ban 편집하기
.ban 위치잡기
position: absolute 시에 이미지가 겹쳐지는 현상이 생긴다.
ban 바로 밑에 있는 a에만 position을 줘야하는데, li 밑에 있는 a까지 명령이 간 상태.
→ > 표시를 해서 ban 바로밑에 있는 a에만 position 적용이 되도록한다.
li에 float 띄워서 옆으로 나열되도록한다. 부모인 ul에 clearfix 넣어주기
이미지 정렬해주기
이미지를 블럭구조로 바꿨기 때문에 다시 인라인블럭구조로 바꿔서 text-aline이 적용이 되도록한다.
.prev , .next 에 화살표 이미지 background-position이용해서 넣어주기
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
<meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
<meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
<meta name="generator" content="Visual Studio Code(작성도구)">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹표준_header</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<!-- 웹폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- 스킵 네비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_ban">배너 영역 바로가기</a>
<a href="#cont_cont">컨텐츠 영역 바로가기</a>
</div>
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<div class="header_menu">
<a href="#">로그인 가입</a>
<a href="#">CONTACT US</a>
<a href="#">ENGLISH</a>
</div>
<div class="header_tit mt50">
<h1>하이미디어 구로캠퍼스</h1><br>
<a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
</div>
<div class="header_icon mt30">
<a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
<a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
<a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
<a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
</div>
</div>
</div>
</div>
<section id="contents">
<article id="cont_nav">
<div class="container">
<h2 class="ir_su">전체메뉴</h2>
<div class="nav clearfix">
<div>
<h3 class="h3">HTML5</h3>
<ol class="clearfix">
<li><a href="#">html1</a></li>
<li><a href="#">html2</a></li>
<li><a href="#">html3</a></li>
<li><a href="#">html4</a></li>
<li><a href="#">html5</a></li>
<li><a href="#">html6</a></li>
<li><a href="#">html7</a></li>
<li><a href="#">html8</a></li>
<li><a href="#">html9</a></li>
<li><a href="#">html10</a></li>
</ol>
</div>
<div>
<h3 class="h3">CSS3</h3>
<ol class="clearfix">
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">css4</a></li>
<li><a href="#">css5</a></li>
<li><a href="#">css6</a></li>
<li><a href="#">css7</a></li>
<li><a href="#">css8</a></li>
<li><a href="#">css9</a></li>
<li><a href="#">css10</a></li>
<li><a href="#">css11</a></li>
<li><a href="#">css12</a></li>
</ol>
</div>
<div>
<h3 class="h3">웹표준</h3>
<ol class="clearfix">
<li><a href="#">웹표준1</a></li>
<li><a href="#">웹표준2</a></li>
<li><a href="#">웹표준3</a></li>
<li><a href="#">웹표준4</a></li>
<li><a href="#">웹표준5</a></li>
<li><a href="#">웹표준6</a></li>
<li><a href="#">웹표준7</a></li>
<li><a href="#">웹표준8</a></li>
</ol>
</div>
</div>
</div>
</article>
<article id="cont_tit">
<div class="container">
<div class="tit">
<h2> “ 프론트 엔드는 너무 쉬워서 금방 끝난다.” </h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</article>
<article id="cont_ban">
<div class="container">
<div class="ban">
<a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
<ul class="clearfix">
<li>
<a href="#"><img src="./image/ban1.png" alt="추상적인 이미지"></a>
</li>
<li>
<a href="#"><img src="./image/ban2.png" alt="나무 이미지"></a>
</li>
<li>
<a href="#"><img src="./image/ban3.png" alt="추상적인 이미지2"></a>
</li>
</ul>
<a href="#" class="next"><span class="ir_pm">다음 이미지</span></a>
</div>
</div>
</article>
<article id="cont_cont">
<div class="container"></div>
</article>
</section>
<div id="footer">
<div class="container"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".tit .btn").click(function(){
// $(".nav").show();
// $(".nav").fadeIn(500);
// $(".nav").slideDown(500);
// $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
// $(".nav").toggle();
$(".nav").slideToggle();
$(this).toggleClass("on");
});
</script>
</body>
</html><css>
@charset "utf-8";
#wrap{
width: 100%;
}
#header{
width: 100%;
height: 325px;
/* 헤더 이미지 높이 고려 */
background: url(../image/header_bg.jpg) no-repeat top center;
/* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}
#contents{}
#cont_nav{
width: 100%;
/* height: 200px; */
/* background-color: lightcoral; */
}
#cont_tit{
width: 100%;
/* height: 200px; */
background-color: lightcyan;
}
#cont_ban{
width: 100%;
/* height: 200px; */
/* background-color: lightgray; */
}
#cont_cont{
width: 100%;
height: 200px;
background-color: lightgreen;
}
#footer{
width: 100%;
height: 220px;
background-color: lightseagreen;
}
/* container */
.container{
width: 990px;
margin: 0 auto;
height: inherit;
background-color: rgba(255,255,255,0.3);
}
/* skip */
#skip{
/* 기준점 잡아주기 */
position: relative;
}
#skip a{
position: absolute;
width: 140px;
background-color: #333;
color: #fff;
height: 30px;
text-align: center;
line-height: 30px;
/* 탭 위치 설정 */
left:0;
top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
top: 0;
}
/* header */
.header{
/* height: 325px; */
}
.header .header_menu{
/* background-color: aqua; */
/* 메뉴 오른쪽으로 정렬하기 */
text-align: right;
}
.header .header_menu a{
color: #fff;
/* top,left,bottom 여백주기 */
padding: 10px 0 10px 20px;
/* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
display: inline-block;
/* 마우스 오버 속도 넣기 */
transition: all 0.5s;
}
.header .header_menu a:hover{
/* 마우스 오버시 글자색 바뀔수 있도록 한다. */
color: #333;
}
.header .header_tit{
/* background-color: red; */
text-align: center;
}
.header .header_tit h1{
color: #fff;
background-color: #4aa8d4;
font-size: 28px;
/* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
display: inline-block;
padding: 5px 20px;
transition: all 0.5s;
text-shadow: 0 2px 2px darkblue;
}
.header .header_tit h1:hover{
background-color: darkblue;
cursor: pointer;
}
.header .header_tit a{
font-size: 18px;
background-color: #2698cb;
display: inline-block;
/* 위아래 박스 여백이 없어짐 */
padding: 5px 20px;
color: #fff;
/* 위아래 박스 겹쳐지게하기 */
margin-top: -7px;
}
.header .header_icon{
text-align: center;
}
.header .header_icon a{
width: 60px;
height: 60px;
background-color: #333;
/* 인라인 구조이기 때문에 display: inline-block 적용*/
display: inline-block;
/* 양옆 여백주기 */
margin: 0 5px;
/* 아이콘 이미지 넣어주기 */
background: url(../image/icon.png);
}
.header .header_icon a.icon1{
background-position: 0px 0px;
/* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다. */
}
.header .header_icon a.icon2{
background-position: 0px -60px;
}
.header .header_icon a.icon3{
background-position: 0px -120px;
}
.header .header_icon a.icon4{
background-position: 0px -180px;
}
.header .header_icon a.icon1:hover{
background-position: -60px 0px;
}
.header .header_icon a.icon2:hover{
background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
background-position: -60px -180px;
}
.header .header_icon a span{
font-size: 0;
/* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}
/* nav */
.nav{
padding: 30px 0;
/* background-color: #4aa8d4; */
display: none;
}
.nav > div{
float: left;
width: 40%;
/* 전체너비의 40%사용 */
}
.nav > div:nth-of-type(3){
width: 20%;
/* 마지막 div 전체너비의 20%사용 */
}
/* .nav > div > h3{
font-size: 18px;
font-weight: bold;
color: #25a2d0;
하단 여백 띄워주기
margin-bottom: 4px;
} */
.nav > div > ol{}
.nav > div > ol > li{
width: 50%;
float: left;
}
.nav > div:nth-of-type(3) li{
width: 100%;
}
.nav > div > ol > li > a{}
.nav > div > ol > li > a:hover{
text-decoration: underline;
}
/* .tit */
.tit{
position: relative;
}
.tit h2{
font-size: 40px;
/* 아이콘 사이여백 넣기 위해 10px 추가 */
height: 70px;
line-height: 70px;
text-align: center;
font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
width: 60px;
height: 60px;
background: url(../image/icon.png) 0px -600px;
display: block;
position: absolute;
right: 0;
top: 5px;
}
.tit a.btn:hover{
background-position: -60px -600px;
}
.tit a.btn.on{
background-position: 0px -660px;
}
.tit a.btn.on:hover{
background-position: -60px -660px;
}
/* ban */
.ban{
/* 위아래 여백 30px*/
padding: 30px 0;
position: relative;
}
.ban > a{
/* a positon 띄워주기 */
position: absolute;
top: 60px;
height: 43px;
width: 43px;
}
.ban a.prev{
left: -80px;
width: 43px;
height: 43px;
background: url(../image/icon2.png) 1px 0px;
}
.ban a.next{
right: -80px;
width: 43px;
height: 43px;
background: url(../image/icon2.png) 1px -43px;
}
.ban a.prev:hover{
background: url(../image/icon2.png) -43px 0px;
}
.ban a.next:hover{
background: url(../image/icon2.png) -42px -43px;
}
.ban ul{}
.ban ul li{
width: 330px;
float: left;
}
.ban ul li:nth-of-type(1){
/* background-color: lightcyan; */
text-align: left;
}
.ban ul li:nth-of-type(2){
/* background-color: lightcoral; */
text-align: center;
}
.ban ul li:nth-of-type(3){
/* background-color: lightgoldenrodyellow; */
text-align: right;
}
.ban ul li a{}
.ban ul li a img{
display: inline-block;
/* img 블럭구조로 바꿔줘서 다시 inline-block 구조로 변경 */
}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 41 _ 패밀리사이트 (0) | 2023.06.21 |
|---|---|
| [JAVASCRIPT]2. 자바스크립트로 스타일 제어하기 (0) | 2023.06.20 |
| 비주얼 스튜디오 코드 39_ 검색창 만들기 (0) | 2023.06.20 |
| [JAVASCRIPT] 1. 기초 (0) | 2023.06.19 |
| 비주얼 스튜디오 코드 38_ 웹표준) menu (0) | 2023.06.19 |