CSS 클론 코딩 첫 번째

니꼬쌤 강의의 CSS Layout 마스터클래스의 첫 번째 클론코딩!

Best Horror Scenes 사이트를 클론코딩했다.

 

일단 이번 강의에서 한 부분은

 

처음에 reset.css로 먼저 리셋 해주는 것

* { box-sizing: border-box; } 를 기본으로 해두는 거!

box-sizing은 요소의 높이와 너비를 계산하는 방법을 지정하는 건데,

content-box는 너비가 100px일때 테두리와 안쪽 여백이 여기서 더해진다.

border-box는 테두리와 안쪽 여백 + 안의 크기를 100px로 만든다.

 

header (고정 되있는 부분)의 요소들은 display: flex로 한다.

flex로 하면 column으로 세로로 정렬되게 할 수 있고

justify-content로 요소 사이에 간격(?)을 줄 수 있다.

 

+ font-weight로 폰트의 굵기를 지정할 수 있고

   line-height로 줄 사이의 간격을 조절할 수 있다.

 

아래 li들도 ul에 display:flex를 줘서 align-content: flex-start(안하면 멀리 떨어져있는다) flex-wrap: wrap(한 줄에 뭉쳐있지 않게 하는?)를 해준다.

 

opacity는 요소의 불투명을 조절하는 것으로 0.7로 하고 마우스를 올리면(hover) opacity를 1로 해서 글자가 진해지도록 한다.

 

horror 사이트를 보면 header 부분은 고정되있고 컨텐츠 부분은 스크롤을 내릴 수 있는데

먼저 header가 고정될 수 있게 position은 fixed로 한다.

header의 width를 %33으로 주고 main의 margin-left를 33%로 해서 header와 main이 분리되어 보일 수 있게 했다.

 

자 이제 이미지와 제목을 감싸는 movie부분에 height를 100vh를 준다

(근데 이렇게 하면 내용이 늘어나도 높이는 고정이기 때문에 내용이 box를 넘어가서 문제가 되지 않을까?)

그리고 여기도 flex의 column을 써서 제목과 이미지가 세로로 정렬되도록 하고

justify-content와 align-items를 center로 해서 가장자리에 오도록 한다.

제목에도 flex의 space-between을 써서 제목과 디렉터가 떨어지도록 한다.

 

짜잔 요렇게 했다

 

느낀점은 css에 대해 아는 거 정말 없지만

flex가 요소를 정렬하는데 탁월한 친구인 건 알 수 있었다 ㅇ0ㅇ

main의 margin을 줘서 header랑 분리되어 보이게 하는 건 진짜 생각도 못했다

 

이렇게 첫 번째 클론 코딩이 끝났다~! (ﾉ›_‹)ﾉ