7/1 개발일지

정명환·2022년 7월 1일

대구 ai 스쿨

목록 보기

48/79

1)학습한 내용

Resoft 홈페이지를 6명의 팀원들과 함께 클론 코딩을 해보았습니다.

받은 이미지 파일과 홈페이지를 보면서 html과 css를 작성 하였습니다.

WOW 플러그인을 사용하여 fade효과를 주었습니다.

<!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>Resoft</title>
        //파비콘
        <link rel="shortcut icon" href="./img/web.png" type="image/x-icon" />
        //기본 css
        <link rel="stylesheet" type="text/css" href="./basic.css" />
        //wow 애니메이션 css
        <link rel="stylesheet" href="./animate.css">
        //wow 애니메이션 js
        <script src="./wow.min.js"></script>		
    </head>
    
<body>
 
<div class="cus_wrap">
/*에코스 봇이 0.3초의 딜래이로 위에서 아래로 서서히 나타납니다.*/
	<img src="./img/에코스봇.png" alt="" class="ecoce-bot wow fadeInDown" data-wow-delay="0.3s">
    /*환경부탄소중립기본법 사진이 0.3초의 딜래이로 왼쪽에서 오른쪽으로 서서히 나타납니다.*/
	<img src="./img/환경부탄소중립기본법.png" alt="" class="ministry-Environ-img wow fadeInRight" data-wow-delay="0.3s">
	<div class="ecoce-img-wrap">
    /*에코스모바일원 사진이 0.3초의 딜래이로 오른쪽에서 왼쪽으로 서서히 나타납니다.*/
		<img src="./img/에코스모바일원.png" alt="" class="ecoce-img wow fadeInLeft" data-wow-delay="0.3s">
	</div>
        /*<p>태그가 0.6초의 딜래이로 왼쪽에서 오른쪽으로 서서히 나타납니다.*/
	<div class="eco-clean-earth wow fadeInRight" data-wow-delay="0.6s">
		<p>국내 최초<br/>
			&#10075; 탄소중립 실천인증 플랫폼 &#10076;
		</p>
		<p>ECO-Clean Earth</p>
	</div>
</div>
<script>
	new WOW().init();
</script>
</body>
</html>

@charset "utf-8";
/* @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);


@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{box-sizing: border-box;}
body{font-family: 'NanumSquareRound'; position: relative; font-weight: 500; }
button{outline: none;}
br{opacity: 0;}

/*구 모양 이미지? 왜 있을까요??*/
.cus_wrap {background: url(./img/web.png) no-repeat; max-width: 1400px; height: 1100px; margin: 0 auto; display: block; margin-top: 60px; margin-bottom: 250px; position: relative; background-position: center;} 
/*에코스봇 위치*/
.cus_wrap .ecoce-bot{position: absolute; top: 5%; right: 0; width: 740px;}
/*탄소중립기본법 배너*/
.cus_wrap .ministry-Environ-img{position: absolute; right: 0; top: 290px; width: 350px;}
/*스마트폰 그림*/
.cus_wrap .ecoce-img-wrap{position: relative; height: 100%; top: 160px; width: 960px;}
.cus_wrap .ecoce-img-wrap .ecoce-img{position: absolute; left: 0; width: 100%;}
/*우측 하단 문구*/
.cus_wrap .eco-clean-earth{position: absolute; right: 0; top: 830px; text-align: right; line-height: 45px; margin-top: 50px;}
/*우측 하단 문구 : 첫 <p>태그 폰트 사이즈*/
.cus_wrap .eco-clean-earth p:first-child{font-size: 40px; font-weight: 600;}
/*우측 하단 문구 : 마지막 <p>태그 폰트 사이즈*/
.cus_wrap .eco-clean-earth p:last-child{font-size: 30px;}


/*동적 화면 크기 조절*/
@media screen and (max-width:1500px) {
	.cus_wrap{height: 60vw;}
	.cus_wrap .ecoce-bot {top: 5%; width: 53%; right: 2%;}
	.cus_wrap .ministry-Environ-img{top: 30%; width: 25%; right: 2%;}
	.cus_wrap .ecoce-img-wrap{top: 20%; width: 69%; left: 2%;}
	.cus_wrap .eco-clean-earth{top: 90%; right: 2%}
}

@media screen and (max-width:1217px) {
	.cus_wrap .eco-clean-earth p:first-child{font-size: 30px;}
	.cus_wrap .eco-clean-earth p:last-child{font-size: 25px;}
}	

@media screen and (max-width: 940px){
	.cus_wrap{height: auto; margin: 60px 2%;}
	.cus_wrap .ecoce-bot{width: 75%; position: unset;}
	.cus_wrap .ministry-Environ-img{display: none;}
	.cus_wrap .ecoce-img-wrap .ecoce-img{position: unset;}
	.cus_wrap .ecoce-img-wrap{width: 85%; height: auto; margin: 0 auto; margin-top: 65px; margin-bottom: 30px;}
	.cus_wrap .eco-clean-earth{margin: 0; position: unset;}
}	

@media screen and (max-width: 640px){
	.cus_wrap .eco-clean-earth{line-height: 35px;}
	.cus_wrap .eco-clean-earth p:first-child{font-size: 28px;}
	.cus_wrap .eco-clean-earth p:last-child{font-size: 22px;}
	.cus_wrap .ecoce-bot{width: 95%;}
	.cus_wrap .ecoce-img-wrap{margin-top: 40px; }
}

@media screen and (max-width: 430px){
	.cus_wrap .cus_content > h3{font-size: 30px;}
	.cus_wrap .cus_content > p{font-size: 22px;}
	.cus_wrap .eco-clean-earth p:first-child{font-size: 22px; line-height: 22px;}
	.cus_wrap .eco-clean-earth p:last-child{font-size: 20px;}
}