html 의 기본 태그들을 배우고 이젠 웹사이트 베끼기인 CloneCoding 의 첫걸음을 떼보려고 합니다.
전체 소스는 제 깃허브에서 보실 수 있습니다.
CloneCoding 클론코딩을 왜 하나요?
CloneCoding 의 목적은 삽질입니다. 내가 얼마나 깊게 파느냐가 앞으로 쌓아올릴 결과물을 얼마나 높게, 얼마나 튼튼히 쌓을지 결정해줄 것입니다.
결국 클론코딩은 다다익선입니다. 많이 작업하다보면 처음에는 이해가지 않던것들이 한 100번쯤 되면 이해가 갈겁니다. 자 이제 시작합니다.
첫번째 프로젝트는 본인만의 쨥플릭스를 만드는 것입니다. 저는 제 영어이름을 따 Dexflix 라고 이름지어보겠습니다.
새로운 폴더에 header.html, header.css 파일을 만들고 연결시켜주세요.
<<폴더구조>>
netflix
- header.html
- header.csslink:css 입력후 탭, 파일명을 header.css 로 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Netflix</title>
-- 아래 부분 추가합니다
**<link rel="stylesheet" href="header.css" />**
</head>
<body>
<h1>netflix header</h1>
</body>
</html>잘 연결되어 있는지 확인을 위해 body 태그의 바탕색을 바꿔봤습니다. 앞으로 등장하는 css 값들은 중복되는 것이 상당히 많으니 외워서 한다고 생각하기보단 어떻게 하면 될지 이것저것 써보다가 답을 확인하는 것을 추천드립니다.
body {
background-color: magenta;
}넷플릭스의 헤더 모습을 눈으로 봐줍니다. 머릿속으로 어떻게 나눌지를 생각해봅니다. 테이블 작성시에도 적용되던 윗쪽, 왼편에서 우선순위를 가져가는 것이 이곳에서도 동일하게 적용됩니다.
우선 div 태그로 위 아래로 나눕니다. 정확하게는 순수한 헤더의 영역과 아랫 부분의 네비게이션 역할로 나눠줍니다.
그리고 순수한 헤더 영역의 왼편의 타이틀을 첫번째 태그로 한 뒤 나머지 부분은 ul로 감싸줍니다.
[추가사항] 레이아웃 tag 작성하시면서 class 값으로 해당영역을 의미하는 이름을 붙여줍니다.
<header>
<!-- 순수 헤더 영역 -->
<div class="wrap">
<button class="title">title</button>
<ul>
<li><button class="globe">한국어</button></li>
<li><button class="login">로그인</button></li>
</ul>
</div>
<!-- 네비게이션 영역 -->
<ul class="wrap">
<li><a href="">지금 뜨는 콘텐츠</a></li>
<li><a href="">멤버십</a></li>
<li><a href="">가입해야 하는 이유</a></li>
<li><a href="">자주 묻는 질문</a></li>
</ul>
</header>넷플릭스 로고는 구글에서 검색 후 이미지의 이미지 주소 복사 하신 뒤 img 태그의 src 에 넣어주시면 됩니다. 기타 아이콘은 React 환경이 아닌 상황에서 js 없이 순수한 html 로 작성하다보니 플랫아이콘 사이트을 방문하셔서 필요한 아이콘을 검색한 뒤 이미지 링크 복사로 가져오도록 하겠습니다.
<header>
<!-- 순수 헤더 영역 -->
<div class="wrap">
<button class="title">
<img
src="data:image/png;base64,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"
alt=""
/>
</button>
<ul class="wrap>
<li>
<button class="globe">
<img
src="https://cdn-icons-png.flaticon.com/128/9985/9985721.png"
alt=""
/>한국어
</button>
</li>
<li><button class="login">로그인</button></li>
</ul>
</div>
<!-- 네비게이션 영역 -->
<ul class="wrap">
<li><a href="">지금 뜨는 콘텐츠</a></li>
<li><a href="">멤버십</a></li>
<li><a href="">가입해야 하는 이유</a></li>
<li><a href="">자주 묻는 질문</a></li>
</ul>
</header>레이아웃이 마무리되면 이제 남은건 스타일링의 연속입니다. 아래처럼 계속 스타일링만 해주시면 되겠습니다.
/* 스타일링은 selector 와 "{}" 안의 스타일 룰로 이루어집니다. */
/* ".", "#" 없이 작성할 때는 태그의 이름을 선택합니다. */
header {
background-color: black;
color: whitesmoke;
}
/* "."이 앞에 붙을 때는 클래스 이름을 선택, "#"은 아이디를 선택합니다. */
/* header 안에 있는 모든 태그들 중 클래스 값으로 wrap이 들어가있는 모든 태그들과, button태그중 클래스 값이 globe 인것을 선택합니다. */
header .wrap,
button.globe {
border: 2px solid blue;
display: flex;
align-items: center;
column-gap: 10px;
}
/* header 태그와 ul 태그를 띄워주면서 header 태그 안의 모든 ul 을 선택한다는 뜻입니다. */
header ul {
list-style-type: none;
padding: 0;
margin: 0;
}
button 태그의 내장된 스타일 때문에 예쁘게 만들려면 버튼 모양을 만져줘야 합니다.
/* "," 는 그리고 라는 뜻으로 조건부로 2가지 이상을 선택하고플 때 사용합니다. header 태그 안의 모든 button 태그와 header 안의 모든 a 태그를 선택합니다.*/
/* 만약 header button, a {} 이렇게 선택하시면 header 태그 안의 모든 button태그와 html 상의 모든 a 태그를 선택합니다. 꼭 위 또는 아래처럼 header 를 앞에 붙여 선택의 범위를 좁혀주시는 것이 필요합니다. */
header button,
header a {
background-color: transparent;
border: none;
color: whitesmoke;
cursor: pointer;
}
/* 클래스명이 title 인 button 태그 바로 아래의 img 태그만 선택합니다. */
button.title > img {
width: 60px;
height: 60px;
}
/* 클래스명이 globe 인 버튼과 클래스명이 login 인 버튼을 선택합니다. */
button.globe,
button.login {
border: 1px solid whitesmoke;
/* height 값의 반을 border-radius 로 주시면 가능한 최대한 동그랗게 모서리를 구부려줍니다. */
height: 40px;
border-radius: 20px;
padding: 10px;
}
/* 클래스명이 login 인 버튼을 선택합니다. */
button.login {
background-color: whitesmoke;
color: black;
}
/* 클래스명이 globe 인 버튼 바로 아래의 img 태그를 선택합니다. */
button.globe > img {
width: 16px;
height: 16px;
}
/* header 태그 안의 클래스명이 wrap 인 div만 선택합니다. */
header > div.wrap {
/* display의 값이 flex일때 justify-conent에 space-between 을 주면 양 옆으로 밀어줍니다. */
justify-content: space-between;
}
/* header 태그 안의 클래스명이 wrap 인 ul 선택합니다. */
header > ul.wrap {
/* justify-content값으로 center를 줬을 때 가운데 정렬됩니다. */
justify-content: center;
background-color: rgb(71, 71, 71);
/* 그냥 큰 값을 줘 둥그렇게 만들어줬습니다. */
border-radius: 200px;
/* 안쪽으로 들어오는 여백값 */
padding: 10px;
}
위의 모습이 저희의 작업물이고 아래의 모습처럼 나오려면 빨강 영역 안에 패딩 또는 가운데 정렬을 줘야합니다. ul.wrap 부분을 div 로 감싸줍니다.
//변경 전
<ul class="wrap">
<li><a href="">지금 뜨는 콘텐츠</a></li>
<li><a href="">멤버십</a></li>
<li><a href="">가입해야 하는 이유</a></li>
<li><a href="">자주 묻는 질문</a></li>
</ul>
//변경 후
<div>
<ul class="wrap">
<li><a href="">지금 뜨는 콘텐츠</a></li>
<li><a href="">멤버십</a></li>
<li><a href="">가입해야 하는 이유</a></li>
<li><a href="">자주 묻는 질문</a></li>
</ul>
</div>아래 스타일링 삭제
header > ul.wrap {...}
아래 스타일링 추가
/* 헤더 태그 바로 아래에 많은 div들 중 2번째를 선택합니다. */
header > div:nth-child(2) {
/* justify-conent에 center로 가운데 정렬해줍니다 */
justify-content: center;
display: flex;
}
/* 헤더 태그 바로 아래에 많은 div들 중 2번째에 있는 클래스명 wrap의 ul태그들을 선택합니다. */
header > div:nth-child(2) ul.wrap {
border-radius: 200px;
background-color: rgb(54, 54, 54);
/* 패딩을 2가지 영역으로 쪼개서 값을 주면 첫부분은 위아래, 두번째 부분은 좌우에 값을 줍니다. */
padding: 10px 30px;
/* 4개의 li 사이의 공간 3군데에 틈을 만들어줍니다. */
column-gap: 30px;
}
/* header 태그 안의 모든 a 태그들의 밑줄을 없애줍니다. 시간 내셔서 ctrl space 로 어떤 값들이 있는지 확인하여 개발역량++++ */
header a {
text-decoration: none;
/* 깨알팁입니다. header 안의 a태그를 마우스를 올렸을 때 글자색이 밝아집니다. */
color: rgb(197, 197, 197);
}
/* header 태그 안의 모든 a 태그 위로 올렸을 때를 선택합니다. */
header a:hover {
color: white;
}
스타일링 상단 부분에서 아래 내용을 찾으셔서
header .wrap,
button.globe {
border: 1px solid blue; <-- 이부분 삭제
display: flex;
align-items: center;
column-gap: 10px;
}
전체 소스는 제 깃허브에서 보실 수 있습니다.
Reactor