부캠 1주차 미니프로젝트(2)

어제 수업이 끝나기 전에 튜터님께 숙제를 하나 받았다. 

flex를 사용하여 본문 박스와 해시태그 박스를 일정하게 배치 하는? 숙제.

어제 받았던 flex 관련 포스트를 읽어보고 사실 이것 저것 다 넣어보니 되더라,, 해보는게 답이다.

프로필과 해시태그 박스를 묶은 main div에 dislpay: flex; 을 선언해주고 세로로 정렬 후에  아이템 사이에 균일한 간격을 만들어주는 space-between을 선언했다. 그러니 오른쪽처럼 쨔잔 하고 떨어지더라. margin-top을 주어도 모양은 같았음 하지만 여러 아이템이 있다면 이 방법이 훨씬 간단할 것 같다.

 

하나 끝내고 나니 또 과제를 내주셨다. h2태그로 작성한 해시태그에 마진을 없애고 div안에서 가운데 정렬하기

이건 생각보다 쉬웠다 무족건 flex관련된 과제일 거라고 생각했음!

우선 h2태그를 margin 0에 가운데정렬 auto를 주었다. 후에 위에서 써먹은 display: flex 선언해주고 세로정렬 후에 justify-content 를 center로 주어 높이를 정렬하였다.

결과는 요로코롬 가운데로 잘 들어와있다!  

 

과제를 다 해결하고 나니 속이 좀 편해져서 이것저것 둘러보면서 찔끔찔끔 효과도 넣어보고 프로필 사진도 열심히 꾸몄다.

 

그래서 내 개인페이지 결과는?

짜잔 - !

a href 링크태그로 내 깃허브 주소와 티스토리 주소까지 첨부해뒀다.

아직은 많이 서투르지만 이거 하나 했다고 좀 뿌듯했다. 물론 머리와 손이 따로 놀아서 하나 하나 찾아보고 그러는데 많이 답답했지만

나중엔 멋들어지게 코딩할 수 있는 날이 오길,,