웹 - css 연습 4 : CSS Grid Responsive Site

https://hambp.github.io/WebPractice/landing

CSS Grid Responsive Site

 오늘은 이 사이트를 완성(사실 미완성했지만 삽질 때문에 의욕이 떨어져서 중단)했다. 개발 환경이 파일을 만들 수 있는 환경이 아니다. 그래서 코딩할 때 파일을 만들어서 확인 하는 게 아니라 gitpod의 미리보기 기능으로 보면서 하는 거라 실제 웹 사이트와 차이가 있다. 그리고 이번에 삽질을 많이 했던 게 @media 라는 걸 모르고 시작했기 때문에... 화면이 좁아지면 가로로 두 칸을 세로로 두 칸으로 만들기 위해 1시간 넘게 삽질했다. 처음에는 어떻게든 알고 있는 범위 내에서 해결하기 위해 flex와 auto 등을 이용하여 이리 만들어 보고 저리 만들어 보고 했는데 실패했다. 아직도 의문인 건 똑같이 만들었는데 적용되는 경우가 있고 안 되는 경우가 있었다는 것. css는 똑같이 적용했지만 아마 html에서 내용의 길이 때문에 차이가 생기지 않았을까 싶다. 결국엔 @media를 검색해서 해결했다.

 책으로 공부하지 않고 인터넷에서 공부하면 아무래도 빠뜨리는 부분이 생기는 것 같다...

 @media를 알게 되면서 다른 부분도 수정할 곳이 보였지만 수정을 못 해서 안 하는 것도 아니기 때문에 그냥 이쯤에서 끝내기로 했다. 지쳤다...