css
[ CSS ] 반응형 웹/Viewport/Media Query/Breakpoint
ꕥ웹뷰 프로젝트를 업무로 맡고 있기 때문에 뷰포트에 대해 알아보겠습니다!ꕥ반응형 디자인(Responsive Design) : 세상엔 수많은 기기가 있는데, 다양한 화면 크기에 따라 레이아웃과 스타일을 동적으로 조정하여 웹 페이지를 최적화된 형태로 보여주는 디자인이다.적응적 디자인(Adaptive Design) : 특정 화면 크기(해상도)에 맞게 레이아웃이 변하는 디자인이다. 미디어 쿼리를 사용한다.유동적 디자인(Fluid Design) : 화면 크기에 맞게 요소의 크기가 변하는 디자인이다. %, vw, vh 비율을 사용하고, 요소를 Flex, Grid로 유연하게 배치한다.뷰포트(Viewport) : 사용자가 웹 브라우저를 통해 보는 화면 영역이다.MetaTagvw : 뷰포트 너비의 비율이다.vh : 뷰포..
[ CSS ] Layout/Display/Position/Flexbox/Grid
ꕥ저는 백엔드 위주로 개발을 했기 때문에 프론트엔드는 알아볼 수 있을 정도로만 공부했었는데, 업무를 하면서 이미 만들어진 요소들을 알아보고 배치하려니 복잡하더라구요 ㅎㅎ; 그래서 CSS를 살펴볼까 합니다!ꕥDisplay : 요소가 HTML 페이지에서 어떻게 배치될지를 정의한다.블록(block) : 항상 새로운 줄에서 시작하며, 가로 폭을 모두 차지한다. 위에서 아래로 배치된다. 기본적으로 너비와 높이 지정이 가능하다.Ex) , , 인라인(inline) : 한 줄에 이어서 배치되며, 콘텐츠 크기만큼의 폭을 차지한다. 화면이 꽉 차면 다음 줄로 넘어간다. 기본적으로 너비와 높이 지정이 불가능하다.Ex) , , (예외적으로 너비와 높이 지정 가능) 이외에, 화면상에 전개식으로 요소가 배치되는 것이 아닌, 여러..