HTML, CSS : 나만의 Playlist 디자인하기

1. 완성본

결과물

- 노마드코더 코코아톡 챌린지에서 진행한 나만의 플레이리스트를 직접 제작해보았다.

 

 

 

2. 디렉터리

디렉터리

- 이미지 폴더, 1개의 html 파일, 2개의 css 파일로 이루어져있다.

(index.html : 방문자가 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹사이트에 표시되는 기본 페이지이다.)

 

 

 

3. 과정

* index.html

head

- css 파일은 styles.css 파일만 연결한 후, styles.css 파일에 main-song.css 파일을 import하였다.

- font awesome을 통해 아이콘을 넣었다. (kit 필요)

 

 

 

 

* Kit이란?

https://docs.fontawesome.com/web/setup/use-kit

 

 

 

* body

body

- [결과물]에서 겉에 틀을 container로 묶어서 작업하였다.

 

 

 

* 첫번째 container 내부

 

- class 명을 작명할때는 BEM 네이밍 방식을 사용하여 지으려고 노력하였다.

 

 

 

* BEM 네이밍 방식

https://en.bem.info/methodology/naming-convention/#naming-rules

 

 

* styles.css

- styles.css 파일은 중복이 많아, 중요한 부분만 넣었다.

- import url('http://fonts.~) : google font에서 원하는 폰트를 import한 후, font-family에서 지정하였다.

- body의 height를 100vh로 주면, 브라우저 전체 화면을 꽉 채우게 된다.

- display flex : 자식 요소를 flex item으로 만들어 부모를 통해서 쉽게 정렬할 수 있게 된다.

- box-sizing border-box : 너비가 정해진 item에 padding을 주면, 그 너비를 유지한 채로 padding 값도 추가가되어 본래 item에 설정하고자 했던 크기보다 padding 값 만큼 더 커지게 되는 현상을 제한해준다.

- overflow hidden : 경계 밖으로 나가면 안보이게하는 설정

 

- .song-profile:hover : [결과물]에서 앨범 리스트 위에 마우스를 올려놓았을 때, 바뀌는 설정들이다.

- cursor pointer : 마우스가 요소 위에 있을 때 표시할 마우스 커서를 pointer로 설정합니다