이 책 최고네요!
index.html--------------------
<!DOCTYPE html>
<html lang="zxx">
<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>Final Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header -->
<header>
<div class="container">
<h1>
<button data-animation-scroll="true" data-target="#main">SU</button>
</h1>
<nav>
<ul>
<li>
<button data-animation-scroll="true" data-target="#about">
About
</button>
</li>
<li>
<button data-animation-scroll="true" data-target="#features">
Features
</button>
</li>
<li>
<button data-animation-scroll="true" data-target="#portfolio">
Portfolio
</button>
</li>
<li>
<button data-animation-scroll="true" data-target="#contact">
Contact
</button>
</li>
</ul>
</nav>
</div>
</header>
<!-- //end header -->
<!-- main -->
<main id="main">
<div class="container">
<h4>Welcome</h4>
<h2 class="active">I`M A <span></span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolor quas nulla unde ea officiis?</p>
<button class="download">DOWNLOAD CV</button>
<button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>
</div>
</main>
<!-- //end Main -->
<!-- About Me -->
<section id="about" class="about">
<div class="container">
<div class="title">
<h4>Who Am I</h4>
<h2>About Me</h2>
</div>
<div class="about-self">
<div class="left">
<img src="images/me_alone.jpg" alt="">
</div>
<div class="right">
<h3>Hello, <strong>I`m Sucoding</strong></h3>
<p>I`m Web Publisher And Web Front-End Developer.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veritatis aperiam accusantium.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit praesentium doloremque quos quis est officiis.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, omnis quibusdam.</p>
<div class="social">
<a href="#">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#">
<i class="fa-brands fa-twitch"></i>
</a>
<a href="#">
<i class="fa-brands fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- end About Me -->
<!-- What I Do -->
<section id="features" class="do">
<div class="container">
<div class="title">
<h4>Features</h4>
<h2>What I Do</h2>
</div>
<div class="do-me">
<div class="do-inner">
<div class="icon">
<i class="fa-brands fa-html5"></i>
</div>
<div class="content">
<h3>HTML5</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
<div class="do-inner">
<div class="icon">
<i class="fa-brands fa-css3-alt"></i>
</div>
<div class="content">
<h3>CSS3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
<div class="do-inner">
<div class="icon">
<i class="fa-brands fa-bootstrap"></i>
</div>
<div class="content">
<h3>BootStrap v5.0</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
</div>
</div>
</div>
</div>
</section>
<!-- //end What I Do -->
<!-- Background -->
<div class="bg"></div>
<!-- //end Background-->
<!-- PortFolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="title">
<h4>PORTFOLIOBACK</h4>
<h2>PortFolio</h2>
</div>
<div class="portfolio-me">
<div class="portfolio-inner">
<img src="images/mock1.png" alt="">
<strong>BRANDING</strong>
<h3>Package Design</h3>
</div>
<div class="portfolio-inner">
<img src="images/mock2.png" alt="">
<strong>DEVELOPMENT</strong>
<h3>Tablet App Dev</h3>
</div>
<div class="portfolio-inner">
<img src="images/mock3.png" alt="">
<strong>MARKETING</strong>
<h3>Coka Cola </h3>
</div>
<div class="portfolio-inner">
<img src="images/mock4.png" alt="">
<strong>APP</strong>
<h3>FaceBook Clone</h3>
</div>
<div class="portfolio-inner">
<img src="images/mock5.png" alt="">
<strong>APP</strong>
<h3>Netflix Clone</h3>
</div>
<div class="portfolio-inner">
<img src="images/mock6.png" alt="">
<strong>WEB</strong>
<h3>FirmBee Web</h3>
</div>
</div>
</div>
</section>
<!-- //end PortFolio -->
<!-- Contact With Me -->
<section id="contact" class="contact">
<div class="container">
<div class="title">
<h4>CONTACT</h4>
<h2>Contact With Me</h2>
</div>
<div class="contact-me">
<div class="left">
<div class="card">
<div class="icon">
<i class="fa-solid fa-phone-volume"></i>
</div>
<div class="info-text">
<h3>phone</h3>
<p>010-2222-1111</p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-solid fa-envelope-open-text"></i>
</div>
<div class="info-text">
<h3>email</h3>
<p>sucoding@naver.com</p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-solid fa-location-crosshairs"></i>
</div>
<div class="info-text">
<h3>address</h3>
<p>Samseong-ro, Gangnam-gu, Seoul, Republic of Korea</p>
</div>
</div>
</div>
<div class="right">
<form action="#">
<div class="form-group">
<label for="name">name</label>
<input type="text" id="name">
</div>
<div class="form-group">
<label for="email">email</label>
<input type="text" id="email">
</div>
<div class="form-group">
<label for="msg">message</label>
<textarea id="msg"></textarea>
</div>
<button>send</button>
</form>
</div>
</div>
</div>
</section>
<!-- end Contact With Me -->
<!-- script 태그는 수정하지 않습니다. -->
<script src="script.js"></script>
</body>
</html>style.css--------------------
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');
/* header.css */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
a, a:link, a:visited{
color:inherit;
text-decoration:none;
}
li{
list-style:none;
}
.container{
width:1140px;
margin:0 auto;
}
header{
position:fixed;
color:white;
top:0;
z-index:1;
width:100%;
padding:1rem;
}
header .container{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}
header nav ul{
display:flex;
}
header nav ul li{
padding:10px;
}
header button{
background: transparent;
border:0;
cursor: pointer;
color:white;
}
header h1 button{
font-size: 2rem;
font-weight: bold;
}
header nav ul li button{
font-size: 1.2rem;
}
/* End header.css */
/* main.css */
main{
width:100%;
height:100vh;
color:white;
background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/me.jpg') center center;
background-size:cover;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
main h4{
font-size:2rem;
}
main h2{
font-size:3.5rem;
margin:2rem 0;
letter-spacing:3px;
font-family:'Varela Round', sans-serif; /* 웹 폰트 추가 */
}
main p{
max-width:500px;
margin:0 auto;
font-size:1.25rem;
}
main button.download{
background-color:transparent;
border:3px solid white;
border-radius:20px;
padding:1rem 2rem;
margin-top:3rem;
color:white;
font-weight:bold;
cursor:pointer;
}
main button.mouse{
background-color:transparent;
border:none;
color:white;
font-size:2rem;
position:absolute;
bottom:1rem;
left:50%;
transform:translateX(-50%);
animation:upDown 1s ease-in-out infinite;
cursor:pointer;
}
@keyframes upDown{
0%{
bottom:1rem;
}
50%{
bottom:1.5rem;
}
100%{
bottom:1rem;
}
}
main h2 span::after{
content:"";
height:40px;
width:3px;
background-color:#fff;
display:inline-block;
animation: blink .7s ease-in-out infinite;
}
@keyframes blink {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/* about_me.css */
section{
font-family:'Poppins', sans-serif;
padding:5rem 0;
}
section:nth-child(2n){
background-color:#f8f8f8;
}
section .title{
margin-bottom:3rem;
}
section .title h4{
font-size:1.35rem;
color:#ed4848;
position:relative;
}
section .title h2{
font-size:3.5rem;
}
section .title p{
font-size:1.15rem;
}
/* float 속성 해제 */
section .about-self::after{
content:"";
clear:both;
display:block;
}
/* 본문 너비 절반 지정 & 왼쪽 배치 */
section .about-self .left{
width:50%;
float:left;
}
/* 이미지 크기가 부모 영역을 넘지 않도록 부모 영역의 최대 크기로 지정 */
section .about-self .left img{
max-width:100%;
}
/* 본문 너비 절반 지정 & 오른쪽 배치 */
section .about-self .right{
width:50%;
float:left;
padding:0 2rem;
}
/* 본문 오른쪽 h3 태그의 글자 크기와 여백 지정 */
section .about-self .right h3{
font-size:2.25rem;
margin-bottom:1rem;
}
/* 본문 오른쪽 h3 태그의 strong 태그 색상 강조 */
section .about-self .right h3 strong{
color:#ed4848;
}
/* 본문 오른쪽 p 태그의 크기와 여백 지정 */
section .about-self .right p{
font-size:1.15rem;
margin:1rem 0;
}
/* 본문 오른쪽의 아이콘 폰트 크기와 여백 지정 */
section .about-self .right .social a{
font-size:2.5rem;
margin-right:0.2rem;
}
/* End about_me.css */
/* what_i_do.css */
/* float 속성 해제*/
section .do-me::after{
content:"";
display:block;
clear:both;
}
/* 사각형 크기와 간격, 내부 여백 설정 */
section .do-me .do-inner{
background-color:#fff;
width:30%;
padding:2rem;
float:left;
margin-right:5%;
cursor:pointer;
}
/* 마지막 사각형의 외부 여백 설정 */
section .do-me .do-inner:last-child{
margin-right:0;
}
/* 아이콘 폰트 크기와 색상 */
section .do-me .do-inner .icon i{
font-size:2.5rem;
color:#ff6a6a;
}
/* HTML5, CSS3, BootStrap v5.0 텍스트 크기와 간격 */
section .do-me .do-inner .content h3{
font-size:2rem;
margin:1rem 0;
}
/* 사각형 텍스트 크기 */
section .do-me .do-inner .content p{
font-size:1.15rem;
}
/* do-inner 클래스에 마우스를 올리면 배경색과 텍스트 색상 변경 */
section .do-me .do-inner:hover{
background-color:lightcoral;
color:white;
}
/* do-inner 클래스에 마우스를 올리면 아이콘 폰트 색상 변경 */
section .do-me .do-inner:hover i{
color:white;
}
/* End what_i_do.css */
/* background.css */
.bg{
background:url('./images/background.jpg') center center;
background-size:cover;
background-attachment:fixed;
height:650px;
}
/* End background.css */
/* portfolio.css */
/* clear 속성으로 float 속성값 해제*/
section.portfolio::after{
content:"";
display:block;
clear:both;
}
/* portfolio-inner 사각형 꾸미기 */
section.portfolio .portfolio-inner{
width:30%;
margin-right:5%;
padding:1rem 1rem 1.5rem 1rem;
float:left;
background-color:#f8f8f8;
border:1px solid #ccc;
margin-bottom:3rem;
}
/* 3번째마다 margin-right 0 적용 */
section.portfolio .portfolio-inner:nth-child(3n){
margin-right:0;
}
/* 이미지의 크기가 부모 요소를 넘지 않도록 100%로 지정 */
section.portfolio .portfolio-inner img{
width:100%;
display:block;
}
/* strong 태그 색상과 간격 */
section.portfolio .portfolio-inner strong{
color:#ff6a6a;
margin:0.5rem 0;
display:block;
}
/* h3 태그 색상과 간격 */
section.portfolio .portfolio-inner h3{
font-size:1.75rem;
}
/* End portfolio.css */
/* contact_with_me.css */
section.contact .contact-me::after{
content:"";
display:block;
clear:both;
}
section.contact .contact-me .left{
width:30%;
float:left;
}
section.contact .contact-me .right{
float:left;
width:65%;
margin-left:5%;
}
section.contact .contact-me .left .card{
border:1px solid #ccc;
padding:1rem;
display:flex;
align-items:center;
margin-bottom:1.25rem;
}
section.contact .contact-me .left .card .icon i{
font-size:2rem;
margin-right:15px;
}
section.contact .contact-me .right{
float:left;
width:65%;
margin-left:5%;
margin-bottom:2rem;
border:1px solid #ccc;
padding:1rem;
}
/* form-group 사이 간격 지정 */
section.contact .contact-me .right .form-group{
margin-bottom:1.25rem;
}
/* label 태그가 인라인 성격이어서 외부 여백을 적용하기 위해 block으로 변경 */
section.contact .contact-me .right .form-group label{
display:block;
margin-bottom:0.85rem;
}
/* input 요소 꾸미기 */
section.contact .contact-me .right .form-group input{
padding:0.625rem;
width:100%;
outline:none;
border:1px solid #ccc;
border-radius:10px;
}
/* :focus 가상 클래스 선택자로 입력 요소에 커서가 활성화되면 파란색 테두리와 그림자 효과 추가 */
section.contact .contact-me .right .form-group input:focus{
border:1px solid #719ECE;
box-shadow:0 0 10px #719ECE;
}
/* textarea 요소 꾸미기 */
section.contact .contact-me .right .form-group textarea{
height:300px;
width:100%;
resize:none;
border:1px solid #ccc;
border-radius:10px;
}
/* textarea 요소에 커서 활성화가 되면 파란색 테두리와 그림자 효과 추가 */
section.contact .contact-me .right .form-group textarea:focus{
outline:none;
border:1px solid #719ECE;
box-shadow:0 0 10px #719ECE;
}
/* 버튼 요소 꾸미기 */
section.contact .contact-me .right button{
width:100%;
padding:1rem;
background-color:#f78b00;
border:none;
color:white;
}
/* End contact_with_me.css */
/* media.css */
@media screen and (max-width: 1140px){
/* 메인 container 기준 1140 -> 992px */
main .container{
width: 992px;
}
/* 섹션 container 기준 1140 -> 600px */
section .container{
width:600px;
}
/* About me 영역 왼쪽을 너비를 50% -> 100% 변경 */
section .about-self .left{
width:100%;
margin-bottom: 1.5rem;
}
/* About me 영역 오른쪽 너비를 50% -> 100% 변경 */
section .about-self .right{
width:100%;
padding:0;
}
/* What I Do 영역의 콘텐츠 박스의 너비를 30% -> 48% 변경 */
section .do-me .do-inner{
width:48%;
margin-bottom: 1.5rem;
margin-right: 0;
}
section .do-me .do-inner:nth-child(2n+1){
margin-right:4%; /* 1, 3, 5...번째 본문 사각형에 margin-right 4% 적용 */
}
/* PortFolio 영역의 콘텐츠 박스 너비를 30% -> 48% 변경 */
section .portfolio-me .portfolio-inner{
width:48%;
margin-right: 0;
}
section .portfolio-me .portfolio-inner:nth-child(2n+1){
margin-right:4%;
}
/* Contact With Me 영역 */
section.contact .contact-me .left{
width:100%; /* 너비 변경 30% -> 100% */
}
section.contact .contact-me .right{
width:100%;/* 너비 변경 65% -> 100% */
margin-left: 0; /* margin 초기화 */
}
}
@media (max-width: 992px){
html{
font-size: 14px;
}
/* 메인 영역 container 기준 너비 변경 */
main .container{
width: 768px; /* 992px -> 768px */
}
/* PortFolio 영역 */
section .portfolio-me .portfolio-inner{
width:100%; /* 48% -> 100% 변경 */
}
}
@media (max-width: 768px){
html{
font-size: 13px;
}
/* 메인 영역 container 기준 너비 변경 */
main .container{
width: 576px; /* 768px -> 576px */
}
section .container{
width:400px; /* 600px -> 400px */
}
section .do-me .do-inner{
width:100%; /* 48% -> 100% */
margin-right: 0; /* margin 초기화 */
}
}
@media (max-width: 576px){
html{
font-size: 12px;
}
main .container{
width: 400px; /* 576px -> 400px */
}
section .container{
width:360px; /* 400px -> 360px */
}
}
@media (max-width: 400px){
html{
font-size: 11px;
}
main .container{
width: 320px;/* 400px -> 320px */
}
main h4{
font-size: 1.5rem;
}
section .container{
width: 320px;/* 360px -> 320px */
}
section .title h2{
font-size: 3rem; /* 3.5rem -> 3rem */
}
}
/* End media.css */
header.active{
background-color:rgba(0,0,0);
animation:fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn{
0%{
opacity:0;
}
100%{
opacity:1;
}
}script.js--------------------
/* 여기부터 책의 코드를 작성해주세요 */
/* text_iife.js */
// 텍스트 작성과 삭제 즉시 실행 함수
(function(){
const spanEl = document.querySelector("main h2 span");
const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-End Developer'];
let index = 0;
let currentTxt = txtArr[index].split("");
function writeTxt(){
spanEl.textContent += currentTxt.shift();
if(currentTxt.length !== 0){
setTimeout(writeTxt, Math.floor(Math.random() * 100));
}else{
currentTxt = spanEl.textContent.split("");
setTimeout(deleteTxt, 2000);
}
}
function deleteTxt(){
currentTxt.splice(0, currentTxt.length); // 한꺼번에 지우기
// currentTxt.pop();
spanEl.textContent = currentTxt.join("");
if(currentTxt.length !== 0){
setTimeout(deleteTxt, Math.floor(Math.random() * 100))
}else{
index = (index + 1) % txtArr.length;
currentTxt = txtArr[index].split("");
writeTxt();
}
}
writeTxt();
})();
/* end text_iife.js */
/* scroll_request.js */
/* 수직 스크롤이 발생하면 header 태그에 active 클래스 추가 및 삭제 */
const headerEl = document.querySelector("header");
window.addEventListener('scroll', function(){
requestAnimationFrame(scrollCheck);
});
function scrollCheck(){
let browerScrollY = window.scrollY ? window.scrollY : window.pageYOffset;
if(browerScrollY > 0){
headerEl.classList.add("active");
}else{
headerEl.classList.remove("active");
}
}
/* end scroll_request.js */
/* move.js */
/* 애니메이션 스크롤 이동 */
const animationMove = function(selector){
// ① selector 매개변로 이동할 대상 요소 노드 가져오기
const targetEl = document.querySelector(selector);
// ② 현재 브라우저의 스크롤 정보(y 값)
const browserScrollY = window.pageYOffset;
// ③ 이동할 대상의 위치(y 값)
const targetScorllY = targetEl.getBoundingClientRect().top + browserScrollY;
// ④ 스크롤 이동
window.scrollTo({ top: targetScorllY, behavior: 'smooth' });
};
// 스크롤 이벤트 연결하기
const scollMoveEl = document.querySelectorAll("[data-animation-scroll='true']");
for(let i = 0; i < scollMoveEl.length; i++){
scollMoveEl[i].addEventListener('click', function(e){
const target = this.dataset.target;
animationMove(target);
});
}
/* End move.js */https://github.com/gilbutITbook/080313
GitHub - gilbutITbook/080313: <코딩 자율학습 HTML + CSS + 자바스크립트> 예제 소스
<코딩 자율학습 HTML + CSS + 자바스크립트> 예제 소스. Contribute to gilbutITbook/080313 development by creating an account on GitHub.
github.com
code 버튼 클릭
Download Zip
http://www.sucoding.kr
'컴퓨터 > HTML' 카테고리의 다른 글
| font 찾기 (0) | 2023.02.14 |
|---|---|
| css 조직도 (0) | 2021.11.04 |
| 반응형 웹사이트 화면크기 (0) | 2020.09.13 |
| html (0) | 2020.09.12 |
| css 블록요소 인라인요소 codepen (0) | 2020.09.12 |