하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
어제 만들고 잔 마카오뱅크 웹페이지가 깨졌다.
아마 내가 집에서 기준으로 만든 화면은 아주 큰 모니터인데 그걸 맥 화면으로 열어보니 깨진 것 같다.
사실 그다지 신경은 쓰이지 않는다.
어차피 반응형이라는 걸 전혀 고려하지 않은 채 어떻게든 한 번 모양새가 나게 만들어보자는게 목표였으니까.
근데 두 번째 퀘스트 과제는 전형적인 '반응형' 페이지인 것 같다
전체 화면 사이즈로 볼 때에는 다른 이미지가 나오다가, 모바일 사이즈로 줄어들었을 때 정상적인, 즉 의도한 화면이 나온다.
사실 만들라면 또 어떻게든 만들 수 있겠다.
그 breakpoint만 고려해서 만드는 것도 방법이겠지...
사실 우리가 일상에서 쓰는 수많은 디바이스들. 차마 다 알지도 못하고 나열도 할 수 없는 그 수많은 디바이스들에 웹페이지를 맞추려먼 얼마만큼, 또 어떤 요소들을 고려해야 할지 아직 감도 오지 않는다.
오늘 어떻게든 퀘스트과제 2를 완성시켜보고 싶은데 생각하면 할수록 엄두가 안나서 또 두려움이 밀려온다...ㅋㅋㅋ
그래도. 작은 한걸음을 먼저 떼는 것이 중요하기에..
궁금했던 점을 질문으로 남겼고 트레이너님이 답변을 주셔서 간략하게 정리하는 것으로 오늘의 TIL을 작성하려 한다.
우선 퀘스트2 과제는 브라우저가 모니터 너비(내가 사용하는 맥 에어 기준)의 절반을 기준으로 줄어들었을 때 정상적인 화면이 구현되고, 절반을 초과했을 때 화면을 줄여달라는 문구가 뜬다.
이렇게 특정 레이아웃에 대한 요구사항이 있는 화면 크기의 범위를 브레이크 포인트라 한다.
브레이크 포인트라는 단어를 보았을 때 직감적으로 드는 느낌, 즉 깨지는 포인트! 뭔가 새로운 이슈가 발생하는 포인트라는 점이라고 이해할 수 있겠다.
퀘스트과제 2는 화면 너비의 절반이 브레이크 포인트라고 보여진다. 브라우저의 높이를 조정했을 때 이미지가 달라지는 부분은 없었기 때문이다.
또 궁금했던 점은, 통용적으로 사용되는 각 디바이스의 '브레이크 포인트'가 있는지였는데 역시 있는 것 같다.
조금 투박하게 디바이스를 3종류로 나눈다면 모바일 - 태블릿 - 데스크탑정도로 나눌 수 있겟는데 각각의 디바이스에 따라 통용되는 브레이크 포인트의 범위가 있었다.
궁금한 점은... 반응형 웹을 살짝 검색하다 보니 '미디어 쿼리'를 이용해 브레이크 포인트를 제작한다고 하는데...
지금 우리가 하는 과제가 그럼 '미디어 쿼리'를 사용해야만 구현되는 과제인지 약간 판단이 서지 않는 것이다.
이 부분이 궁금해서 html과 CSS가 좀 익숙한 동료를 잡고 물어봤는데 본인도 잘 모르겠다며...
개발자도구를 통해 예제를 보고 싶은 마음이 굴뚝같지만. 우선은 해볼 수 있는 대로 해보고 내일까지 해결이 안되면 그 땐 깔끔하게 개발자 도구 빠르게 확인하고 과제를 완성시키고자 한다.
막상 굉장히 다양한 디바이스에 적절하게 구현되는 웹페이지를 만들려고 하니 종류도 많고 손도 많이 갈 것 같아 덜컥 겁이난다.
뭐 이렇게... 세상에 디바이스가 많은거야!! ㅋㅋㅋㅋ
이번 한 주 동안 또 어떤 어려움들이 산적해있을지 모르겠지만...
무엇보다도 남은 수, 목, 금요일 동안 html과 CSS가 아주 약간이라도. 정말 조금이라도 더 익숙해졌으면 하는 마음밖엔 없다.
오늘은 회사에 다녀오느라 일과시간을 많이 빼먹어서 더욱 부담스러운 하루...
잘할수 있겠지..?
가보자.. 마지막까지. 어떻게든.
참고: 리메인
