반응형 웹 사이트 만들기

반응형

사실 CSS 는 커리큘럼 되게 앞 쪽에 있어서 한 번쯤 보고 넘어가긴 했지만 나는 CSS 가 너무 싫었다.

그래서 적당히 보고만 넘어갔고 나중에 해야지... 했는데 이제서야 그 벌을 받고 있다.

하지만 일단은 프론트엔드 공부를 하는 한, 반응형은 필수가 아닌가 싶다.

PC 로 보는 사람도 많겠지만 모바일은 더 많을테니...

그래서 어차피 받아야 할 벌이라면 시간을 좀 부어볼까 했다.

다행히 이전 멘토링 시간에 들었던 조언들이 많은 도움이 되었고, 특히 아래의 조언이 정말 좋았다.

모바일 화면부터 만들고 이후에 다른 기기 화면을 만들면 편하다

 

아무래도 모바일에서 한 화면에 렌더링 할 수 있는게 적다보니 요소 배치를 신경써야 한다.

그래서 모바일부터 해놓고 태블릿, PC 를 하면 점진적으로 늘려가는거라 비교적 쉽게 느껴진다.

반면 큰 화면부터 하고 모바일로 가면 기분 상으로도 기존 배치했던걸 없애는 느낌이라 싫더라.

 

결과

간단한 페이지라 대단한건 없지만 결과물은 아래와 같다.

모바일

태블릿

PC

 

아직 익숙하지 않아서 오래 걸리지만 하다보면 늘겠지...

이렇게 반응형도 해봤으니 몰루 사이트로 더 연습해봐야겠다.