1. 나이키 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css" />
<style type="text/css">
body {
overflow-y: scroll; /*세로 스크롤바 항상 표시*/
font-size:12px; /*폰트 크기 */
font-family: helvetica, arial, verdana, tahoma, 'NanumGothic', '나눔고딕', Malgun Gothic, '맑은고딕', Apple Gothic, Dotum, '돋움', sans-serif; /*글꼴*/
}
a {
text-decoration: none; /*링크 url 밑줄선 없애기*/
}
.Local-tab {
position: relative; /*relative: 요소 자기 자신을 기준으로 배치*/
width: 100%;
padding: 20px 0;
text-align: center;
}
.Local-tab .conTab .tab {
position: relative;
width: 547px;
height: 30px;
margin: 50px auto 30px;
background: #f7f7f7;
border: 1px solid #dfdfdf;
}
.Local-tab .conTab .tab .active-tab {
top: -1px;
width: 143px;
background: url(img/bg_pdp_localtab.png) no-repeat;
position: absolute; /*absolute: 부모(조상) 요소를 기준으로 배치*/
top: 0;
left: 0;
height: 30px;
line-height: 30px;
height: 40px;
color: #fff;
transition:.2s ease;
}
.Local-tab .conTab .tab>ul>li {
float: left;
font-size: 11px;
font-weight: bold;
color: #333;
width: 135px;
text-align: center;
height: 30px;
line-height: 30px;
}
.Local-tab .conTab .tab>ul>li >a {
color: #333;
}
.Local-tab .conTab .tab>ul>li >a {
display: block;
}
.conArea {
position: absolute;
left: 50%;
top: 50px;
width: 1180px;
margin-left: -580px;
padding: 0 0px;
text-align: left;
display: none;
}
.conArea.show {
display: block;
}
</style>
</head>
<body>
<div class="Local-tab"> <!--상세정보 ,배송/결제정보 ,유의사항 -->
<div class="conTab">
<div class="tab">
<div class="active-tab">상세정보</div>
<ul class="clx">
<!--상세정보-->
<li>
<a href="#" class="menu" data-index="0" id="conTabSub1">상세정보</a>
<div class="conArea show">
<img src="img/n1.png"/>
</div>
</li>
<!--배송/결제 정보-->
<li>
<a href="#" class="menu" data-index="1">배송/결제 정보</a>
<div class="conArea">
<img src="img/n2.png"/>
</div>
</li>
<!--유의사항-->
<li>
<a href="#" class="menu" data-index="2">유의사항</a>
<div class="conArea">
<img src="img/n3.png"/>
</div>
</li>
<!--교환/반품/AS-->
<li>
<a href="#" class="menu" data-index="3">교환/반품/AS</a>
<div class="conArea">
<img src="img/n4.png"/>
</div>
</li>
</ul>
</div><!--클래스 active-tab 닫기-->
</div><!--클래스 tab 닫기-->
<!--자바스크립트 /let 은 변수에 재할당/const는 변수 재선언, 변수 재할당 모두 불가능/-->
<script>
let menu = document.querySelectorall("menu");
<<<<<<< HEAD
menu.forEach((item, i) => { //for each 반복문은 오로지 array 객체에서만 사용가능한 메서드
item.addEventListener('click', (e) => {
let text = item.innerText;
let index = item.getAttribute('data-index'); //getAttribute : 선택한 요소의 특정 속성의 값을 가져온다.
let position = 135 * index;
});
});
//class가 menu인 a요소를 선택후 click이벤트리스너를 붙입니다.
$(".menu").click(function() {
var menu = document.getElementById("menu");
//우리가 클릭한 그 요소의 글자를 얻어옵니다.
var txt = $(this).text();
//우리가 클릭한 그 요소의 data-index라는 속성의 값을 얻어옵니다.
var index = $(this).attr("data-index"); ///this.dataset.index <- HTML5의 api로 얻어올때는
//index에 135를 곱한 후 그 값을 left에 대입
var left = 135 * index;
$(".active-tab").css("left",left)
.text(txt);
//.show에서 show를 제거
$(".show").fadeOut(400)
.removeClass("show");
//우리가 클릭한 그 요소를 선택후 그 다음요소(next)를 선택한 후
//addClass를 주면 됩니다.
$(this).next()
.fadeIn(500)
.addClass("show");
=======
let menuList = document.querySelectorAll('.menu'); // menuList = [0,1,2,3];
console.dir(menuList)
>>>>>>> 05d83c71165beca21454f8b39b91476efc1b0c25
menuList.forEach(function(item, i) {
item.addEventListener('click', function(e){
let txt = item.innerText;
let index = item.getAttribute('data-index');
let left = 135 * index;
let activeTab = document.querySelector('.active-tab');
activeTab.style.left = left + "px";
activeTab.innerText = txt;
let show = document.querySelector('.show');
show.classList.remove('show');
item.nextElementSibling.classList.add('show');
}, true);
});
</script>
</div>
</body>
</html>2. 시계
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>아날로그 시계</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/noto.sans.korea.css" />
<style>
#wrap {
width:600px;
height:600px;
position: fixed;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
left:50%;
top:50%;
margin:-300px 0 0 -300px;
font-family: bon,sans-serif;
}
#wrap h1 {
height:80px;
font-size:50px;
text-align: center;
line-height: 80px;
font-weight: 700;
color:#424242;
}
#clock {
width:500px;
height:500px;
background:url(img/Clock-face.png);
background-size:100% 100%;
margin: auto;
position: relative;
}
.hand {
width:500px;
height:500px;
position: absolute;
left:0;
top:0;
}
#hour {
background: url(img/hour_hand.png);
}
#min {
background: url(img/minute_hand.png);
}
#sec {
background: url(img/second_hand.png);
}
</style>
</head>
<body>
<div id="wrap">
<h1><i class="fa fa-clock-o"></i> 시계</h1>
<div id="clock">
<div id="hour" class="hand"></div>
<div id="min" class="hand"></div>
<div id="sec" class="hand"></div>
</div>
</div>
<script>
let hour = document.querySelector('#hour');
let min = document.querySelector('#min');
let sec = document.querySelector('#sec');
function time() {
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
console.log(h, m, s);
let hDeg = 30 * h;
let mDeg = 6 * m;
let sDeg = 12 * s;
hour.style.transform = "rotate(" + hDeg + "deg)";
min.style.transform = "rotate("+ mDeg +"deg)";
sec.style.transform = "rotate("+ sDeg +"deg)";
}
time();
setInterval(time, 1000);
</script>
</body>
</html>3. 이미지 로테이트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>rotate</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css" />
<style>
body {
font-family: bon,sans-serif;
}
#wrap {
width:610px;
margin: auto;
position: relative;
}
#wrap h1 {
text-align: center;
color:#fff;
font-weight:700;
font-size:48px;
margin:30px;
position: relative;
}
#friends {
width:480px;
height:500px;
border:10px solid #fff;
margin:auto;
position: relative;
overflow: hidden;
}
#prevBtn,#nextBtn {
width:44px;
height:44px;
position: absolute;
border:none;
background:url(img/kakaofriends_btn.png);
cursor:pointer;
top:256px;
}
#prevBtn:hover{
background-position: -60px -347px;
}
#nextBtn:hover{
background-position: -60px -411px;
}
#prevBtn {
left:0;
background-position: 0 -347px;
}
#nextBtn {
right:0;
background-position: 0 -411px;
}
#imgBox {
width:1480px;
height:1480px;
background:pink;
position: absolute;
left:-500px;
top:0;
transform:rotate(0deg);
transition: .3s cubic-bezier(.66,.05,.44,1.46);
}
#imgBox .kakao {
width:480px;
height:500px;
position: absolute;
left:500px;
transform-origin:50% 740px;
}
#imgBox .kakao:nth-child(1) {
background-image:url(img/muji.png);
}
#imgBox .kakao:nth-child(2) {
background-image:url(img/frodo.png);
transform:rotate(90deg);
}
#imgBox .kakao:nth-child(3) {
background-image:url(img/neo.png);
transform:rotate(180deg);
}
#imgBox .kakao:nth-child(4) {
background-image:url(img/apeach.png);
transform:rotate(270deg);
}
</style>
</head>
<body>
<div id="wrap">
<h1>카카오친구들</h1>
<div id="friends">
<div id="imgBox">
<div class="kakao"></div>
<div class="kakao"></div>
<div class="kakao"></div>
<div class="kakao"></div>
</div><!--//rotateBox-->
</div><!--//friends-->
<button id="prevBtn"></button>
<button id="nextBtn"></button>
</div><!--//wrap-->
<script src="js/jquery.js"></script>
<script>
//돌아갈 각도
var deg = 0;
let prevBtn = document.querySelector('#prevBtn');
let nextBtn = document.querySelector('#nextBtn');
let imgBox = document.querySelector('#imgBox');
prevBtn.addEventListener('click', e => {
deg -= 90;
imgBox.style.transform = "rotate("+deg+"deg)";
});
nextBtn.addEventListener('click', function(e) {
deg += 90;
imgBox.style.transform = "rotate("+deg+"deg)";
});
</script>
</body>
</html>
사진파일
한줄 후기
HTML, CSS 는 게속 하다보니 실력이 향상되는것 같은데 .. JS 많이 부족하다는걸 느꼈다.😵💫
'웹 개발자 준비 과정🐳' 카테고리의 다른 글
| day06: 드래그 앤 드롭(drag and drop)😮💨 (0) | 2022.07.26 |
|---|---|
| day05: 개인 홈페이지 만들기_서울소개(html,css,js,bootstrap,firebase)🤩 (0) | 2022.07.26 |
| day04: 부트스트랩_jeju (html,css,js,bootstrap)😀 (0) | 2022.07.26 |
| day02: 문서 구조화,그리디 (html,css,js)🙂 (0) | 2022.07.26 |
| day01: 이력서 만들기 (HTML,CSS)😅 (0) | 2022.07.26 |
