<!DOCTYPE html>
<html lang="ko">
<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>요소효과</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 20px;
}
.box1 {
transform: translateX(100%);
}
.box2 {
transform: scale(1.2);
}
.box3 {
transform: translate(-50px, 20px);
}
.box4 {
transform: rotate(45deg);
}
.box5 {
transform: translate(100px, 100px) scale(2) rotate(30deg);
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
</body>
</html>
<!--
transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여
-->
<!DOCTYPE html>
<html lang="ko">
<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>애니메이션</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 20px;
}
/*
linear: 시작부터 종료까지 등속 운동을 한다.(일정한 속도로 바뀐다)
ease-in: 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-in-out: ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.
*/
.box1:hover {
background-color: brown;
transition-duration: 500ms;
transition-timing-function: linear;
}
.box2:hover {
background-color: crimson;
border-radius: 50%;
transition: all 2s ease;
}
.box3:hover {
background-color: rebeccapurple;
border-radius: 50%;
transform: translateX(400px);
transition: 1s ease-in-out;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>디자인 - A안</title>
<script
src=""
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<!-- 소개 및 탐색에 도움을 주는 콘텐츠틑 header에 담음 -->
<header>
<div class="container">
<h1>
<img src="../../images/home-solid.svg" width="50px" height="50px"></img></h1>
<nav class="main-navigation">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JAVASCRIPT</a>
<a href="#">REACT</a>
<a href="" class="btn">문의하기</a>
</nav>
<button class="more-btn"><i class="icon"></i></button>
<script>
const moreBtn = document.querySelector('.more-btn')
const mainNavigation = document.querySelector('.main-navigation')
moreBtn.addEventListener('click', ()=>{
// alert("11");
moreBtn.classList.toggle('active');
mainNavigation.classList.toggle('active');
})
</script>
</div>
</header>
<!-- 문서<body>의 주요 콘텐츠를 main에 담음 -->
<main class="main_bg">
<div class="video-wrap">
<video src="../../images/forest.mp4" muted autoplay loop></video>
</div>
<div class="container">
<div class="text-wrap">
<h2>MVC패턴<br>계층형게시판</h2>
<h3>JAVA + Servlet + JSP + Spring</h3>
<h3>HTML5 + CSS3 + JavaScript + React</h3>
<p>Front-End에서 부터 Back-End까지<br>풀스택 개발자를 양성하는 강좌입니다</p>
<div class="btn-wrap">
<a href="#" class="btn">강좌 등록하기</a>
<a href="#" class="btn ghost-btn">가입하기</a>
</div>
</div>
</div>
</main>
</body>
</html>
/* *는 모든 요소를 의미 */
* {
box-sizing: border-box; /* 내부여백 외부여백을 포함한 크기로 계산 */
}
body {
background-color: black;
}
header {
top: 0;
left: 0;
width: 100%;
padding: 20px 0px;
position: absolute;
z-index: 2;
}
header h1 {
height: 40px;
margin: 0px;
float: left;
}
header h1 img {
display: block;
top: 10px;
background-color: white;
}
a {
font-size: 16px;
text-decoration: none;
}
.main-navigation {
float: right;
}
.main-navigation a {
color: white;
margin-left: 20px;
}
.btn {
display: inline-block;
font-weight: bold;
padding: 12px 20px;
background-color: darkcyan;
border-radius: 8px;
}
/* 가입, 등록버튼 */
.btn-wrap a {
background-color: darkcyan;
color: white;
}
/* 내용 처리 */
.main-bg {
position: relative;
width: 100%;
height: 100vh;
}
.video-wrap {
position: absolute;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
.video-wrap video {
width: 100%;
height: 100%;
object-fit: fill;
}
.container {
width: 100%;
max-width: 1480px;
padding: 0 20px;
margin: auto;
position: relative;
}
.text-wrap {
width: 520px;
height: 100vh;
padding: 240px 20px;
top: 0;
left: 0;
position: absolute;
z-index: 1;
}
.text-wrap h2 {
color: white;
font-size: 64px;
line-height: 1.25;
margin-bottom: 40px;
}
.text-wrap h3 {
color: white;
font-size: 24px;
line-height: 1.25;
margin-bottom: 20px;
}
.text-wrap p {
color: white;
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
}
.more-btn {
display: none;
}
/* 반응형 웹 추가 */
@media screen and (max-width: 768px) {
.main-navigation {
position: fixed;
top: 0;
right: 0;
padding: 80px 20px;
width: 100%;
height: 100vh;
visibility: hidden;
opacity: 0;
}
.main-navigation.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: 0.3s;
}
.main-navigation a {
display: block;
margin: auto;
margin-bottom: 8px;
padding: 6px 12px;
}
.text-wrap {
top: 60px;
}
.text-wrap h2 {
font-size: 36px;
}
.text-wrap h3 {
font-size: 20px;
}
.text-wrap p {
font-size: 14px;
}
.more-btn {
display: block;
position: absolute;
border-radius: 8px;
border: none;
right: 12px;
top: 8px;
width: 40px;
height: 40px;
background-color: transparent;
}
.more-btn.active .icon {
background: url(../../images/icon-close.svg);
background-size: contain;
}
.icon {
display: block;
width: 24px;
height: 24px;
background: url(../../images/icon-menu.svg);
background-size: contain;
}
.video-wrap {
width: 200%;
}
}
<!DOCTYPE html>
<html lang="ko">
<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>
<script
src=""
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./step2.css" />
</head>
<body>
<!-- NavBar start -->
<nav id="navbar">
<!-- LOGO -->
<div class="navbar-logo">
<i class="fab fa-diaspora"></i>
<a href="#" class="name">Skill Inventory</a>
</div>
<!-- 메뉴 아이템 -->
<div class="div-menu">
<!-- ul.navbar-menu>li.navbar-menu-item*5 자동완성 -->
<ul class="navbar-menu">
<!-- #home 해시값설정 -> 라우팅서비스[페이지이동처리, 화면이동, 멀티화면처리] API -->
<li class="navbar-menu-item active" data-link="#home">Home</li>
<li class="navbar-menu-item" data-link="#me">About me</li>
<li class="navbar-menu-item" data-link="#skills">Skills</li>
<li class="navbar-menu-item" data-link="#projects">Projects</li>
<li class="navbar-menu-item" data-link="#contact">Contact</li>
</ul>
</div>
<!-- 버거 아이콘 시작 -->
<div class="burger-toggle-btn">
<i class="fas fa-bars"></i>
</div>
<script>
// navbar메뉴 클릭시 해당 섹션으로 이동하기
// 캡쳐링때문에 ul에 이벤트처리해도 그 아래의 li태그들도 이벤트처리됨
const navbarMenu = document.querySelector(".navbar-menu");
navbarMenu.addEventListener("click", (event) => {
console.log(event.target); // 감지되는 이벤트 타켓 객체 출력
console.log(event.target.dataset.link); // #home or #me를 찍어줌
const target = event.target;
const link = target.dataset.link; // #home, #me, #skills, #projects, #contact
if (link == null) {
return;
}
scrollIntoView(link);
});
function scrollIntoView(selector) {
console.log(selector);
const scrollTo = document.querySelector(selector);
scrollTo.scrollIntoView({ behavior: "smooth" });
}
const buggerIcon = document.querySelector(".burger-toggle-btn");
buggerIcon.addEventListener("click", () => {
navbarMenu.classList.toggle("open");
});
</script>
<!-- 버거 아이콘 끝 -->
</nav>
<!-- NavBar end -->
<!-- Home start -->
<!-- 섹션에 id값을 넣어서 메뉴 클릭시 data link값으로 사용 -->
<!-- css용으로 클래스값도 넣어줌 -->
<section id="home" class="section">
<!-- section의 id는 해쉬값과 동일해야함 -->
<div class="hcontent"></div>
</section>
<!-- Home end -->
<!-- About me start -->
<section id="me" class="section">
<div class="mcontent">나에 대해</div>
</section>
<!-- Me end -->
<!-- Skills start -->
<section id="skills" class="section">
<div class="scontent">보유 기술</div>
</section>
<!-- Skills end -->
<!-- Projects start -->
<section id="projects" class="section">
<div class="pcontent">참여 프로젝트</div>
</section>
<!-- Projects end -->
<!-- Contact start -->
<section id="contact" class="section">
<div class="ccontent">
<h2 class="contact-email">Jungyunmok@gmail.com</h2>
<div class="contact-links">
<a href="#" target="_blank"><i class="fab fa-github"></i></a>
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
<p class="contact-rights">2023 Jungyun Mok - All rights reserved</p>
</div>
</section>
<!-- Contact end -->
<button class="up">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// 문서가 수직으로 얼마나 스크롤했는지
const home = document.querySelector(".hcontent");
document.addEventListener("scroll", () => {
// console.log(window.scrollY);
});
// 실제 home content의 높이
const homeHeight = home.getBoundingClientRect().height;
document.addEventListener("scroll", () => {
// 만약 홈 높이가 600이면 스크롤링이 300까지 오면 0.5만큼 투명하게되고
// 600이면 투명도가 0, 시작할 때는 투명하면 안되니까 1로 줌
home.style.opacity = 1 - window.screenY / homeHeight;
});
// up버튼 이벤트리스너 설정
const upBtn = document.querySelector(".up");
document.addEventListener("scroll", () => {
// 홈컨텐트의 절반보다 큰 값이면 보임
if (window.scrollY > homeHeight / 2) {
upBtn.classList.add("visible");
} else {
// 스크롤이 위에 있는 경우 보여지면 안되니까 스타일 없앰
upBtn.classList.remove("visible");
}
// 업버튼 클릭시 home섹션으로 이동함
upBtn.addEventListener("click", () => {
scrollIntoView("#home");
});
});
</script>
</body>
</html>
* {
box-sizing: border-box; /* 패딩과 마진 포함 사이즈 계산 */
/* border: 1px solid red; */
}
body {
margin: 0; /* 여백없이 왼쪽 상단 모서리에 붙임 */
}
i {
color: white;
}
.fab.fa-diaspora {
position: absolute;
top: 14px;
left: 8px;
}
a {
text-decoration: none; /* a태그 링크 밑줄 없애기 */
color: white;
}
.name {
position: absolute;
top: 8px;
left: 44px;
}
ul {
list-style: none; /* 리스트 앞 구슬 없애기 */
padding-left: 0; /* 구슬이 차지하는 공간 없애기 */
}
#navbar {
position: fixed; /* 화면 상단에 고정 */
display: flex; /* skill inventory와 ul을 좌우로 펼침 */
justify-content: space-between;
width: 100%; /* 반응형웹, 버거아이콘 사용할때 필요 */
height: 60px; /* 높이 */
background-color: seagreen;
opacity: 90%;
}
.navbar-logo {
font-size: 28px;
font-weight: 600;
}
.navbar-menu {
display: flex; /* ul안의 li를 좌우로 펼침 */
}
/* 메뉴 아이템 추가 */
.navbar-menu-item {
color: white;
padding: 4px 12px;
margin: 0 4px;
cursor: pointer;
border-radius: 4px;
opacity: 100%;
}
.navbar-menu-item:hover {
background-color: white;
color: darkcyan;
}
/* 버거 아이템 추가 */
.burger-toggle-btn {
position: absolute;
top: 13px;
right: 20px;
font-size: 24px;
display: none;
}
/* 섹션 공통 */
.section {
text-align: center;
margin: auto;
}
.hcontent {
background-color: rgb(11, 114, 88);
width: 100%;
height: 500px;
background-image: url(../../images/rocky-mountain-panoramic.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.mcontent {
background-color: darkseagreen;
width: 100%;
height: 500px;
}
.scontent {
background-color: lightsteelblue;
width: 100%;
height: 500px;
}
.pcontent {
background-color: darksalmon;
width: 100%;
height: 500px;
}
/* 블록요소 안에 블록요소 사용시 벌어짐 발생 */
/* 부모자식관계로 묶어줌 */
#contact {
position: relative; /* 부모 */
}
.ccontent {
background-color: mediumpurple;
width: 100%;
height: 200px;
position: absolute; /* 자식 */
}
.contact-email,
.contact-rights {
color: white;
}
.contact-links {
font-size: 48px;
transition: all 300ms ease-in;
}
.contact-links i:hover {
transform: scale(1.1);
color: darkslateblue;
}
.up {
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
font-size: 30px;
border: none;
background-color: transparent;
opacity: 0;
transition: all 300ms ease-in;
}
.up.visible {
opacity: 1;
}
/* 반응형 웹 추가 -768px보다 작아지면 발동 */
@media screen and (max-width: 768px) {
.burger-toggle-btn {
display: block; /* 버거아이콘 보임 */
}
#navbar {
flex-direction: column; /* 메뉴바 내용이 아래로 출력 */
align-items: flex-start; /* 메뉴가 앞쪽으로 배치 */
}
/* relative는 아무 효과 없음 -> 부모자식관계로 요소를 붙일때, 레이어 구성할때(z-index) 사용 */
.div-menu {
/* 원하는 위치(top[y축], botton[x축], left, right)에 배치하려면 반드시 absolute로 함 */
position: absolute;
top: 50px; /* position에 absolute가 없으면 효과 없음 */
width: 100%; /* 메뉴 아이템이 전체를 채움 */
}
.navbar-menu {
flex-direction: column; /* 메뉴가 아래방향으로 */
display: none; /* 반응형 테스트시에만 block을 두어 확인할 것 */
text-align: center; /* 글씨 가운데 정렬 */
}
/* 버거아이콘을 누르면 css를 추가함 - css이름 open */
/* 노드주소번지.classList.toggle.open */
.navbar-menu.open {
display: block;
background-color: white;
opacity: 80%;
}
.navbar-menu-item {
color: rgb(20, 105, 57);
opacity: 100%;
padding: 6px;
height: 40px;
}
.navbar-menu-item:hover {
background-color: seagreen;
color: white;
}
}
<!DOCTYPE html>
<html lang="ko">
<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>
<table width="500px" height="300px" border="1">
<tr>
<!-- td{내용$}*5 자동완성 -->
<td colspan="3">내용1</td>
<td>내용4</td>
<td rowspan="2" style="background-color: lightcyan">내용5</td>
</tr>
<tr>
<td rowspan="2" style="background-color: blueviolet">내용1</td>
<td rowspan="3" style="background-color: coral">내용2</td>
<td colspan="2" style="background-color: red">내용3</td>
</tr>
<tr>
<td>내용3</td>
<td>내용4</td>
<td rowspan="2" style="background-color: aquamarine">내용5</td>
</tr>
<tr>
<td>내용1</td>
<td colspan="2" style="background-color: brown">내용3</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>네임카드</title>
<script
src=""
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./member1.css" />
</head>
<body class="member1">
<section class="wrap">
<!-- header start -->
<nav class="menu">
<a href="#">
<i class="fas fa-bars"></i>
</a>
<a href="#">
<i class="fas fa-sticky-note"></i>
</a>
</nav>
<!-- header end -->
<!-- profile start -->
<article class="profile"></article>
<!-- profile end -->
<ul class="contact">
<li>
<i class="fab fa-facebook-f"></i>
</li>
<li>
<i class="fab fa-facebook"></i>
<span>jungyunmok@gmail.com</span>
</li>
</ul>
<nav class="others">
<!-- a[href="member$.html"]*4 자동완성 -->
<a href="member1.html" class="on"></a>
<a href="member2.html"></a>
<a href="member3.html"></a>
<a href="member4.html"></a>
</nav>
</section>
</body>
</html>
* {
margin: 0; /* 4면의 외부여백 0 */
padding: 0; /* 4면의 내부여백 0 */
box-sizing: border-box; /* 여백을 포함한 크기 계산 */
border: 1px solid red; /* 여백부분, 스타일을 죽인 부분 */
}
ul {
list-style: none; /* 리스트 앞 구슬 제거 */
}
a {
text-decoration: none; /* 링크 밑줄 제거 */
}
body {
background-color: powderblue; /* 전체문서 배경색 */
}
/* section태그로 전체를 감싸줌 */
.wrap {
width: 340px; /* 가로 크기 */
padding: 30px; /* 내부 여백 크기 */
background-color: white; /* 배경 색상 */
position: absolute; /* 좌표값에 따른 배치 */
top: 50%; /* y축 중앙 배치 - 주의, 요소의 왼쪽 상단 모서리기준 위치 */
left: 50%; /* x축 중앙 배치 */
transform: translate(-50%, -50%); /* 요소의 중앙 위치를 잡아줌 */
border-radius: 10px;
}
.menu {
font-size: 20px;
}
댓글