반응형 디자인은 웹사이트가 다양한 기기와 화면 크기에 맞게 적절하게 조절되도록 하는 디자인 방법입니다.
이 강좌에서는 반응형 디자인의 기본 개념과 CSS를 사용하여 반응형 웹사이트를 만드는 방법을 살펴보겠습니다.
뷰포트 설정
먼저 반응형 웹사이트를 만들려면, 뷰포트를 설정해야 합니다. 뷰포트는 사용자가 웹페이지를 볼 수 있는 영역입니다.
다음과 같이 HTML 파일의 <head> 태그 내부에 뷰포트 메타 태그를 추가합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
미디어 쿼리
미디어 쿼리를 사용하면, 다양한 기기 및 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 미디어 쿼리는 다음과 같이 사용합니다.
@media screen and (max-width: 600px) {
/* 여기에 600px 이하일 때 적용할 CSS 스타일을 작성합니다. */
}
그리드 시스템
반응형 웹사이트를 만들 때 유용한 도구 중 하나는 그리드 시스템입니다. 그리드 시스템을 사용하면, 웹페이지를 여러 열로 나누어 콘텐츠를 배치할 수 있습니다.
다음과 같이 간단한 그리드 시스템을 만들 수 있습니다.
.row {
display: flex;
}
.column {
flex: 1;
}
/* 화면 크기에 따른 열 개수 조절 */
@media screen and (max-width: 1200px) {
.column {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
}
}
이미지 크기 조절
반응형 웹사이트에서는 이미지의 크기도 화면 크기에 맞게 조절되어야 합니다. 다음과 같이 이미지 크기를 조절할 수 있습니다.
img {
max-width: 100%;
height: auto;
}
텍스트 크기 조절
텍스트 크기 역시 화면 크기에 따라 조절해야 할 필요가 있습니다. 미디어 쿼리를 이용하여 텍스트 크기를 조절할 수 있습니다.
@media screen and (max-width: 1200px) {
/* 1200px 이하일 때 적용할 텍스트 크기 조절 */
body {
font-size: 18px;
}
}
@media screen and (max-width: 600px) {
/* 600px 이하일 때 적용할 텍스트 크기 조절 */
body {
font-size: 16px;
}
}
숨기기 및 표시
모바일 화면에서는 일부 요소를 숨기거나, 데스크탑 화면에서만 보여주고 싶은 경우가 있습니다.
이 경우에도 미디어 쿼리를 사용하여 해당 요소를 숨기거나 표시할 수 있습니다.
/* 모바일 화면에서 숨길 요소 */
.hide-on-mobile {
display: none;
}
/* 데스크탑 화면에서 숨길 요소 */
.hide-on-desktop {
display: block;
}
@media screen and (min-width: 600px) {
/* 데스크탑 화면에서만 보여줄 요소 */
.hide-on-mobile {
display: block;
}
/* 모바일 화면에서만 보여줄 요소 */
.hide-on-desktop {
display: none;
}
}
반응형 테이블
테이블은 데이터를 표 형식으로 표시하는데 사용되며, 반응형 웹사이트에서 테이블을 사용할 때는 가로 스크롤이 발생하지 않도록 조절해야 합니다.
.table-responsive {
overflow-x: auto;
}
@media screen and (max-width: 600px) {
.table-responsive table {
width: 100%;
}
}
이러한 기술들을 활용하여 반응형 웹사이트를 만들 수 있습니다. 물론, 실제 프로젝트에서는 프레임워크를 사용하면 더욱 간편하게 반응형 웹사이트를 구축할 수 있습니다.
대표적인 프레임워크로는 Bootstrap, Foundation 등이 있습니다.
댓글