반응형
미디어 쿼리를 사용하여 반응형 웹 페이지를 만드는 간단한 예제를 제공하겠습니다. 이 예제에서는 브라우저 창 크기에 따라 배경색이 변경되는 간단한 반응형 웹 페이지를 만들어 보겠습니다. 먼저, HTML 파일을 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>반응형 웹 페이지 예제</title>
</head>
<body>
<h1>반응형 웹 페이지 예제</h1>
<p>브라우저 창 크기를 변경해보세요.</p>
</body>
</html>그 다음, 동일한 디렉토리에 styles.css 파일을 생성하고 다음 코드를 추가합니다.
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
transition: background-color 0.5s ease;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
/* 미디어 쿼리를 사용한 반응형 디자인 */
@media (max-width: 599px) {
body {
background-color: lightgreen;
}
}
@media (min-width: 600px) and (max-width: 899px) {
body {
background-color: lightblue;
}
}
@media (min-width: 900px) {
body {
background-color: lightcoral;
}
}위의 예제에서는 3개의 미디어 쿼리를 사용하여 다양한 브라우저 창 크기에 따라 배경색이 변경되도록 설정했습니다.
- 599px 이하의 창 너비에는 연두색 배경이 적용됩니다.
- 600px ~ 899px 창 너비에는 연한 파랑색 배경이 적용됩니다.
- 900px 이상의 창 너비에는 연한 적색 배경이 적용됩니다.
이렇게 미디어 쿼리를 사용하면, 다양한 화면 크기에 따라 웹 페이지의 디자인을 쉽게 조정할 수 있습니다. 이 예제는 단순한 배경색 변경을 보여주지만, 미디어 쿼리를 사용하여 레이아웃, 폰트 크기, 이미지 크기 등 다양한 스타일 요소를 변경할 수 있습니다.
홈페이지 제작과 프로그램 개발의 전문가, 티로그에서 시작하세요
홈페이지제작 및 프로그램개발 전문, 인기 상승 중인 티로그의 서비스
tloghost.com
반면 SCSS는 CSS의 문법을 따르면서도 변수, 연산자, 함수, 믹스인 등과 같은 다양한 기능을 제공합니다. SCSS에서는 변수를 사용하여 값에 이름을 부여하고, 이를 재사용할 수 있습니다. 또한, 연산자를 사용하여 값의 계산을 할 수 있습니다. 예를 들어, 다음은 SCSS의 예시 코드입니다.
반응형
'IT용어' 카테고리의 다른 글
| .com 도메인을 얻을 수 있는 5가지 방법 (0) | 2023.03.29 |
|---|---|
| 도메인 포워딩 활용하여 웹사이트 접근성 향상시키기 (0) | 2023.03.29 |
| css와 scss의 차이점 (0) | 2023.03.29 |
| HTTP와 HTTPS의 차이점 (0) | 2023.03.29 |
| 프론트엔드 개발자란? (0) | 2023.03.27 |
댓글