Chapter 8. 포트폴리오 실전 제작 : 나만의 웹사이트 완성하기

직접 손으로 내 포트폴리오를 만들어 보고, 온라인에 배포하는 과정까지 완벽하게 경험합니다.

8-1. 메인 영역 스타일

먼저, 비디오 추가 코드를 알아보겠습니다.

이 코드는 웹페이지에 비디오를 자동 재생하고, 반복하며, 음소거된 상태로 표시하는 데 사용됩니다.
```
<video loop autoplay muted playsinline data-object-fit="cover" src="video/main_video.mp4"></video>
```
- <video> : 비디오 파일을 재생하기 위한 HTML5 태그입니다.
- loop : 비디오가 끝나면 다시 처음부터 반복 재생됩니다.
- autoplay : 페이지가 로드되면 비디오가 자동으로 재생됩니다.
- muted : 비디오가 음소거 상태로 재생됩니다. 이는 자동 재생을 지원하기 위해 필요할 수 있습니다.
- playsinline : 모바일 기기에서 전체 화면 모드가 아닌 인라인으로 비디오를 재생하도록 합니다.
- data-object-fit="cover" : 비디오가 컨테이너에 맞게 잘리도록 하여 비율을 유지합니다. 이 속성은 CSS와 함께 사용될 수 있습니다.
- src="video/main_video.mp4" : 비디오 파일의 경로를 지정합니다.

반응형에 따른 폰트 크기 정의입니다.

유형	1024px 이상	1023px 이하	767px 이하	540px 이하
메인 폰트	1.1em	1.5em	2.5em	3.5em
타이틀1	1.25em	2em	3em	4em
타이틀2	1.75em	3em	3.5em	4em 또는 5em
타이틀3	3em	4em	4.5em	5em

chapter8/practice/step1/css/style.css

/* top */
.top {
	display: flex;
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
}
.top .logo {
	position: absolute;
	left: 4em;
	top: 2.5em;
	z-index: 1000;
	opacity: 1; /* opacity: 0; *//* interaction */
}
.top .logo span {
	text-transform: uppercase;
	font-size: 1.25em;
	font-weight: 700;
	color: #fff;
}
.top nav {
	position: absolute;
	right: 4em;
	top: 2.5em;
	opacity: 1; /* opacity: 0; *//* interaction */
}
.top nav ul {
	display: flex;
	gap: 3.125em;
}
.top nav ul li a {
	display: block;
	line-height: 1.5;
	font-size: 1.1em;
	font-weight: 300;
	color: #fff;
}
.top .tab {
	display: none; /* interaction */
	position: absolute;
	right: 4em;
	top: 7em;
	z-index: 10000;
}
.top .tab i {
	font-size: 3em;
	color: #fff;
}
.top .total-menu {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
	background-color: rgba(0,0,0,.9);
}
.top .total-menu .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.top .total-menu .inner ul {
	display: flex;
	gap: 5em;
}
.top .total-menu .inner ul li a {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.25em;
	color: #fff;
}

@media only screen and (max-width: 1023px) {
	.top .logo {
		top: 3em;
	}
	.top .logo span {
		font-size: 2em;
	}
	.top nav ul li a {
		font-size: 1.5em;
	}
}
@media only screen and (max-width: 767px) {
	.top .logo {
		top: 8em;
	}
	.top .logo span {
		font-size: 3em;
	}
	.top nav {
		display: none;
	}
	.top .tab {
		display: block;
	}
	.top .tab i {
		font-size: 4em;
	}
	.top .total-menu .inner ul {
		flex-direction: column;
		align-items: center;
	}
	.top .total-menu .inner ul li a {
		font-size: 3em;
	}
}
@media only screen and (max-width: 540px) {
	.top .logo span {
		font-size: 4em;
	}
	.top .tab {
		top: 6em;
	}
	.top .tab i {
		font-size: 5em;
	}
	.top .total-menu .inner ul li a {
		font-size: 4em;
	}
}

/* main */
.main-title {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.main-title .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	z-index: 2;
	width: calc(100% - 8em);
	height: 100%;
}
.main-title .content .group-text {
	line-height: 0.9;
	text-align: right;
	font-size: 5em;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}
