-
반응형 웹 레이아웃 만들기front-end/HTMI CSS 2023. 6. 26. 22:28728x90
1. 단위 정리
- rem은 과거에 웹브라징 폰트를 조절해서 사용하는 사람들이 있어서 사용을 했었습니다.
- 현재는 ctrl + 마우스 훨로 줌 인 줌 아웃을 쓰는 사람들이 많아져서,
페이지를 가변적으로 반응하는 사이트가 아니면 사용하지 않습니다. - 글자 사이즈 단위를 px단위로 기억해서 16px 18px 20px 으로 사용하는 것보다
1rem 1.2rem 이런 씩으로 사용하는것이 편하게 좋습니다.
.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */ }2. media query를 사용한 반응형 레이아웃 만들기
- HTML에 박스 4개를 만들어 보왔습니다.
- 대표적으로 1200px/ 992px/ 768px/ 576px를 많이 사용합니다.
<body> <nav class="main"> <div class="box"><h2>테스트 1</h2><p>테스트중~</p></div> <div class="box"><h2>테스트 2</h2><p>테스트중~</p></div> <div class="box"><h2>테스트 3</h2><p>테스트중~</p></div> <div class="box"><h2>테스트 3</h2><p>테스트중~</p></div> <div style="float : none; clear : both"></div> </nav> </body> <style> .main{ width: 80%; max-width: 950px; margin:auto; margin-top: 50px; margin-bottom: 50px; display: flex; text-align: center; } .box{ background: blanchedalmond; float : left; width : 25%; } </style>
- 1200px 이하시 적용할 레이아웃 작성
- box 클래스의 width : 50%로 지정을 해서 한 라인에 2개씩 box가 생기게 됩니다.
- max width : 600px로 1200px 이하시 박스 크기가 600px으로 변경 했습니다.
@media screen and (max-width : 1200px) { .main{ max-width: 600px; flex-wrap : wrap } .box { float : left; width : 50%; } }
- 768px 이하시 적용할 레이아웃 작성
- 위에 똑같은 내용이지만 width : 100% 지정을 하여 한줄에 1개씩 처리가 됩니다.
@media screen and (max-width : 768px) { .main{ max-width: 400px; } .box { width : 100%; } }
728x90'front-end > HTMI CSS' 카테고리의 다른 글
Sass(Scss)로 css를 간편하게 만들자 (0) 2023.08.01 CSS Transition 속성 (0) 2023.06.30 HTML head 태그(사이트 제목, open graph 등등) (0) 2023.06.25 CSS Flexbox (0) 2023.06.25 HTML CSS 웹폰트 넣는 방법 & 안티앨리어싱 (0) 2023.06.25