반응형
아침 : 스크롤 에니메이션, 반응형 웹
오후 : 개인 프로젝트 - 웹사이트 만들기
fiverr 웹사이트 레이아웃 만들기
Header - 안에 gnb
new IntersectionObserver 이런 객체를 만든다 ~
저 객체 안에 여러 기능들이 있다.
() => {} ==
function (){}
observer 에게 첫 인자값이 들어가는데 그게 함수 .
스크롤 에니메이션
이해안감~~~~~~~~~~~
if(entry.intersectionRatio>0){ //intersectionRatio -> console.log찍으니 스크롤에 따라 숫자가 바뀜 / 요것의 조건은 -> 0보다 크면 내가 화면 보고있. 0이 되었을 때 class를 지워주기
아래 두개 똑같음
const io = new IntersectionObserver(
(entries, observer)=>{
entries.forEach(entry => {
if(entry.intersectionRatio>0){ //intersectionRatio -> console.log찍으니 스크롤에 따라 숫자가 바뀜 / 요것의 조건은 -> 0보다 크면 내가 화면 보고있.
entry.target.classList.add('show');
} else{
entry.target.classList.remove('show');
}
});
}
)
box=document.querySelector('.animation');
io.observe(box);
=============================================================================
// () => {} 함수만드는거
const ie = new IntersectionObserver(
function(entries, observer){
for(i=0; i<entries.length; i++){
if(entries[i].intersectionRatio>0){
entries[i].target.setAttribute('class','animation show');
} else{
entries[i].target.setAttribute('class', 'animation');
}
}
})
box=document.querySelector('.animation');
ie.observe(box); 매우 어렵~~~~~~~~~~~~~~~~~~~~~스
3/30 날짜 구글 드라이브에 교수님이 넣어쥬심 꼭 보고 겅부 ~
========================2교시 반응형 웹=========================
pc, mobile 둘다 사용할수잇슴
개발자도구에서 반응형 볼수잇슴
오늘 CSS로만 반응형 만들어 보기
css 도 조건문같은게잇음 넓이로만 지정해주는 게잇음
어떤 사이즈일떄는 1. css구문을 실행하고
다른 사이즈일때는 2. css구문을 실행한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>/* "+" 인자접근자 + : 같은 영역에서 바로 아래에 있는 ex) #wrap+ul>li */
============================================================
아이디 클릭하면 textbox에 커서 움직이게 만들기
<div id="wrap">
<input type="text" id="userId">
<label for="userId">아이디 </label> <!--아이디와 속성값을 연결해주는게 for-->
</div>
<div id="wrap">
<input type="text" id="userId">
<label for="userId">아이디 </label> <!--아이디와 속성값을 연결해주는게 for-->
<input type="radio" id="userId">
<label for="userId">아이디 </label>
<input type="checkbox" id="userId">
<label for="userId">아이디 </label>
</div>
클릭하면 꺼졋다 켜졋다 하는걸 응용할거
체크박스에 체크가 되어있으면 어떤 css를 적용해라
안되어있으면 다른 css를 적용해라
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content{
background-color: red;
display:none;
}
#userId:checked + label + div#content{
background:yellow;
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<!-- <input type="text" id="userId">
<label for="userId">아이디 </label> 아이디와 속성값을 연결해주는게 for
<input type="radio" id="userId2">
<label for="userId2">아이디 </label> -->
<input type="checkbox" id="userId">
<label for="userId">아이디 </label>
<div id="content">
<ul>
<li>메뉴1</li>
<li>메뉴1</li>
<li>메뉴1</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#userId{
display:none;
}
#userId + label {
display:inline-block; /* label은 inline */
position:relative;
width:30px;
height:30px;
background-color: teal;
}
#userId + label>span{
display:block; /* span은 block */
height:2px;
width:100%; /*(30px을 가득 채우겟다)*/
background:black;
position:absolute;
}
#userId + label > span:nth-child(1){top:0px;}
#userId + label > span:nth-child(2){
top:50%;
transform:translateY(-50%);
}
#userId + label > span:nth-child(3){bottom:0px;}
#content{
background-color: red;
display:none;
}
#userId:checked + label + div#content{
background:yellow;
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<!-- <input type="text" id="userId">
<label for="userId">아이디 </label> 아이디와 속성값을 연결해주는게 for
<input type="radio" id="userId2">
<label for="userId2">아이디 </label> -->
<input type="checkbox" id="userId">
<label for="userId">
<span></span> <!---높이 2px 하나씩 /. 스판에는 -->
<span></span>
<span></span>
</label>
<div id="content">
<ul>
<li>메뉴1</li>
<li>메뉴1</li>
<li>메뉴1</li>
</ul>
</div>
</div>
</body>
</html>이제 클릭해서 이벤트 만들기;
4월 1일자에 올려져잇음
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./반응형layout.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="./반응형mobile.css">
<title>Document</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>
<a href="./">
<img src="http://softeer.ai/images/common/logo.png" alt="logo" />
</a>
</h1>
<ul class="gnb">
<li><a href="#">Challenge</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">Class</a></li>
</ul>
<ul class="util">
<li><a href="#">Log in</a></li>
<li><a href="#">Join</a></li>
</ul>
<div id="side_area">
<input type="checkbox" id="side_flag" >
<label for="side_flag">
<span></span>
<span></span>
<span></span>
</label>
<div id="sidebar">
<ul>
<li class=""><a href="#">Challenge</a></li>
<li class=""><a href="#">Connect</a></li>
<li class=""><a href="#">careers</a></li>
<li class=""><a href="#">Class</a></li>
</ul>
</div>
</div>
</div>
<div id="main_wrap">
<div id="main_visual">
</div>
<div class="main_contents">
content start
</div>
</div>
<div id="footer">
aa
</div>
</div>
</body>
</html>
layout.css
/* CSS style sheet */
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
a{
text-decoration:none;
}
img{
display:block;
line-height:0;
}
#wrap{
width:100%;
}
#header{
width:100%;
height:100px;
padding:35px 20px;
box-sizing: border-box;
border-bottom:1px solid #ededed;
}
*:after,*:before{
box-sizing: border-box;
}
/* header content */
#header > h1 { float:left; }
#header > h1 > a > img{ width:130px;}
#header > ul.gnb {display:inline-block; position:absolute; left:50%; transform:translateX(-50%); overflow:hidden;}
#header > ul.gnb > li {float:left;}
#header > ul.gnb > li > a {display:inline-block; width:120px;}
#header > ul.util { float:right; }
#header > ul.util > li { float:left; }
#header > ul.util > li:after{ content:"|"; }
#header > ul.util > li:last-child:after{ content:""}
#header > div#side_area{ float:right; display:none; }
#header > div#side_area > #side_flag{display:none;}
#header > div#side_area > #side_flag+label{
width:30px;
height:20px;
right: 30px;
display:block;
position:absolute;
cursor:pointer;
}
#header > div#side_area > #side_flag+label span{
position:absolute;
display:block;
width:100%;
height:3px;
background:#000;
z-index:5;
transition: all .35s; /* 움직임이0.35초안에 천천히 움직이게 */
}
#header > div#side_area > #side_flag+label span:nth-child(1){top:0px;}
#header > div#side_area > #side_flag+label span:nth-child(2){top:50%; transform:translateY(-50%)}
#header > div#side_area > #side_flag+label span:nth-child(3){bottom:0px;}
#header > div#side_area > #side_flag:checked+label span:nth-child(1){top:50%; transform:translateY(-50%) rotate(45deg);} /*45도 각도 */
#header > div#side_area > #side_flag:checked+label span:nth-child(2){opacity:0;}
#header > div#side_area > #side_flag:checked+label span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg);}
#header > div#side_area > #sidebar { /* "+" 인자접근자 + : 같은 영역에서 바로 아래에 있는 ex) #wrap+ul>li */
width:130px;
height:100%;
position:fixed;
top:0px;
right:-160px;
padding:75px 0 0 30px;
background:#fff;
z-index:2;
transition: all .35s;
}
#header > div#side_area > #sidebar > ul >li {margin-top:20px;}
#header > div#side_area > #side_flag:checked+label+#sidebar{
right:0px;
transition: all .35s;
}
#main_wrap{
width:100%;
float:left;
}
#main_visual{
width:inherit;
height:720px;
}
.main_contents{
width:1200px;
margin:0 auto;
padding: 140px 0 195px 0;
}
#footer{
clear:both;
width:100%;
height:100px;
}
/* Color set */
#header{}
#main_wrap{ background:#999; }
#main_visual{ background:#eee; }
.main_contents{ background:#ddd; }
#footer{ background:#666; }
mobile.css
@media screen and (max-width: 769px) {
#header{
height:50px;
padding:15px 20px;
position:fixed;
width:100%;
top:0px;
background:#fff;
}
#header > h1 > a > img{
width:80px;
}
#header > ul.gnb{
display:none !important;
}
#header > ul.util{
display:none;
}
#header > div#side_area{
display:block;
}
#main_visual{
height:300px;
}
.main_contents{
width:100%;
padding: 55px 0 100px 0;
}
#footer{
height:50px;
}
}
hover 천천히 이쁘게 하는 법
dowhateveryouwant1661.tistory.com/62
CSS | hover, transition: 버튼에 마우스 올릴 때 색깔 변화시키기
웹페이지 클로닝이 거의 끝나가고 있습니다. 예전에 처음 시도했던 것 보다는 더 수월하게 지나가고 있지만 아직도 디테일한 부분에서는 서툴러요. 그 중 hover over color를 바꾸는 것에 대해서 공
dowhateveryouwant1661.tistory.com
===========================================================================
Fiverr
3교시 - 웹사이트 레이아웃 만들기 & 색상 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fiverr</title>
<link rel = "stylesheet" href="fiverr.css">
</head>
<body>
<div id="wrap"> <!--100%-->
<div id="header_wrap"> <!--width 100% x 680pictures-->
<div id="gnb"> <!--100% height:80-->
gnb
</div>
<div id="header"> <!--width: 1400 x 680 -->
<div id="header_box"> <!--650x241-->
<h1><span>
Find the perfect freelance <br>
services for your business
</span></h1>
<input type="search" value='Try "building mobile app"'>
<div id="popular"></div>
</div>
</div>
</div>
<div id="header_low"> <!--width:100% height: 95px-->
<div id="header_low_container"> <!--1400 x 95-->
header_low_container
</div>
</div>
<div id="popular_wrap"> <!-- width:100% -->
<div id="popular_box"> <!--width:1400px;-->
<h2>Popular professional services</h2>
<div id="popular_pic_box">
<div id="popular_btn">
<input type="button" value="<">
<input type="button" value=">">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="video_content_wrap"> <!-- 100% x744-->
<div id="video_content_box">
<div id="video_content_box_l">
vidoe_content_box_l
</div>
<div id="video_content_box_r">
vidoe_content_box_r
</div>
</div>
</div>
<div id="marketplace_wrap"> <!-- 100% x 331-->
<div id="marketplace_box"> <!--1400x 331-->
<h2>Explore the marketplace</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="business_wrap"> <!-- 100% x 724-->
<div id="business_box"> <!-- 1400px x 702.31-->
<div id="business_box_l"> <!--638x510-->
business_box_l
</div>
<div id="business_box_r"> <!--838x534-->
business_box_r
</div>
</div>
</div>
<div id="seo_wrap"> <!--100%-->
<div id="seo_box"> <!-- 1400px; x290-->
<div id="seo_box_l">
seo_box_l
</div>
<div id="seo_box_r">
seo_box_r
</div>
</div>
</div>
<div id="logomaker_wrap"> <!--100% 300-->
<div id="logomaker_box"> <!-- 1400x391-->
logomaker
</div>
</div>
<div id="inspired_wrap">
<div id="inspired_box">
<h2>Get inspired with projects made by our freelancers</h2>
<div id="inspired_box_btn">
<input type="button" value="<">
<input type="button" value=">">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="fiverr_guides_wrap"> <!--100%-->
<div id="fiverr_guides_box"> <!--1400x907-->
<div id="fiverr_guides_topbox">
<h2>Fiverr guides</h2>
</div>
<div id="fiverr_guides_bottombox">
<img src="">
</div>
</div>
</div>
<div id="footer_wrap"> <!--100%-->
<div id="footer_box"> <!--1400x647-->
<div class="footer_box1">
<div class="footer_box1_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box2">
<div class="footer_box2_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box3">
<div class="footer_box3_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box4">
<div class="footer_box4_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box5">
<div class="footer_box5_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="fiverr.js"></script>
</body>
</html>
/* CSS Styles sheet */
*{margin:0; padding:0;}
ul,li{text-decoration: none;}
a{list-style: none;}
img{display:block;line-height: 0;}
#wrap{width:100%;}
/************* 1. header *************/
#header_wrap{
width:100%;
height:680px;
background-color: khaki;
}
/************* 2. header_low *************/
#header_low{
width:100%;
height:95px;
background-color: #d5d4d2;
}
/************* 3. popular *************/
#popular_wrap{
width:100%;
height:407px;
background-color: lightgreen;
}
/************* 4. video_content *************/
#video_content_wrap{
width:100%;
height:744px;
background-color: lightsalmon;
}
/************* 5. marketplace *************/
#marketplace_wrap{
width:100%;
height:330px;
background-color: lightseagreen;
}
/************* 6. business *************/
#business_wrap{
width:100%;
height:724px;
background-color: lime;
}
/************* 7. seo *************/
#seo_wrap{
width:100%;
height:315px;
background-color:mediumseagreen;
}
/************* 8. logomaker *************/
#logomaker_wrap{
width:100%;
height:300px;
background:navajowhite;
}
/************* 9. inspired *************/
#inspired_wrap{
width:100%;
height:670px;
background-color: olive;
}
/************* 10. fiverr_guides *************/
#fiverr_guides_wrap{
width:100%;
height:910px;
background-color: orangered;
}
/************* 11. footer *************/
#footer_wrap{
width:100%;
height:650px;
background-color: orange;
}
각 메뉴 wrap 안 메뉴들의 배경색 칠함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fiverr</title>
<link rel = "stylesheet" href="fiverr.css">
</head>
<body>
<div id="wrap"> <!--100%-->
<div id="header_wrap"> <!--width 100% x 680pictures-->
<div id="gnb"> <!--100% height:80-->
gnb
</div>
<div id="header"> <!--width: 1400 x 680 -->
<div id="header_box"> <!--650x241-->
<h1><span>
Find the perfect freelance <br>
services for your business
</span></h1>
<input type="search" value='Try "building mobile app"'>
<div id="popular"></div>
</div>
</div>
</div>
<div id="header_low"> <!--width:100% height: 95px-->
<div id="header_low_container"> <!--1400 x 95-->
header_low_container
</div>
</div>
<div id="popular_wrap"> <!-- width:100% -->
<div id="popular_box"> <!--width:1400px;-->
<h2>Popular professional services</h2>
<div id="popular_pic_box">
<div id="popular_btn">
<input type="button" value="<">
<input type="button" value=">">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="video_content_wrap"> <!-- 100% x744-->
<div id="video_content_box">
<div id="video_content_box_l">
vidoe_content_box_l
</div>
<div id="video_content_box_r">
vidoe_content_box_r
</div>
</div>
</div>
<div id="marketplace_wrap"> <!-- 100% x 331-->
<div id="marketplace_box"> <!--1400x 331-->
<h2>Explore the marketplace</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="business_wrap"> <!-- 100% x 724-->
<div id="business_box"> <!-- 1400px x 702.31-->
<div id="business_box_l"> <!--638x510-->
business_box_l
</div>
<div id="business_box_r"> <!--838x534-->
business_box_r
</div>
</div>
</div>
<div id="seo_wrap"> <!--100%-->
<div id="seo_box"> <!-- 1400px; x290-->
<div id="seo_box_l">
seo_box_l
</div>
<div id="seo_box_r">
seo_box_r
</div>
</div>
</div>
<div id="logomaker_wrap"> <!--100% 300-->
<div id="logomaker_box"> <!-- 1400x391-->
logomaker
</div>
</div>
<div id="inspired_wrap">
<div id="inspired_box">
<h2>Get inspired with projects made by our freelancers</h2>
<div id="inspired_box_btn">
<input type="button" value="<">
<input type="button" value=">">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="fiverr_guides_wrap"> <!--100%-->
<div id="fiverr_guides_box"> <!--1400x907-->
<div id="fiverr_guides_topbox">
<h2>Fiverr guides</h2>
</div>
<div id="fiverr_guides_bottombox">
<img src="">
</div>
</div>
</div>
<div id="footer_wrap"> <!--100%-->
<div id="footer_box"> <!--1400x647-->
<div class="footer_box1">
<div class="footer_box1_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box2">
<div class="footer_box2_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box3">
<div class="footer_box3_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box4">
<div class="footer_box4_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box5">
<div class="footer_box5_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="fiverr.js"></script>
</body>
</html>
/* CSS Styles sheet */
*{margin:0; padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
img{display:block;line-height: 0;}
#wrap{width:100%;}
/************* 1. header *************/
#header_wrap{
width:100%;
height:680px;
background-color: khaki;
}
#header_wrap>#gnb{
width:100%;
height:80px;
background-color: paleturquoise;
}
#header{
width:1400px;
height:680px;
background-color: brown;
margin:0 auto;
}
/************* 2. header_low *************/
#header_low{
width:100%;
height:95px;
background-color: #d5d4d2;
}
/************* 3. popular *************/
#popular_wrap{
width:100%;
height:407px;
background-color: lightgreen;
}
#popular_box{
width:1400px;
height:407px;
background-color: crimson;
margin:0 auto;
}
/************* 4. video_content *************/
#video_content_wrap{
width:100%;
height:744px;
background-color: lightsalmon;
}
#video_content_box{
width: 1400px;
height:744px;
background-color: darkgreen;
margin:0 auto;
}
/************* 5. marketplace *************/
#marketplace_wrap{
width:100%;
height:330px;
background-color: lightseagreen;
}
#marketplace_box{
width:1400px;
height:330px;
background-color: darkorange;
margin:0 auto;
}
/************* 6. business *************/
#business_wrap{
width:100%;
height:724px;
background-color: lime;
}
#business_box{
width:1400px;
height:724px;
background-color: darkblue;
margin: 0 auto;
}
/************* 7. seo *************/
#seo_wrap{
width:100%;
height:315px;
background-color:mediumseagreen;
}
#seo_box{
widht:1400px;
height:315px;
background-color: darkolivegreen;
margin:0 auto;
}
/************* 8. logomaker *************/
#logomaker_wrap{
width:100%;
height:300px;
background:navajowhite;
}
#logomaker_box{
width:1400px;
height:300px;
background-color: darkred;
margin:0 auto;
}
/************* 9. inspired *************/
#inspired_wrap{
width:100%;
height:670px;
background-color: olive;
}
#inspired_box{
width:1400px;
height:670px;
background-color: darkslateblue;
margin:0 auto;
}
/************* 10. fiverr_guides *************/
#fiverr_guides_wrap{
width:100%;
height:910px;
background-color: orangered;
}
#fiverr_guides_box{
width:1400px;
height:910px;
background-color: darksalmon;
margin: 0 auto;
}
/************* 11. footer *************/
#footer_wrap{
width:100%;
height:650px;
background-color: orange;
}
#footer_box{
width:1400px;
height:650px;
background-color: dimgray;
margin: 0 auto;
}
<div id="wrap"> <!--100%-->
<div id="header_wrap"> <!--width 100% x 680pictures-->
<div id="header_hero_backgrounds">
<ul class="hero_andrea"><img src="images/header/1.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero_moon"><img src="images/header/2.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero_gabrielle"><img src="images/header/3.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero_zach"><img src="images/header/4.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero_ritika"><img src="images/header/5.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>#header_wrap{
width:100%;
height:680px;
background-color: khaki;
}
#header_wrap>#gnb{
width:100%;
height:80px;
background-color: paleturquoise;
position:fixed;
z-index:10;
}
#header{
width:1400px;
height:680px;
background-color: brown;
margin:0 auto;
}
#header_hero_backgrounds>ul{
position: absolute;
z-index:0;
left:50%;
transform: translateX(-50%);
}
absolute로 사진 5장 header 뭉침
for(i=0; i<1; i++){
ul.item(4).setAttribute('class','hero out')
}
내가 생각한 알고리즘 -> 마지막 5번째 -> 첫번째로 돌아갈 때 display: none -> block 현상 생김
for(i=0; i<ul.length; i++){
var beNum=index-1;
if(beNum==-1){
beNum=4;
}
if(i==index){
ul.item(i).setAttribute('class', 'hero on');
ul.item(beNum).setAttribute('class', 'hero out');
} else{
ul.item(i).setAttribute('class', 'hero');
}
}
교수님이 교정해준 알고리즘
var index=0;
hero(0);
function hero(n){
ul=document.querySelectorAll('#header_hero_backgrounds>ul');
if(index==ul.length){
index=0;
}
if(n == undefined){
for(i=0; i<ul.length; i++){
var beNum=index-1;
if(beNum==-1){
beNum=4;
}
if(i==index){
ul.item(i).setAttribute('class', 'hero on');
} else if(i==beNum){
ul.item(beNum).setAttribute('class', 'hero out');
} else{
ul.item(i).setAttribute('class', 'hero');
}
}
//자동
} else {
//처음
ul.item(n).setAttribute('class', 'hero firston');
}
index++;
}
setInterval(hero, 3000);새로 배운 거 ->
if(n=undefined){
// 자동~
} else {
// 처음 돌릴 떄 ~
}함수 자동으로 돌릴 때, else 이후에는 처음 0 넣고 돌릴 떄
svg export
svg => png
Convert SVG files to PNG Online
This free online SVG to PNG converter allows you to convert SVG files to PNG images, quickly and easily.
svgtopng.com
블로그에서 발견한 유용해보이는 ㅇ거 !
codepen.io/woojin-choi/pen/xmOqby
text mouseover on image with transparent
...
codepen.io
=-============오늘 완성=-======
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fiverr</title>
<link rel = "stylesheet" href="fiverr.css">
</head>
<body>
<div id="wrap"> <!--100%-->
<div id="header_wrap"> <!--width 100% x 680pictures-->
<div id="header_hero_backgrounds">
<ul class="hero firston"><img src="images/header/1.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="images/header/2.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="images/header/3.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="images/header/4.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="images/header/5.jpg">
<li class="hero_textbox">
<p></p>
</li>
</ul>
</div>
<div id="gnb"> <!--100% height:80-->
<div id="gnb_box">
<div id="gnb_box1">
<h1><a href=""><img src="./images/logo/fiverr.logo.png"></a></h1>
</div>
<div id="gnb_box2">
<a href="">Fiverr Business</a>
<a href="">Explore</a>
<a href=""><img src="./images/gnb.globe.png">English</a>
<a href="">$USD</a>
<a href="">Become a Seller</a>
<a href="">Sign In</a>
<a><input type="button" id="gnb_btn" value="Join"></a>
</div>
</div>
</div>
<div id="header"> <!--width: 1400 x 680 -->
<div id="header_box"> <!--650x241-->
<h1><span>
Find the perfect freelance <br>
services for your business
</span></h1>
<input type="search" value='Try "building mobile app"'>
<div id="popular"></div>
</div>
</div>
</div>
<div id="header_low"> <!--width:100% height: 95px-->
<div id="header_low_container"> <!--1400 x 95-->
<span id="trust">Trusted by:</span>
<ul>
<li><img src="./images/header_low/facebook.31d5f92.png"></li>
<li><img src="./images/header_low/google.517da09.png"></li>
<li><img src="./images/header_low/netflix.e3ad953.png"></li>
<li><img src="./images/header_low/pandg.8b7310b.png"></li>
<li><img src="./images/header_low/paypal.ec56157.png"></li>
</ul>
</div>
</div>
<div id="popular_wrap"> <!-- width:100% -->
<div id="popular_box"> <!--width:1400px;-->
<h2>Popular professional services</h2>
<div id="popular_pic_box">
<div id="popular_btn">
<input type="button" value="<">
<input type="button" value=">">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="video_content_wrap"> <!-- 100% x744-->
<div id="video_content_box">
<div id="video_content_box_l">
vidoe_content_box_l
</div>
<div id="video_content_box_r">
vidoe_content_box_r
</div>
</div>
</div>
<div id="marketplace_wrap"> <!-- 100% x 331-->
<div id="marketplace_box"> <!--1400x 331-->
<h2>Explore the marketplace</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="business_wrap"> <!-- 100% x 724-->
<div id="business_box"> <!-- 1400px x 702.31-->
<div id="business_box_l"> <!--638x510-->
business_box_l
</div>
<div id="business_box_r"> <!--838x534-->
business_box_r
</div>
</div>
</div>
<div id="seo_wrap"> <!--100%-->
<div id="seo_box"> <!-- 1400px; x290-->
<div id="seo_box_l">
seo_box_l
</div>
<div id="seo_box_r">
seo_box_r
</div>
</div>
</div>
<div id="logomaker_wrap"> <!--100% 300-->
<div id="logomaker_box"> <!-- 1400x391-->
logomaker
</div>
</div>
<div id="inspired_wrap">
<div id="inspired_box">
<h2>Get inspired with projects made by our freelancers</h2>
<div id="inspired_box_btn">
<input type="button" value="<">
<input type="button" value=">">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="fiverr_guides_wrap"> <!--100%-->
<div id="fiverr_guides_box"> <!--1400x907-->
<div id="fiverr_guides_topbox">
<h2>Fiverr guides</h2>
</div>
<div id="fiverr_guides_bottombox">
<img src="">
</div>
</div>
</div>
<div id="footer_wrap"> <!--100%-->
<div id="footer_box"> <!--1400x647-->
<div class="footer_box1">
<div class="footer_box1_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box2">
<div class="footer_box2_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box3">
<div class="footer_box3_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box4">
<div class="footer_box4_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div class="footer_box5">
<div class="footer_box5_h6"></div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="fiverr.js"></script>
</body>
</html>
/* CSS Styles sheet */
*{margin:0; padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
img{display:block;line-height: 0;}
#wrap{width:100%;}
/************* 1. header *************/
#header_wrap{
width:100%;
height:680px;
background-color: khaki;
}
#header_wrap>#gnb{
width:100%;
height:80px;
background-color: paleturquoise;
position:fixed;
z-index:10;
}
#gnb_box{
width:1400px;
height:80px;
background-color: dodgerblue;
margin:0 auto;
}
#gnb_box1{
float:left;
width:300px;
padding:25px 0;
}
#gnb_box2{
float:right;
padding:25px 0 20px 0;
box-sizing: border-box;
}
#gnb_box2>a>img{
display: inline-block;
position: relative;
top:3px;
right:5px;
}
#gnb_box1>a{
float:left;
width:23px;
height: 19px;
}
#gnb_box1>h1{
float:left;
width: 89px;
height: 27px;
}
#gnb_box2>a{
color:#fff;
font-weight:bold;
font-size:16px;
padding:0 10px;
}
#gnb_box2>a>#gnb_btn{
color:#fff;
font-weight:bold;
font-size:16px;
background-color: transparent;
border:1px solid white;
padding:5px 18px;
box-sizing: border-box;
border-radius: 3px;
}
#header{
width:1400px;
height:680px;
background-color: brown;
margin:0 auto;
}
#header_hero_backgrounds>ul{
position: absolute;
z-index:0;
left:50%;
transform: translateX(-50%);
}
#header_hero_backgrounds>.hero{
display:none;
}
#header_hero_backgrounds>.hero.firston{
display:block;
}
#header_hero_backgrounds>.hero.on{
display:block;
animation: fadein 1s;
animation-fill-mode: forwards;
}
@keyframes fadein{
from{ opacity:0}to {opacity:1}
}
#header_hero_backgrounds>.hero.out{
display:block;
animation: fadeout 1s;
animation-fill-mode: forwards;
}
@keyframes fadeout{
from{opacity:1} to {opacity:0;}
}
/************* 2. header_low *************/
#header_low{
width:100%;
height:95px;
background-color: #d5d4d2;
}
#header_low_container{
width:1400px;
height:95px;
background-color: darkslategray;
margin:0 auto;
}
#header_low_container>span{
display: inline-block;
float:left;
color:#B5B6Ba;
}
#header_low_container>ul{
width:1000px;
float:right;
margin:0 auto;
}
#header_low_container>ul>li{
float:left;
padding:20px;
width:100px;
}
/************* 3. popular *************/
#popular_wrap{
width:100%;
height:407px;
background-color: lightgreen;
}
#popular_box{
width:1400px;
height:407px;
background-color: crimson;
margin:0 auto;
}
/************* 4. video_content *************/
#video_content_wrap{
width:100%;
height:744px;
background-color: lightsalmon;
}
#video_content_box{
width: 1400px;
height:744px;
background-color: darkgreen;
margin:0 auto;
}
/************* 5. marketplace *************/
#marketplace_wrap{
width:100%;
height:330px;
background-color: lightseagreen;
}
#marketplace_box{
width:1400px;
height:330px;
background-color: darkorange;
margin:0 auto;
}
/************* 6. business *************/
#business_wrap{
width:100%;
height:724px;
background-color: lime;
}
#business_box{
width:1400px;
height:724px;
background-color: darkblue;
margin: 0 auto;
}
/************* 7. seo *************/
#seo_wrap{
width:100%;
height:315px;
background-color:mediumseagreen;
}
#seo_box{
widht:1400px;
height:315px;
background-color: darkolivegreen;
margin:0 auto;
}
/************* 8. logomaker *************/
#logomaker_wrap{
width:100%;
height:300px;
background:navajowhite;
}
#logomaker_box{
width:1400px;
height:300px;
background-color: darkred;
margin:0 auto;
}
/************* 9. inspired *************/
#inspired_wrap{
width:100%;
height:670px;
background-color: olive;
}
#inspired_box{
width:1400px;
height:670px;
background-color: darkslateblue;
margin:0 auto;
}
/************* 10. fiverr_guides *************/
#fiverr_guides_wrap{
width:100%;
height:910px;
background-color: orangered;
}
#fiverr_guides_box{
width:1400px;
height:910px;
background-color: darksalmon;
margin: 0 auto;
}
/************* 11. footer *************/
#footer_wrap{
width:100%;
height:650px;
background-color: orange;
}
#footer_box{
width:1400px;
height:650px;
background-color: dimgray;
margin: 0 auto;
}
var index=0;
var item = Math.floor(Math.random()*5);
hero(item);
function hero(n){
ul=document.querySelectorAll('#header_hero_backgrounds>ul');
if(index==ul.length){
index=0;
}
if(n == undefined){
for(i=0; i<ul.length; i++){
var beNum=index-1;
if(beNum==-1){
beNum=4;
}
if(i==index){
ul.item(i).setAttribute('class', 'hero on');
} else if(i==beNum){
ul.item(beNum).setAttribute('class', 'hero out');
} else{
ul.item(i).setAttribute('class', 'hero');
}
}
//자동
} else {
//처음
ul.item(n).setAttribute('class', 'hero firston');
}
index++;
}
setInterval(hero, 3000);
if(n=undefined){
// 자동~
} else {
// 처음 돌릴 떄 ~
}
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| fiverr 웹사이트 만들기 (0) | 2021.04.05 |
|---|---|
| [fiverr 웹사이트 만들기] (0) | 2021.04.05 |
| [14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼 (0) | 2021.04.01 |
| [14일차]20210401 fiverr 사진 움직이기 + 기타 (0) | 2021.04.01 |
| [13일차 복습] JavaScript 함수, 객체 , 배열 연습 (1) | 2021.04.01 |
