초보 개발자

5번째 과제 인스타 화면 구현 및 튜터님 코드 분석 1 본문

AI 웹개발 트랙 - 내배캠/2주차

5번째 과제 인스타 화면 구현 및 튜터님 코드 분석 1

taehyeki 2021. 12. 24. 16:38

sparta/projects at master · taehyeki/sparta (github.com)

 

GitHub - taehyeki/sparta: 스파르타 코딩클럽 웹개발 트랙 1기 !

스파르타 코딩클럽 웹개발 트랙 1기 ! Contribute to taehyeki/sparta development by creating an account on GitHub.

github.com

코와이네 ~

한 80%정도 만들고 그냥 제출해버린 것 같다.. 반응형을 도대체 어케써야하는지 감이 안잡힌다. 따라서 튜터님께서 작성하신 코드를 낱낱히 분석해보고 다시 내걸 만들어봐야 겠다.

튜터님의 css

 

자 튜터님의 코드를 제가 처음부터 하나씩 만들어 가면서 그 과정에 대해서 알아보려고 합니다.

html 의 head

head에 meta 데이터를 적어주셨는데 이걸 안적어주면 모바일 화면으로 봤을 때 적용이 하나도 안됩니다!!

꼭 넣어주셔야 합니다.

 

html 의 body

튜터님의 코드

body를 보시면 크게 div#main 안에 div#header, div#container, div#footer 이렇게 3가지로 이루어 진 것을 보입니다.

이렇게 보면 별거 없는 것 처럼 보이죠.

 

제가 여기서 사용하는 div#hi, div.hello 와 같이 말할 때 의미하는 것은

div#hi -> id가 hi인 div태그를 의미합니다 .

<div id="hi"></div>

div.hello -> class가 hello인 div태그를 의미합니다.

<div class="hello"></div>

 

 

 

먼저 div#id 의 div#header를 만들어 보겠습니다.

css를 아직 입히지 않은 채로 작성해보면 날 것 그대로 아래와 같이 나옵니다.

이걸 이제 이쁘게 다듬어 주어야겠죠?? 튜터님이 작성하신 css를 보면 

먼저 body에 max-width와 margin을 주셨습니다. 똑같이 작성해보면 아래와 같은 화면이 나옵니다.

body는 최대 720px까지만 커질 수 있다는 뜻이고, body를 화면 가운데에다 두겠다는 뜻입니다.

사진이 가운데로 왔고, 720px가 작아서인지 순서가 좀 뒤틀렸네요.

 

header

다음은 header입니다. 이제부터 display flex가 나오는데

혹시 display : flext에 대해 잘 모르신다 하시면 아래의 사이트에 가셔서 참고해보시고,

이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)

 

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

다 보고 오시면

Flexbox Froggy - CSS flexbox 속성 배우기 게임

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

이 게임을 24단계까지 다 깨보시고 다시 와주세요 !!

 

아래와 같은 화면이 출력이 됩니다. 

#header css만 추가해준 화면

이렇게만 봐서는 뭐가 뭔지 잘 모르겠으니까 나머지 header css도 추가해줍시다.

header안의 나머지 css도 추가해 준 화면.

이제야 css좀 적용 했다라고 볼 수 있을 것 같습니다. #header를 살펴보자면 display: flex를 주었고 

 

justify-content 를 space-between으로해서 내용물들을 같은 간격으로 벌려주었습니다.

 

그리고 align-items도 center로 지정해주어서 상하 간격도 맞춰 주었습니다.

 

여기서 width 100%가 의미하는 것은 부모인 main의 크기에 영향을 받는데 여기서 main의 css는 아무것도 없으니까 width가 지정된 부모를 따라 따라 올라 갔는데 없으니까 그냥 편하게 뷰포트기준이라고 생각하자!! 그렇다고 무한정 늘어나는 것은 아니고 body에서 상한선을 정해두어 거기까지만 커진다. 근데 body에서 이미 max-width로 지정해놔서 width 100% 랑 max-width를 720px로 지정해주지 않아도 될텐데... (최대 body크기 720px로 막아 둠)왜 굳이 해놨을까?. 생각해보다  밑에 있는 position: fixed인 것이 눈에 들어왔고 설마 이 것 때문인가?? 라는 생각에 구글링을 하였더니!!

 

position 속성이 fixed인 경우, 컨테이닝 블록은 뷰포트나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.라고 한다.

즉 postion fixed를 쓰면 크기의 기준은 부모가 아닌 뷰포트로 바뀌게 되니까 저 부분을 설정해 준것 입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/position

 

position - CSS: Cascading Style Sheets | MDN

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

developer.mozilla.org

다시 돌아와서 이제 카메라모양과, DM모양에 header-icon 이라는 클래스가 붙어 있었고

width는 6%로 지정해주었다. margin은 위아래 3%, 좌우로 5%씩 주었습니다. 

 

그리고 instagram의 logo부분에 해당하는 #logo에는 width를 27%로 주었다.

 

이것이 의미하는 바는 뷰포트가 늘어날 때 같이 늘어나고 줄어들 때 같이 줄어든다.

우리 body는 720px이 최대니까 720기준으로 각 icon의 크기는 43.2 일 것이다.

 

 

이를 확인할 수 있는 부분이 header가 max-width(720)인 상태에서  icon크기를 확인해 보았을 때 아래와 같았다.

또 한번 해보면 width가 571.2일 때  #logo를 확인해보았을 때도 잘 나온걸 확인할 수 있다.