6) Second-Project

내 사랑 라이언. 라이언 만세!

22.3.31

 

 - 건 한달만에 시작된 HTML/CSS 강의

 - 그동안 Java에 집중하느라 이 쪽은 감히 쳐다보지도 못했...

 

 - Flex box를 이용해서 본격적으로 Spotify 홈피 제작 시작!

 

1) 홈페이지 분석

 - 먼저 만들 홈페이지를 분석하는데, 크게 3가지(Top - Mid- Bottom)으로 구분

 - 강의에서는 상단 중단 하단이라고 하는데, 그냥 롤 생각해서 구분하는게 나에겐 더 편한듯

 - Html에서 div로 상단 중단 하단 3개로 구분지어 줌 

 - Spotify 홈피에서 inspect->selector 로 각 부분의 크기(높이) 및 색상 확인 후 적용

 - Css에서 각각 top, mid, bot으로 클래스를 만들어서 높이 및 색상 적용!

 - 만들고나면 화면에 꽉차지 않고 흰색으로 공간이 상하좌우로 남아있음

 - inspect -> selector로 확인해보면 Body에 margin : 8px이 있음!

 - 알고보니 Body에 기본적으로 margin이 주어져 있던 것

 - Body 전체에 margin을 줘야하니 Css에서 body클래스( . 찍지 않음) 만들어서 margin : 0px 주면 해결!

 - selector로 다시 확인하면 body가 새로 덧 씌워지면서 margin이 0px로 적용됨을 확인 가능

 - 이것을 오버라이딩 이라 함(자바에서 배웠쮸?)

 

 

------

 - 오늘은 맛만 봤다

 - 내일은 Top 갱킹 ㄱㄱ