우선 1주차때 과제로 만들었던 넷플릭스 프론트 클론코딩의 모습은 다음과 같다.
정말 부끄럽지만.. 이러하다.. 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/57608ebaa2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<style>
#parent{
/* 제일 큰 뼈대 */
/* background-color: red; */
background-color: black;
/* border: 3px solid black; */
width: 300px;
height: 500px;
display: flex;
flex-direction: column;
}
.big{
flex-basis: 0;
}
#big_1{
flex-grow: 1;
display: flex;
border: 2px solid black;
flex-direction: column;
}
#big_1_1{
position: relative;
flex-grow: 2;
border: solid black;
flex-basis: 0;
}
#big_1_2{
flex-basis: 0;
display: flex;
flex-direction: row;
flex-grow: 3;
border: solid black;
}
#big_1_2_1{
flex-grow: 1;
flex-basis: 0;
border: 2px solid black;
}
.fa-bars{
font-size: 24px;
color:gray;
padding-left: 6px;
padding-top: 5px; }
#big_1_2_2{
flex-grow: 3;
flex-basis: 0;
border: 2px solid black;
}
#big_1_2_3{
flex-direction: row;
flex-grow: 3;
flex-basis: 0;
border: 2px solid black;
}
.fa-search{
font-size: 24px;
color:gray;
padding-left: 60px;
padding-top: 5px;
}
.fa-ellipsis-v{
flex-basis: 0;
font-size: 24px;
color:gray;
padding-left: 10px;
}
#big_1_3{
display: flex;
flex-basis: 0;
flex-grow: 3;
border: solid black;
flex-direction: row;
}
#big_1_3_1{
flex-basis: 0;
border: 2px solid black;
text-align:center;
flex-grow: 1;
color:white;
}
#big_1_3_2{
flex-basis: 0;
text-align:center;
border: 2px solid black;
flex-grow: 1;
color:gray;
}
#big_2{
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid black;
}
#big_2_1{
flex-basis: 0;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-grow: 1;
}
#big_2_2{
border: 1px solid black;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-grow: 2;
}
#big_2_1_1{
border: 1px solid black;
flex-basis: 0;
display: flex;
flex-direction: column;
flex-grow: 3;
}
#big_2_1_1_1{
flex-basis: 0;
flex-grow: 1;
position: relative;
bottom: 13px;
left: 10px;
font-size: 15px;
color: white;
}
#big_2_1_1_2{
flex-basis: 0;
flex-grow: 1;
position: relative;
bottom: 13px;
left: 10px;
font-size: 13px;
color: gray;
}
#big_2_1_2{
flex-basis: 0;
position: relative;
bottom: 10px;
left: 40px;
color: gray;
flex-grow: 2;
}
#big_3{
flex-grow: 1;
border: 2px solid black;
}
#big_4{
flex-grow: 1;
border: 2px solid black;
}
.swiper-container {
display: flex;
height:320px;
border:5px solid silver;
border-radius:7px;
/* box-shadow:0 0 20px #ccc inset; */
flex-wrap: nowrap;
overflow-y: auto;
}
.swiper-slide {
text-align:center;
display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
/* align-items:center; 위아래 기준 중앙정렬 */
justify-content:center;
}
.swiper-slide img {
box-shadow:0 0 5px #555;
max-width:100%;
}
</style>
</head>
<body>
<div id = "parent">
<div class = "big" id = "big_1">
<!-- <p>큰거1</p> -->
<div id="big_1_1">
<img src="time.jpg" alt="netflix" width = "80" style="padding-left: 210px; padding-top: 3px;" >
</div>
<div id="big_1_2">
<div id="big_1_2_1">
<i class="fas fa-bars" ></i>
</div>
<div id="big_1_2_2">
<img src="netflix.jpg" alt="netflix" width = "100"
style="padding-top: 2px;" >
</div>
<div id="big_1_2_3">
<i class="fas fa-search"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
<div id="big_1_3">
<div id="big_1_3_1" style="border-bottom:2px solid red;">
<p>BROWSE </p>
</div>
<div id="big_1_3_2">
<p>MY LIST</p>
</div>
</div>
</div>
<div class = "big" id = "big_2">
<div id="big_2_1">
<div id="big_2_1_1">
<div id="big_2_1_1_1">
<p>Trending Now</p>
</div>
<div id="big_2_1_1_2">
<p>Recommended for you</p>
</div>
</div>
<div id="big_2_1_2">
<p>ALL <i class="fas fa-chevron-right"></i></p>
</div>
</div>
<div class = "swiper-container" id="big_2_2">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="pic_1.jpg"></div>
<div class="swiper-slide"><img src="pic_2.JPG"></div>
<div class="swiper-slide"><img src="pic_3.JPG"></div>
<div class="swiper-slide"><img src="pic_4.JPG"></div>
<div class="swiper-slide"><img src="pic_5.JPG"></div>
<div class="swiper-slide"><img src="pic_6.JPG"></div>
<div class="swiper-slide"><img src="pic_7.JPG"></div>
<div class="swiper-slide"><img src="pic_8.JPG"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class = "big" id = "big_3">
<!-- <p>큰거3</p> -->
</div>
<div class = "big" id = "big_4">
<!-- <p>큰거4</p> -->
</div>
</div>
<script>
new Swiper('.swiper-container', {
slidesPerView : 4, // 동시에 보여줄 슬라이드 갯수
spaceBetween : 10, // 슬라이드간 간격
slidesPerGroup : 4, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음
// 그룹수가 맞지 않을 경우 빈칸으로 메우기
// 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
loopFillGroupWithBlank : true,
loop : true, // 무한 반복
pagination : { // 페이징
el : '.swiper-pagination',
clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
},
navigation : { // 네비게이션
nextEl : '.swiper-button-next', // 다음 버튼 클래스명
prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
},
});
</script>
</body>
</html>첫번째 시간에 배운 레이아웃 빌드를 바탕으로, parent라는 id 를 가진 div를 만들어서, 그 안에 자식 div들을 만드는 형식으로 레이아웃을 짜봤다.
거의 처음해보는것이기 때문에 익숙치 않아서 생각보다 시간이 많이 소요됐고, 특히
flex-basis =0
라는 것을 뒤늦게 알아서, 자식 div들간의 비중이 들쑥날쑥하는 것에 고민이 많았다. 분명 자식 div들간에 flex-grow를 줌으로써 비율을 일정하게 나누어 놨는데, 글자를 쓴다던가, 다른 태그를 쓰는 순간 일정했던 비율이 들쑥 날쑥해진다.
이것을 간단하게 해결해주는 방법이 flex-basis =0 이며, 자식들 태그에 일일히 다 써주기 귀찮다면, 자식들 div에 class를 따로 만들어서 한꺼번에 처리해주는 방식도 있다. 물론 1주차 실습을 할때는 미쳐 거기까지 생각하지 못했다.
하지만, flex-basis =0 를 써주더라도 다른 태그들의 크기를 너무 크게 한다거나, 비중을 너무 크게 차지하는 태그들을 써버리면 비중이 늘어날 수 밖에 없다.
특히 div안에 테스트를 넣을 때
<div class="parent" id="box">
<p> Hello World </p>
<div>이런식으로 넣으면, p 태그 자체가 차지하는 크기가 있기 때문에, flex-basis=0 으로 처리했다 해도 자식 div들간의 비율이 바뀌는 현상이 생긴다. 따라서 div안에 텍스트를 넣고 싶을 땐
<div class="parent" id="box">
Hello World
<div>그냥 이런식으로 넣어주면 된다.(이걸 굉장히 늦게 알아서 고생을 많이 했다..)
또한 div안에 있는 text의 위치를 조절해주고 싶을 때는,
 를 사용해서 공백을 넣어주던가, 아니면 css쪽에
position: relative;
를 써주고, 상하좌우로 조금씩 움직여 주는 방법도 있다. 이때 테두리가 삐져나갈 염려가 있음으로, border를 없애주는게 깔끔하다.
또한 위 클론코딩 사진에 보면 슬라이드가 있는데, 이 때 너무 어설픈 구글링으로 슬라이드를 만든 것이라 허접하다..
전반적으로 매우 불만족스러웠기 때문에, 2주차 스터디가 끝나고 다음날에 바로 다시 만들었다.. ver 2 넷플릭스 클론코딩은 곧 포스팅하겠다..
일단 배우는거만 정리해보자 차근차근,,