안녕하세요, 인터넷 검색을 하다가 넷플릭스 클론코딩이라는 글과 영상을 접하게 되면서 영상을 보고 클론코딩을 하면서 모르는 태그나 css문법들을 적어가며 공부해보려 합니다.
혹시나 따라해보실 분들을 위해 링크와 자료 남겨두겠습니다.
*배경
https://i.ibb.co/vXqDmnh/background.jpg
*로고
https://i.ibb.co/r5krrdz/logo.png
*추가사진
https://i.ibb.co/J2xDJV7/tab-content-1.png
https://i.ibb.co/DpdN7Gn/tab-content-2-1.png
https://i.ibb.co/R3r1SPX/tab-content-2-2.png
https://i.ibb.co/gDhnwWn/tab-content-2-3.png
*유튜브링크
https://www.youtube.com/watch?v=P7t13SGytRk
*개발환경
VS Code
영상기준 : 30분 10초 까지의 내용정리
코드로 인해 글이 길어질 것 같아 접어놓겠습니다. 코드도 확인하실 분들은 열어서 참고해주시면 되겠습니다.
HTML (아래 더보기 클릭)
<!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" />
<script
src="fontawsome에서 받은 링크"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/style.css" />
<title>Netflix - Watch TV Shows Online, Watch Movies Online</title>
</head>
<body>
<header class="showcase">
<div class="showcase-top">
<img src="img/logo.png" alt="Netflix" />
<a href="#" class="btn btn-rounded">Sign In</a>
</div>
<div class="showcase-content">
<h1>See what's next</h1>
<p>Watch anywhere. Cancel anytime</p>
<a href="#" class="btn btn-xl">
Watch Free For 30 Days <i class="fas fa-chevron-right btn-icon"></i>
</a>
</div>
</header>
</body>
</html>
●html파일에서 처음에 !를 입력 한 뒤, 엔터를 누르면 자동으로 기본HTML문서가 작성된다.
●<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- IE문서 모드 설정 태그입니다. 다른 버전에서도 이전 버전IE 문서 화면 그대로 볼 수 있도록 하기 위해서 넣는다고 합니다.
-http-equiv="X-UA-Compatible"는 문서 호환을 위해 IE표준을 설정해준다는 코드고
-content="IE=edge"는 표준의 기준이 되는 버전을 설정해주는 부분 입니다. IE=edge면 최신버전에 맞춘다는 뜻입니다.
●가장 처음 나오는 script는 fontawsome이라는 아이콘 사용을 위해 사용했습니다.
CSS (아래 더보기 클릭)
:root {
--primary-color: #e50914;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
img {
width: 100%;
}
.showcase {
width: 100%;
height: 93vh;
position: relative;
background: url("../img/background.jpg") no-repeat center center/cover;
}
.showcase::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}
.showcase-top {
position: relative;
z-index: 2;
height: 90px;
}
.showcase-top img {
width: 170px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.showcase-top a {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
}
.showcase-content {
position: relative;
z-index: 2;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 9rem;
}
.showcase-content h1 {
font-weight: 700;
font-size: 5.2rem;
line-height: 1.1;
margin: 0 0 2rem;
}
.showcase-content p {
text-transform: uppercase;
color: #fff;
font-weight: 400;
font-size: 1.9rem;
line-height: 1.25;
margin: 0 0 2rem;
}
/*Buttons*/
.btn {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 0.4rem 1.3rem;
font-size: 1rem;
text-align: center;
border: none;
cursor: pointer;
margin-right: 0.5rem;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
border-radius: 2px;
}
.btn:hover {
opacity: 0.9;
}
.btn-rounded {
border-radius: 5px;
}
.btn-xl {
font-size: 2rem;
padding: 1.5rem 2.1rem;
text-transform: uppercase;
}
.btn-lg {
font-size: 1rem;
padding: 0.8rem 1.3rem;
text-transform: uppercase;
}
●CSS 우선순위에 따라서 showcase 다음 showcase-top, showcase-content순으로 이루어지는 점을 참고해야겠습니다.
● :root는 가상클래스로 웹문서에서 가장 상위의 요소로 여겨진다. root클래스에 있는 --primary-color를 속성에 적용할 때는 color : var(--primary-color) 와 같이 var을 사용하여 이용합니다.
●*은 전체 선택자로서 HTML의 모든 요소를 선택합니다. 이를 이용해 문서전체의 속성 값들을 설정할 수 있습니다.
●box-sizing은 박스의 크기를 화면에 표시하는 방식을 바꾸는 속성입니다.
-하나의 div가 있을 때 그 div는 content칸도 있겠지만 padding, border, margin, offset등의 추가적인 칸?테두리?들이 존재합니다. 이로 인해 하나의 요소의 크기를 제대로 측정하기가 어려울 수도 있는데, 이를 테면 500px를 원해서 width를 500으로 했으나 여러 테두리들에 의해 실제 크기는 500px가 넘는 식이죠.
- 속성 값을 border-box로 하면 전체크기를 조작할 수 있고 content-box로 하면 내용이 담기는 칸의 크기만 조작할 수 있게됩니다.
●showcase의 background: url("../img/background.jpg") no-repeat center center/cover;
- url을 사용하여 절대 or 상대 경로에 있는 파일을 그대로 가져다가 배경으로 쓸 수 있습니다.
- no-repeat center center/cover;이 부분은 center/contain이냐 center/cover냐로 나누어 사용할 수 있는데, 넣고자하는 사진의 규격과 맞지 않는 칸에 사진을 넣으려고 할 때, (EX - 300*100 사진을 100*300칸에 넣는 상황) contain은 사진을 모두 집어넣기 위해 칸에 여백을 남기고, cover는 칸을 모두 채우는(Cover)데에 초점을 맞춰 사진을 칸에 맞추어 확대합니다. 이때 기준이 되는 게 center이므로 center/contain또는 center/cover가 됩니다.
- cover는 중앙비율, contain은 원본비율로 설정되는 것이라고 합니다.
●::after
- 이미 작성된 HTML에 새로운 스타일을 주기 위해서 사용하는 가상 요소입니다.
- 가상요소들은 더 다양하게 있지만 ::after와 ::before에 대해서만 알아보겠습니다.
- ::before 는 실제 내용 바로 앞에서 생성되는 자식요소, ::after는 실제 내용 바로 뒤에서 생성되는 자식요소입니다.
EX) "::before에 적은 내용" + "HTML코드상의 내용" + "::after에 적은 내용" 순으로 화면에 배치 됩니다.
- 위 예시에서 적은 내용은 content속성 값으로 지정해줄 수 있는데 내용보다 꾸밈을 위해 사용하므로 보통 content: ""; 으로 설정합니다.
●position : relative/absolute
- 문서상의 요소를 배치하는 방법을 지정하는 속성입니다.
- relative/absolute는배치를 하기 위한 기준을 정하는 부분으로 relative는 자기자신을 기준(자신의 본래위치, static일때의 위치)으로 배치, absolute는 부모 요소를 기준으로 배치함을 의미합니다.
●z-index
- 요소의 수직 위치를 정하는 속성입니다. 쉽게 말하면 화면 가장 앞에 나오도록 하는 우선순위를 지정해주는 것이며, 숫자가 클수록 우선순위가 높아집니다.
- a의 자식b가 있는 경우, a는 b보다 앞으로 나올 수 없습니다.
●transform: translate(?%, ?%)
-transform 속성은 JavaScript없이도 요소를 애니메이션 시키거나 시각, 상호작용 효과를 제공하는 속성입니다.
- rotate를 이용하여 요소를 회전시킬 수도 있고 이번에 쓰인 translate를 이용하여 이동시킬 수도 있습니다. 양수(+)면 오른쪽, 음수(-)면 왼쪽으로 이동하며 (x,y)순 입니다. 위에 쓰인 것처럼 %를 이용하여 나타낼 수도 있습니다.
●display:flex
- flex는 레이아웃을 위해 생겨난 코드입니다. flex를 적용하면 요소의 width가 부모요소만큼 꽉차는게 아닌 글자 수에 맞게 딱 맞는 크기가 됩니다.
- 때문에
1
2
3 이 아닌 1 2 3으로 나타나게 됩니다.
- display:float 과의 차이는 높이에 있습니다. float일 때는 높이도 내용에 맞게 자동으로 설정되지만 flex의 경우 자식 요소들 중 가장 내용이 긴 요소에 맞춰 같은 높이로 만들어 줍니다.
| 1 2 3 |
1 |
이런 식으로 내용의 높이가 다르지만 같은 높이를 갖게 되는 것입니다.
●flex-direction:column
- 위에서
1
2
3 이 아닌 1 2 3으로 나타난 이유는 flex-direction값이 row가 기본 값이기 때문인데요, column을 쓰면 열을 기준으로
1 2 3이 아닌1
2
3 으로 나타나게 됩니다. row, column외에도 -reverse를 붙이면 역으로 생성시킬 수도 있습니다.
EX) row-reverse => 1 2 3이 아닌 3 2 1
●justify-content: center
- justify-content는 가로축에 대한 정렬, align-items는 세로축에 대한 정렬을 설정하는 코드 입니다.
- center로 했기 때문에 가운데 정렬이 되었습니다.
●cursor
-마우스 커서 모양을 바꿀 수 있는 코드 입니다. 클릭모양, 기본 모양, 크기 조절 모양 ,,등등 다양한 속성 값들이 존재합니다. 위 코드에서는 pointer로 클릭할 때의 포인터 모양으로 설정해준 모습입니다.
●opacity
- 요소의 투명도를 설정하는 코드 입니다. 투명도 범위는 0.0~ 1.0입니다.
- 1.0에 가까울 수록 불투명해지며, 위에서는 버튼을 누른듯한 효과를 주기 위해 사용되었습니다.
●text-transform
- 문자를 모두 대문자 또는 소문자로 바꾸는 속성입니다. uppercase(모두 대문자) 를 속성값으로 사용했습니다.
JS
-진행하지 않음.
'[HTML] > 따라만들기' 카테고리의 다른 글
| [HTML] 넷플릭스 클론코딩 1 fin. (0) | 2022.11.29 |
|---|---|
| [HTML]크롬 첫 화면 따라만들기 -제작과정- (0) | 2021.02.26 |
