[웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성

2024.04.12 - [PROJECT] - [웹 포트폴리오 만들기] 1편 - 디자인 구상하기

2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기

2024.05.07 - [PROJECT] - [웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기

2024.05.08 - [PROJECT] - [웹 포트폴리오 만들기] 4편 - fullpage 구현하기

2024.05.21 - [PROJECT] - [웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기

 

앙

드디어 포트폴리오 사이트 만들기 마지막 단계임.

완성이야 호우~

 

거의 막바지여서 여러 해상도로 보며 테스트 중이었는데...

모바일 반응형을 염두하지않고 만들어서 그런지 모바일로 봤을때 배치가 완전 엉망이 됨

......어디부터 고쳐야할지 감도안오는 상태

 

미디어 쿼리를 이용해서 가로 767px이하면 모바일로 인식해 레이아웃이 깨지지않게 했음.

@media screen and (max-width: 767px) {
  /* 모바일 */
  .container {
    padding-top: 100px;
    padding-left: 26px;
    padding-right: 26px;
  }
  .title {
    font-size: 30px;
    line-height: normal;
    display: block;
  }
  .miniText {
    font-size: 20px;
    line-height: normal;
    margin-left: 0;
  }
  
  /* 그외 모바일 반응형 css*/
  }

 

차근차근 레고 조립하듯이 css를 재설정 해주면된다..........

 

....

나름 뇌뺴고 할수있어서 재밌음..

 

그렇게 모든 페이지의 모바일 css를 써주면....

 

 

이렇게 모바일로 봐도 깔끔하게 나온다!

이렇게 해서 드디어 포트폴리오 사이트를 완성했음.
처음엔 쉽게 생각해서 금방 만들 줄 알았는데, 생각보다 디자인부터 모든 걸 다 하려니까 빡셌음. 중간중간 버그도 많고, 생각한 대로 구현하려니 힘들었다. 그래도 구글링하면서 머리 싸매며 문제 해결하니까 뿌듯했음 

대충 소감을 말해보자면, 처음부터 끝까지 내가 다 만든 웹 포트폴리오라 그런지 뭔가 애착이 간다. 앞으로도 꾸준히 업데이트하면서 더 멋진 사이트로 만들어볼 생각임.

그럼, 실제로 만든 포트폴리오 사이트 링크 올려둠. 궁금한 사람들 구경ㄱㄱ

https://portfolio-sujin.vercel.app/

SUJIN'S PORTFOLIO

 

이상으로 웹 포트폴리오 만들기 시리즈를 마치겠음. 읽어줘서 ㄱㅅ