반응형 웹 페이지
반응형 웹 페이지는 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 웹 페이지가 제대로 보이도록 만드는 것을 말합니다. 반응형 웹 페이지를 만드는 가장 일반적인 방법은 미디어 쿼리를 사용하는 것입니다.
미디어 쿼리는 특정 디바이스의 화면 크기, 해상도 등을 확인하여, 그에 따라 다른 스타일을 적용하는 방법입니다. 미디어 쿼리를 사용하여 반응형 웹 페이지를 만들면, 하나의 웹 페이지에서 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 동일한 사용자 경험을 제공할 수 있습니다.
예제 코드
이번 포스트에서는 간단한 예제 코드를 사용하여 반응형 웹 페이지를 만들어 보겠습니다. 이 예제 코드는 Python을 사용하여 작성된 Flask 애플리케이션입니다.
Flask 설치
먼저 Flask를 설치해야 합니다. Flask는 Python에서 웹 애플리케이션을 만들기 위한 마이크로 웹 프레임워크입니다.
Flask를 설치하려면, 터미널에서 다음 명령을 실행합니다.
pip install FlaskHTML 파일 작성
다음으로, HTML 파일을 작성해야 합니다. 이 예제에서는 간단한 HTML 파일을 작성할 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹 페이지</title>
<style>
.container {
width: 80%;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
}
@media only screen and (min-width: 768px) {
.container {
width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>반응형 웹 페이지 예제</h1>
<p>이 페이지는 반응형 웹 페이지의 예제입니다. 미디어 쿼리를 사용하여, 화면의 크기에 맞춰 출력되고 있습니다.</p>
</div>
</body>
</html>위 코드에서, <meta> 태그에서 viewport 속성을 사용하여, 디바이스의 크기에 따라 페이지가 제대로 표시되도록 설정하고 있습니다.
또한, .container 클래스에 width: 80%;를 지정하여, 화면 전체의 80%만을 차지하도록 설정하고 있습니다. 이는 모바일 화면에서는 가로로 길게 표시되지만, 데스크탑에서는 세로로 길게 표시됩니다.
@media 블록에서, min-width: 768px라는 미디어 쿼리를 사용하여, 화면의 너비가 768px 이상일 때만 스타일이 적용되도록 설정하고 있습니다. .container 클래스에 width: 50%;를 지정하여, 데스크탑 화면에서는 전체 너비의 50%만을 차지하도록 설정하고 있습니다.
Python 코드 작성
이제 Python 코드를 작성해야 합니다. Flask를 사용하여, 위에서 작성한 HTML 파일을 렌더링하도록 설정하겠습니다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()위 코드에서, render_template 함수를 사용하여, index.html 파일을 렌더링하도록 설정하고 있습니다.
애플리케이션 실행
먼저 render_template()를 사용하여 html을 열기 위해서는 templates 폴더를 생성해 해당 폴더에 index.html 파일을 넣어주어야 합니다.
아래와 같은 구조가 됩니다.
| ▶ templates/ ▶ index.html ▶ hello.py |
그 후 위에서 작성한 python 코드를 실행합니다.
python3 hello.py그리고 웹 브라우저에서 http://127.0.0.1:5000 주소로 접속합니다. 이제 반응형 웹 페이지가 표시됩니다.
'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
|---|---|
| [HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 (0) | 2023.02.27 |
| [HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 (0) | 2023.02.26 |
| [HTML/CSS] CSS 선택자의 종류와 활용 방법 (0) | 2023.02.26 |
| [HTML/CSS] 자주 쓰이는 HTML 태그 (0) | 2023.02.25 |
| [HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 (0) | 2023.02.24 |
| [HTML/CSS] HTML5와 CSS3에서 추가된 기능 (0) | 2023.02.22 |
| [HTML/CSS] HTML과 CSS 기초 문법과 구조 (1) | 2023.02.21 |
댓글