css를 작성하는 과정에서 background가 제대로 들어가지를 않더라고요... 훌륭하시 팀원분이 height를 100vh로 사용해보라고 도움을 주셔서 사용했는데 background가 잘 들어가는 것을 확인할 수 있었습니다.
팀원분이 알려줬을 때는 아 저거 그냥 쓰면 되는가 보다하고 넘겼는데 나중에도 이런 상황이 오면 혼자 해결을 못 할 것 같다는 느낌에 vh, vw에 대해서 공부를 했습니다. 그리고 css에서는 정렬하는 게 쉽지 않기도 하고 이것저것 디테일한 부분까지 알아야지 정확하게 정렬을 할 수 있을 것 같다는 느낌이 프로젝트를 하면서 강하게 들어서 프로젝트가 끝나고 나서 혼자 찾아보게 되었습니다.
일단 1vh는 viewport height의 줄임말로 뷰포트의 100분의 1을 의미합니다. 그러면 1vw는 viewport width로 뷰포트의 100분의 1을 의미합니다. 예를 들면 브라우저 높이가 900px이라고 하면 1vh = 9px이 되고 브라우저 너비가 800px이라고 하면 1vw = 8px이 됩니다.
그래서 저의 팀원분도 100vh로 높이를 지정해보라고 하신 말이 전체 화면의 높이 만큼 background를 지정하라는 말이 였습니다. 참 알고나면 별거 아닌데 모르면 힘들죠... 스스로 배우고 찾아보고 공부하는 것도 오래걸리는 일이고요.
아무튼 vh와 vw는 상대적인 값을 나타내므로 전체적인 크기를 잡는 것도 유용하고 html 프레임을 정렬하는 데 있어서도 편할 것 같다는 생각을 했습니다. css에서 까다롭다고 생각한 것이 정렬이 였는데 이렇게 사소한 단위를 알아야지 정렬을 하기 용이할 것 같았습니다.
제가 또 정렬하는 데 있어서 F12을 정말 많이 사용해서 내가 수정하고 싶은 부분이 어느 부분에 해당하는 지 확인하고 해당 부분을 수정작업을 하니까 시간도 줄어들고 어느부분이 잘 못 됐는지 정확하게 파악하기 용이했습니다.