.main-title .content .group-text .word {
	display: inline-block;
	padding-right: 0.15em;
	padding-bottom: 0.35em;
	overflow: hidden;
}
.main-title .content .group-text .normal {
	letter-spacing: -0.12em;
}
.main-title .content .group-text .serif {
	display: block;
	font-family: "Bodoni Moda", serif;
	font-size: 1.1em;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.1em;
}
.main-title .content .group-text .word .char {
	display: inline-block;
	opacity: 1; /* opacity: 0; *//* interaction */
}
.main-title .content .description {
	padding-top: 4vh;
}
.main-title .content .description span {
	display: block;
	line-height: 2;
	text-align: right;
	font-size: 1.1em;
	font-weight: 300;
	opacity: 1; /* opacity: 0; *//* interaction */
}
.main-title .author {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.7em;
	position: absolute;
	bottom: 2.5em;
	z-index: 10;
	width: 100%;
	height: 3em;
	color: #fff;
	opacity: 1; /* opacity: 0; *//* interaction */
}
.main-title .author span {
	line-height: 1.7;
	font-size: 1.1em;
	font-weight: 300;
	letter-spacing: 0.02em;
}
.main-title .bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #151619;
}
.main-title .bg .bg-inner {
	width: 100%;
	height: 100%;
	opacity: 0.3;
}
.main-title .bg .bg-inner video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

@media only screen and (max-width: 1023px) {
	.main-title .content .group-text {
		font-size: 8em;
	}
	.main-title .content .description {
		font-size: 1.5em;
	}
	.main-title .author span {
		font-size: 1.5em;
	}
}
@media only screen and (max-width: 767px) {
	.main-title .content .group-text {
		font-size: 11em;
	}
	.main-title .content .group-text .word.serif {
		display: block;
	}
	.main-title .content .description {
		font-size: 2.5em;
	}
	.main-title .author {
		bottom: 6em;
	}
	.main-title .author span {
		font-size: 2.5em;
	}
}
@media only screen and (max-width: 540px) {
	.main-title .content .description {
		font-size: 3.5em;
	}
	.main-title .author span {
		font-size: 3.5em;
	}
}

/* curser wrap */
.curser-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
}
.curser-wrap .curser-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5em;
	height: 2.5em;
}
.curser-wrap .curser-inner .cursor {
	position: relative;
	z-index: 1;
	width: 1em;
	height: 1em;
	background-color: rgba(0,153,255,.75);
	border-radius: 3em;
}
.curser-wrap .curser-inner i {
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	background-color: rgba(255,255,255,.1);
	opacity: 0;
	border-radius: 3em;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.curser-wrap .view-more {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 70%;
	top: 70%;
	width: 5em;
	height: 2em;
	opacity: 0;
	border-radius: 1.5em;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.curser-wrap .view-more span {
	line-height: 1.5em;
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0.02em;
}

@media only screen and (max-width: 767px) {
	.curser-wrap {
		display: none;
	}
	.curser-wrap .curser-inner i {
		display: none;
	}
	.curser-wrap .learn-more {
		display: none;
	}
}

8-2. 메인 영역 인터랙션

chapter8/practice/step2/css/style.css

/* cursor */
.cursor-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
}
.cursor-wrap .cursor-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5em;
	height: 2.5em;
}
.cursor-wrap .cursor-inner .cursor {
	position: relative;
	z-index: 1;
	width: 1em;
	height: 1em;
	background-color: rgba(0,153,255,.75);
	border-radius: 3em;
}
.cursor-wrap .cursor-inner i {
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	background-color: rgba(255,255,255,.1);
	opacity: 0;
	border-radius: 3em;
	backdrop-filter: blur(5px);
}
.cursor-wrap .view-more {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 70%;
	top: 70%;
	width: 5em;
	height: 2em;
	opacity: 0;
	border-radius: 1.5em;
}
.cursor-wrap .view-more span {
	line-height: 1.5em;
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0.02em;
}

@media only screen and (max-width: 767px) {
	.cursor-wrap {
		display: none;
	}
}