전체 글

TIL] css단위 vh와 vw

vh 반응형으로 웹디자인을 할 때는 아무래도 픽셀 단위가 아닌 % 단위를 많이 사용한다. 하지만 css의 퍼센트 값이 모든 문제를 해결할 수 있지는 않다! css의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받기 때문이다. 이럴 때 vh가 상대적으로 많이 쓰인다. vh 요소는 높이값의 100분의 1단 위이다. 예를 들어 브라우저 높잇값이 700일 때 1vh는 7px이라는 뜻이다. vw 그렇다면 높이값 말고 뷰포트의 너비 값으로 적용하려면 어떻게 해아 할까? vw를 사용하면 된다. vw 요소는 뷰포트의 너비 값의 100분의 1단 위이다. 예를 들어 뷰포트의 너비 값이 700px이면 1vw는 7px이라는 뜻이다. 뷰포트란 무엇일까? vh단위를 쓸 때 브라우저의 높이는 어떤 건지 알지만 vw단위를 쓸..

두번째 토이프로젝트를 하며 느낀점

두 번째 토이 프로젝트 두 번째 프로젝트도 첫 번째와 마찬가지로 토이프로젝트라고 하기에 민망할정도로 완성도가 낮았다. 하지만 첫번째 토이 프로젝트보다 발전했다! 그것에 큰 성취감을 느낀다. 두 번째 토이 프로젝트는 우선 플라스크를 통해 서버를 만들었고 로그인을 구현하였다! 회원가입은 구현하지 못했지만 회원가입은 꼭 구현하고 싶은 것 중 하나이다! 로그인은 session을 통하여 구현하였고 로그인을 구현하면서 쿠키와 세션에 대해 공부하게 되었다. 이번 토이 프로젝트를 하면서 느낀 점 이번 프로젝트를 하면서 로그인을 너무 구현하고 싶었다. 따라서 로그인 페이지를 통하여 메인 페이지에 접속하게 하였고 그 후에 메인페이지 속에서 영화 추천 및 이벤트 응모를 만들어서 지금까지 배운 것들을 응용하였다! 배운 것을 ..

TIL] em과 rem

em em은 현재의 font-size를 정의한다. 예를 들면 body태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다. test 위의 예제를 보면 div에 폰트 사이즈를 2em으로 지정했다. 위의 예제는 2px(body태그의 폰트 사이즈)를 기준으로 2배의 폰트 사이즈로 표현이 된다. 결과적으로 4px의 크기가 된다. 즉 em은 1em = 부모의 폰트 크기라는 계산법을 가지고 있다. 대부분의 브라우저에서 폰트 크기의 디폴트 값은 16px이기 때문에 별도로 지정하지 않는다면 1em은 16px이 된다. rem rem은 relative to the root element의 줄임말인데 HTML 문서에서 최상위 요소(root element)는 바로 요소를 가..