오늘은 html과 css 기본기를 잡기 위해, 클론코딩을 진행했다.
혼자 공부하며 세운 목표 중 하나인 클론코딩 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">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="apple.css">
<title>iPhone 13PRo</title>
</head>
<body>
<div class="top_menu">
<img src="img/0.png" class="top_img">
<input type="button" value="스토어" class="Btn top_btn">
<input type="button" value="Mac" class="Btn top_btn">
<input type="button" value="iPad" class="Btn top_btn">
<input type="button" value="iPhone" class="Btn top_btn">
<input type="button" value="Watch" class="Btn top_btn">
<input type="button" value="AirPods" class="Btn top_btn">
<input type="button" value="TV 및 홈" class="Btn top_btn">
<input type="button" value="Apple 독점 제공" class="Btn top_btn">
<input type="button" value="액세서리" class="Btn top_btn">
<input type="button" value="고객지원" class="Btn top_btn">
</div>
<div class="sticky_container">
<div class="sticky_menu">
<Span class="sticky_text">iPhone 13 Pro</Span>
<input class="sticky_btn" type="button" value="개요">
<input class="sticky_btn" type="button" value="제품 사양">
<input class="sticky_btn sticky_buy" type="button" value="구입하기">
</div>
</div>메뉴 두가지를 만들고 스타일에서 차이점을 줬다.
<style>
.top_menu {
background-color: #333333;
}
/* 상단 메뉴바, 링크 걸어서 이동 가능하게 제작 예정 */
.top_btn {
background-color: transparent;
color: var(--menu_font_color);
border: 0;
padding: 0px 10px;
margin: 10px 10px;
font-size: var(--menu_font_size);
transition: var(--btn_transition);
}
/* 이미지와 텍스트 높이를 맞추기 위해선 버티컬 얼라인 사용, Png 파일 적용 위해서는 투명 적용 */
.top_img {
vertical-align: middle;
position: relative;
width: 2%;
background-color: transparent;
}
.top_btn:hover {
cursor: pointer;
transform: scale(1.1);
}
</style>먼저 버튼에 기본 적용된 스타일을 reset css를 통해 모두 걷어주고, 배경색을 투명하게 만들어준다.
이후 패딩과 마진을 통해 세부적으로 조정해주고,
사이즈와 컬러는 대부분 변수를 통해 통일성을 가져다줬다.
이 같은 메뉴바를 만들었다.
다만 제일 왼쪽에 있는 사과로고를 넣기 위해 top_img를 참고해보자.
vertical align을 통해 텍스트와 사진의 높이를 맞춰줬다.
참고로 Png파일에 배경색을 투명하게 적용해주면 제대로 사용할 수 있다.
그리고 트랜지션을 적용해, 마우스를 올리면 조금씩 커지는 모습을 확인할 수 있다.
반응형 메뉴바
다음은 반응형이다.
화면이 스크롤됨에 따라, 상단에 촥 하고 붙어서 따라 내려오는 것이 특징이다. 여기엔 sticky를 사용하면 편하게 작업할 수 있다.
<div class="sticky_container">
<div class="sticky_menu">
<Span class="sticky_text">iPhone 13 Pro</Span>
<input class="sticky_btn" type="button" value="개요">
<input class="sticky_btn" type="button" value="제품 사양">
<input class="sticky_btn sticky_buy" type="button" value="구입하기">
</div>
</div>
<style>
/*상단 반응형 메뉴바 */
.sticky_container {
position: relative;
position: sticky;
top: 0;
z-index: 4;
}
.sticky_menu {
margin: 0;
max-width: auto;
padding: 12px 0px 6px 0px;
opacity: 0.9;
border-bottom: 0.5px solid gray;
background-color: white;
backdrop-filter: blur(60px);
}
.sticky_text {
font-size: calc(var(--menu_font_size) * 2.2);
margin-right: 50%;
font-weight: 600;
}
.sticky_btn {
border: 0;
background-color: transparent;
transition: var(--btn_transition);
}
/* 패딩 마진 한줄에 기입시 상우하좌, 시계방향 */
.sticky_buy {
color: white;
background-color: #127ce5;
border-radius: 20px;
padding: 5px 10px 5px 10px;
}
.sticky_btn:hover {
cursor: pointer;
transform: scale(1.1);
}
</style>포지션 스티키를 적용하고, Top을 0으로 지정해줌으로써 상단에 위치하게 될 수 있다.
이때, 컨테이너에 적용해야한다.
여기에 z-index값을 4로 준 것은, 다른 파일보다 우선적으로 보여지기 위함이다.
여기에 투명도도 살짝줘서 일체감을 높였고, 필터는 아직까지 적용이 안되고 있어, 방법을 찾는 중이다.
Part 1
작업을 하기 앞서서, 사진이 끊어지거나 제품의 설명이 달라지는 곳을 구분점으로 두고 파트를 나눴다.
본문을 구성하는데 있어 첫번째 파트를 먼저 살펴보자.
텍스트와 함께 동영상이 적용된 것을 볼 수 있다.
소스는 자신이 원하는 걸로 해도되고 만들어서 사용해도 된다.
여기서는 만들어서 사용했다.
html 코드는 다음과 같다.
<div class="part_one">
<div class="Pro">iPhone 13 Pro</div>
<div class="Pro_text">이게 바로 프로.</div>
<!-- <img class="Pro_img1" src="img/1.png"> -->
<video class="vi" src="img/istart.mp4" autoplay muted width="100%"></video>
</div>
<style>
.part_one {
margin-top: var(--part_margin);
}
.Pro {
font-size: calc(var(--menu_font_size) * 3);
font-weight: 350;
padding: 30px;
}
.Pro_text {
font-size: var(--Pro_font_sie);
font-weight: 800;
}
</style>
소스만 구해진다면 비교적 편하게 작성할 수 있다.
다만 화면이 로딩됨과 동시에 재생이 이뤄져야하기에
autoplay를 사용해야한다. 그런데 실행이 안되는 경우에는
Muted를 적용하면 자동으로 재생되는 것을 볼 수 있다.
성공적으로 된다!
Part 2
우선 모든 페이지는 정적으로 구성한 후 자바스크립트와 미디어 쿼리를 적용할 예정이다.
다음은 위와 같이 사진 위에 텍스트를 얹어두는 형태인데,
사진은 포지션 relative와 텍스트에 absolute를 적용해서
top과 left right값을 적당히 조절해주면 된다.
<div class="part_two">
<img class="Pro_img2" src="img/2.jpeg">
<p class="Pro_text2">
비약적으로 강화된 카메라 시스템.
뛰어난 반응성으로 매일 하던 제스처에 전혀 새로운 감각을 선사하는 디스플레이.<br>
스마트폰 사상 가장 빠른 칩. 독보적인 내구성.<br>
획기적인 도약을 이뤄낸 배터리 성능까지.<br><br>
이제 프로할 시간.
</p>
<p class="Pro_text2_2">
₩1,350,000부터(보상 판매* 미적용 가격)<br><br>
동영상 보기 <img class="play_img" src="img/play.png"> 이벤트 시청하기
</p>
</div>
<style>
/* 파트 2 작업 시작라인 */
.part_two {
margin-top: calc(var(--part_margin) * 2);
position: relative;
}
.Pro_img2 {
position: relative;
transform: translate(50, 50);
width: 100%;
height: 100%;
z-index: 0;
}
/* 글자 자간 설정, 라인 바꿈 */
.Pro_text2 {
position: absolute;
top: 10%;
margin: var(--part2_text_margin);
font-size: calc(1.2 * var(--Pro_font_sie));
background-color: transparent;
color: white;
/* opacity: 80%; */
text-align: start;
line-height: calc(var(--Pro_font_sie) / 3.5);
font-weight: var(--part2_text_weight);
}
.Pro_text2_2 {
position: absolute;
bottom: 5%;
margin: var(--part2_text_margin);
background-color: transparent;
color: white;
font-size: calc(var(--menu_font_size) * 2);
text-align: start;
font-weight: var(--part2_text_weight);
}
/* Png 파일 색상반전 적용 */
.play_img {
background-color: transparent;
vertical-align: middle;
width: 3%;
color: white;
filter: brightness(0) invert(1);
}
</style>Part 3
다음엔, 이미지를 겹치고 마우스를 올리면 움직이는 형태의 설명부분이다.
참고로, 이런 무빙은 공식 홈페이지엔 없었다. 그냥 추가해보고 싶은 기능이라 넣었다.
호버에 트랜스레이트x 축 값을 hover시에 각각 반대방향으로 적용해주고, 트랜지션에서 300ms에 ease 값을 주면 보기가 좋았다.
<div class="part_three">
<div class="part_3_img">
<img class="max3image" src="img/3max.png">
<img class="pro3image" src="img/3pro.png">
</div>
<div class="maxtext">iPhone 13 Pro Max
<div class="pro6">6.7형</div>
</div>
<div class="protext">iPhone 13 Pro
<div class="pro6">6.1형</div>
</div>
<p class="part_3_text">ProMotion 기술이 적용된 Super Retina XDR 디스플레이</p>
</div>
<style>
.part_3_img {
position: relative;
margin-top: calc(var(--Pro_font_sie) * 1.5);
}
.max3image {
position: absolute;
z-index: 0;
background-color: transparent;
top: 0;
left: 30%;
transition: 300ms ease;
}
.pro3image {
position: absolute;
z-index: 1;
background-color: transparent;
right: 30%;
top: calc(var(--Pro_font_sie));
transition: 300ms ease;
}
.part_3_img:hover .max3image {
transform: translateX(-55px);
}
.part_3_img:hover .pro3image {
transform: translateX(55px);
}
.maxtext {
position: absolute;
padding-top: 23%;
left: 10%;
font-size: 20px;
background-color: transparent;
}
.protext {
position: absolute;
padding-top: 23%;
right: 10%;
font-size: 20px;
background-color: transparent;
}
.pro6 {
padding-top: calc(var(--Pro_font_sie) / 15);
font-size: var(--Pro_font_sie);
font-weight: var(--part2_text_weight);
background-color: transparent;
}
.part_3_text {
display: flex;
justify-content: center;
padding-top: 57%;
font-size: calc(var(--menu_font_size) * 2);
font-weight: 700;
margin: calc(var(--Pro_font_sie) / 2);
}
</style>
같은 문제에 헤매지 않기 위해 기록합니다.