[21강] 스토리 구현하기
➕ 기존에 구현했던 것은 추가된 것만 적음.
⭐ 크기 조정하기
nav { max-width: 1000px; /* nav의 최대 크기. 화면의 크기가 커져도 1000px 이상으로 더 늘어나지 않는다. */ margin: auto; /* 크기를 늘리나 줄이나 가운데에 오게 하기 위함. */ }
➰ 인스타그램 페이지를 보면, 브라우저 크기가 어느 정도로 커지며 nav 크기도 어느 정도까지만 커지고 크기를 유지한다. 그것을 구현하기 위해 nav의 max-width를 1000px로 두었다.
➰ 그러면 웹 페이지가 1000px이상으로 늘어나도 nav의 크기는 1000px까지만 늘어나고 더이상 커지지 않는다.
➰ margin: auto를 두어 크기를 늘리거나 줄여도 가운데 정렬이 되게 했다.
#container { display: flex; margin: auto; /* container 안에 있는 요소들 가운데 정렬하기. */ width: fit-content; /* 크기를 section과 aside로만 채우기. 그 외에는 margin: auto 때문에 margin으로 채워지는 듯! */ /* 만약 이게 없으면 width가 100%라 더이상 움직일 곳이 없어 가운데 정렬이 되지 않는다. */ /* 그러면 2px로 맞춰지는데, section의 가로 크기를 따로 지정해줘야 함. */ }
➰ display: flex로 해 정렬을 쉽게 했고, margin: auto로 container 안에 있는 요소들을 가운데 정렬하게 했다. 하지만 이것만 적으면 정렬이 되지 않는다.
➰ 그 이유는 container의 width가 100%라 가운데 정렬을 하도록 움직일 공간이 없기 때문이다.
➰ container 박스 안에 section과 aside로만 가득 차게 만들어야 양쪽에 margin을 auto로 두어 자유자재로 가운데 정렬이 되게 해야 한다.
➡ inline-block처럼 안에 내용이 박스에 가득 차게 만들어야 한다.
➰ 그렇기 위해 width: fit-content를 넣었다.
❗ 이러면 width가 2px로 지정됨! 그 이유는 section의 가로 크기를 지정해주지 않았기 때문이다. 해결은 section 파트에서!
section { padding: 30px 0; max-width: 600px; /* section의 크기가 600px 이상으로 더이상 커지지 않게 한다. */ width: 600px; flex: 1; /* flex의 자식일 경우에 차지할 수 있는 부분을 전부 다 차지.*/ }
➰ 원래 페이지의 section 크기는 614px이지만, max-width를 600px로 지정했기 때문에 width도 600px로 지정한다.
➰ 스토리 바 지정하기 전에 section의 padding을 30px로 준다.
@media (max-width: 640px) { section { max-width: 100%; /* 페이지가 640px보다 작아졌을 때는 화면을 가득 채워야 하니 작아졌을 그때의 화면의 100%, 즉 화면을 가득 채움 */ } }
➰ section 부분이 화면을 늘리면 그대로 유지되어야 하지만, 화면이 일정 픽셀보다 작아지면 그 화면을 가득 채워야 한다.
➰ 미디어쿼리를 줘 max-width: 640px일 때 section의 max-width를 100%로 둬 작아진 화면에 가득 차게 한다.
⭐ 스토리 바 구현
<article id="story"> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> <div class="story-item"> <div class="story-img"> </div> <div>name</div> </div> </article>
➰ container 안의 section 파트 중 story 부분!
➰ 한 사람의 스토리를 하나의 div class="story-item", 그 안에 프로필 사진 부분을 div class="story-img", 이름 부분에 name을 넣었다.
➰ 그걸 대략 8개 만들었다!
#story { height: 84px; padding: 16px 0; /* 두 개로만 적으면 왼쪽부터 위아래, 오른쪽왼쪽 양옆의 padding이 설정됨*/ border: solid black 1px; margin-bottom: 24px; background-color: white; display: flex; overflow-y: hidden; /* 스크롤 바가 생김! */ } .story-item { margin: 0 10px; } .story-img { width: 66px; height: 66px; background-color: yellow; } .story-item > :nth-child(2) { /* story-item의 친자식(>) 중에 두 번째 자식에게 스타일을 적용하겠다. */ text-align: center; }
➰ 일단 스토리 부분의 높이 84px
➰ padding은 위아래에 16px만 주었다.
➰ 웹 페이지와 동일하게 margin-bottom을 24px을 주고, 테두리는 직선으로 검정색에 1px의 두께로 주었다. 배경은 다시 흰색으로 바꿔줌!
➰ display: flex로 두어 각각의 스토리들을 배열하기 쉽게 했다.
➰ overflow-y: hidden으로 story 박스를 넘어가면 숨기고 옆으로 넘길 수 있는 스크롤 바를 만들게 했다.
➰ story-item 즉, 프로필 사진 부분과 이름을 합친 개인의 스토리 부분은 간격을 주기 위해 위아래는 margin을 0, 양쪽은 10px을 주었다.
➰ story-img 즉, 프로필 사진 부분은 width와 height 모두 66px, 배경색은 노란색으로 임의로 설정했다.
➰ story-item의 친자식(>) 중에 nth-child(2): 두 번째 자식마다, 즉 story-item의 친자식 중 첫 번째 자식은 story-img, 두 번째 자식은 div name 이므로 name 텍스트를 가운데 정렬하라는 뜻!
➰ 완성된 모습!
🍒 정리
오늘은 스토리 부분을 만들었다. 그 전에 페이지 화면이 줄어들 때 요소들의 크기도 조정하는 작업을 했는데, 역시 이게 제일 어렵다.. 언제쯤 padding, margin, display 등에 익숙해질까! 역시 많이 해보는 게 답인가!
story 만들 때 div 안에 여러 요소를 넣고, 저렇게 바로 정렬을 설정하는 게 너무 신기했다. display: flex를 뒀기 때문에 div block 요소이지만 가로로 정렬이 됐고, 거기서 그 안의 item 요소의 margin을 두었기 때문에 일정하게 간격이 벌어지고(굳이 가운데로 정렬하는 게 아니기 때문에, 간격만 생기면 되기 때문에 양쪽 margin만 줌), 이 item 요소 안에 img와 name이 들어있으니 한 번에 정렬이 된다. 그 안에서 name이라는 글씨를 가운데 정렬하고 싶기 때문에 .story-item > div 라고 해도 되는데, 좀 다른 선택자를 쓰기 위해 .story-item의 친자식(>) 중 :nth-child(2)를 써 두 번째 마다 이 스타일을 적용한다 라는 선택자를 썼다. 이거 진짜 신기했다. 나중에 쓸 일이 있으면 좋겠다.
이렇게 적으면 꽤 이해한 것 같은데 과연 다른 거 만들 때 써먹을 수 있을지 모르겠다ㅠ 잘 써보자!!
