반응형 웹
반응형 웹 디자인 : 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현
뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역으로 <meta> 태그를 이용해 <head>와 </head>태그 사이에 작성
예시
우선 title 태그 위에 뷰포트를 작성한다. 만약 작성하기가 어렵다면, 모든 HTML을 지우고, 느낌표(!)를 적고 탭을 누르면 자동으로 작성이 된다.
CSS에 백그라운드 이미지를 넣고, 이미지 반복을 없앤다. 그리고 모든 화면을 꽉 채우도록 백그라운드 사이즈에 cover를 설정한다.
max-width로 최대 1024px 이하 일 경우 다른 백그라운드를 적용하기로 했다. 적용 후, 창 크기를 줄여보니 백그라운드 이미지가 바뀌는걸 확인할 수 있었다.
또 하나 더 적용해보았다. 더 작은 크기 768px 이하일 경우 백그라운드 이미지를 변경한다. 그리고 창 크기를 더 작게 줄여보면 또 다른 이미지 하나가 나타나는걸 확인할 수 있었다.
'HTML+CSS' 카테고리의 다른 글
| [HTML] a태그 팝업창 띄우기 (0) | 2024.05.22 |
|---|---|
| [HTML+CSS] 도움되는 사이트들 (0) | 2023.05.25 |
| [HTML+CSS] grid (0) | 2023.05.24 |
| [HTML+CSS] flex (0) | 2023.05.23 |
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |