[python] 웹 페이지 레이아웃 변경 테스트하기

21 Nov 2023

python

이번 포스트에서는 Python을 통해 웹 페이지의 레이아웃을 변경하는 방법을 소개하겠습니다.

1. HTML 파일 생성하기

먼저, 웹 페이지를 만들기 위해 HTML 파일을 생성해야 합니다. 테스트용으로 간단한 HTML 파일을 만들겠습니다. 다음과 같이 index.html 파일을 생성해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 레이아웃 변경 테스트</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>웹 페이지 레이아웃 변경 테스트</h1>
    </header>
    
    <main>
        <p>여기에 웹 페이지의 메인 컨텐츠를 작성하세요.</p>
    </main>
    
    <footer>
        <p>© 2022 Your Website</p>
    </footer>
</body>
</html>

위 HTML 파일은 header, main, footer 등 기본적인 레이아웃 요소들을 포함하고 있습니다. 메인 컨텐츠를 작성하는 부분은 테스트용으로 단순한 <p> 태그를 사용하였습니다.

2. CSS 파일 생성하기

다음으로, 레이아웃을 변경하기 위해 CSS 파일을 생성해보겠습니다. style.css라는 이름으로 CSS 파일을 생성하고 다음과 같이 내용을 작성해주세요.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

main {
    margin: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

위 CSS 파일은 전체 body 요소에 대한 기본 스타일을 지정하고, header, main, footer 요소들의 스타일을 변경합니다. 배경색, 텍스트 색상, 패딩 등을 설정하여 웹 페이지의 레이아웃을 변경할 수 있습니다.

3. Python 웹 서버 실행하기

HTML 파일과 CSS 파일을 생성했으면, 이제 Python을 사용하여 웹 서버를 실행하고 웹 페이지를 로컬에서 확인해봅시다. 아래 코드를 실행해주세요.

import http.server
import socketserver

PORT = 8000

Handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print("웹 서버가 시작되었습니다. http://localhost:{}/ 에서 확인할 수 있습니다.".format(PORT))
    httpd.serve_forever()

위 코드는 Python의 http.server 모듈을 사용하여 간단한 웹 서버를 실행하는 코드입니다. PORT 변수에는 웹 서버가 실행될 포트 번호를 지정해줄 수 있습니다.

웹 페이지 확인하기

Python 코드를 실행한 후, 웹 브라우저를 열고 http://localhost:8000 주소에 접속해보세요. 생성한 HTML 파일이 웹 페이지로 표시되고, CSS 파일을 통해 변경한 레이아웃이 적용된 것을 확인할 수 있습니다.

이제 생성한 HTML 파일을 편집하면서 CSS 스타일을 변경하여 원하는 레이아웃을 구성해보세요. 웹 페이지 새로고침을 통해 변경 사항을 확인할 수 있습니다.

이번 포스트에서는 Python을 사용하여 웹 페이지의 레이아웃을 변경하는 방법을 알아봤습니다. HTML 파일과 CSS 파일을 생성하고, 간단한 웹 서버를 실행하여 변경된 레이아웃을 확인할 수 있습니다. 이를 통해 웹 개발자들은 더욱 유연하고 다양한 레이아웃을 구성할 수 있게 되었습니다.

참고: w3schools.com