Python 개발자를 위한 HTML 및 CSS

2023. 12. 14. 22:50ㆍpython/basic

  • 기본 HTML 파일 구조화
  • HTML을 브라우저에서 보고 검사
  • 삽입이미지 및 페이지 링크
  • 웹사이트 스타일CSS
  • HTML 형식접근성을 고려
  • Python을 사용하여 HTML 코드 작성 및 구문 분석

첫 번째 HTML 파일 만들기

HTML 문서

index.html

<!– index.html –>

Am I HTML already?

index.html를 업데이트하고 아래 코드를 추가하여 유효한 최소 HTML 문서를 생성하세요.

<!DOCTYPE html>
index.html을 열고 아래

:를 추가하세요.

<!DOCTYPE html> Yes,
I am! 6행의

과 같은 다른 요소에는 일치하는 닫는 태그가 없으므로 콘텐츠가 포함되어 있지 않습니다. 이러한 빈 요소를 소위 공허 요소라고 합니다. 그들은 독립적으로 존재하며 속성을 포함하지 않을 수도 있습니다. 그러한 예 중 하나는 10행의
로, 줄 바꿈을 생성합니다.

공백 및 텍스트 서식

<!DOCTYPE html>

Hello, World Wide Web! This is my first website.

About me

I’m a Python programmer and a bug collector.

Random facts

I don’t just like emoji, I love emoji!

My most-used emoji are: 1. 🐞 2. 🐍 3. 👍

Links

My favorite websites are: * realpython.com * python.org * pypi.org

내부에서 콘텐츠를 여러 줄로 배포했지만 브라우저에는 모든 내용이 하나의 연속된 줄로 표시됩니다.

<!DOCTYPE html>

Hello, World Wide Web!

This is my first website.

About me 

I’m a Python programmer and a bug collector.

Random facts 

I don’t just like emoji,
I love emoji!

My most-used emoji are:

  1. 🐞
  2. 🐍
  3. 👍

Links 

My favorite websites are:

  • realpython.com
  • python.org
  • pypi.org

최신 HTML에 대해 자세히 알아보고 싶다면 HTML5 Doctor가 훌륭한 리소스입니다. 접근성에 대해 자세히 알아보려면 모든 사람이 웹에 액세스할 수 있도록하는 Google 과정을 확인하세요.

 

링크, 이미지, 표

<!DOCTYPE html>Emoji요소를 사용하여 탐색 기능을 제공하는 섹션을 선언합니다.

내부에 앵커(anchor)의 약어인 태그가 있는 링크를 추가합니다. href 속성은 링크의 대상을 포함하는 Hypertext Reference를 나타냅니다.

상대 링크를 사용하면 디렉토리 트리의 화일을 참조할 수 있다.

지금까지는 emoji.html 존재하지 않습니다. 이 문제를 해결하려면 : index.html 옆에 emoji.html라는 새 파일을 만드십시오.

<!DOCTYPE html>

 

My favorite emoji

I don’t just like emoji,
I love emoji!

Here’s a list of my most-used emoji:

  1. 🐞
  2. 🐍
  3. 👍

다음으로 프로젝트 디렉토리 내에 images 라는 새 폴더를 만들고 gallery.html 라는 파일을 추가합니다.

<!DOCTYPE html>Home Emoji

Image gallery

보다 편리하게 액세스하려면 index.html:의 탐색 메뉴에 갤러리 링크를 추가할 수도 있습니다.

<!DOCTYPE html>Emoji Gallery

또한 emoji.html:에서 갤러리에 연결할 수 있습니다.

<!DOCTYPE html>Home Gallery

상대 링크는 웹사이트의 페이지를 연결하는 데 유용합니다. 외부 링크를 추가하려면 절대 링크를 사용하세요.

Links 

My favorite websites are:

<!DOCTYPE html>Home Emoji

 

CSS로 콘텐츠 스타일 지정

CSS는 캐스케이딩 스타일 시트를 나타냅니다

웹사이트에 색상 추가

<!DOCTYPE html>

<style> 요소를 사용하면 HTML 문서에 CSS 코드를 추가할 수 있습니다. 브라우저에서는 이에 대해 엄격하지 않지만 <style> 요소를 <head> 내부에만 배치해야 합니다. 그렇지 않으면 브라우저가 CSS 규칙을 적용하기 전에 요소를 렌더링하려고 시도할 수 있으며, 이로 인해 스타일이 지정되지 않은 콘텐츠가 플래시될 수 있습니다.
<style>의 내용은 HTML 코드가 아니고 CSS입니다. CSS를 사용하면 페이지 요소의 스타일을 지정하는 방법에 대한 규칙을 정의할 수 있습니다.

선언 블록은 여는 중괄호({)와 닫는 중괄호(})로 구분됩니다. 블록 내부의 선언은 세미콜론(;)으로 구분합니다. 선언 자체는 두 부분으로 구성됩니다.

  • 속성: 기능을 정의하는 식별자
  • 값: 기능을 처리하는 방법에 대한 설명

속성과 값은 콜론(:)으로 구분됩니다.

글꼴 변경

우려사항을 분리하세요

/* style.css */

body { background-color: rgb(20, 40, 60); color: rgb(240, 248, 255); font-family: “Helvetica”, “Arial”, sans-serif; font-size: 1.3em; }

a { color: rgb(255, 111, 111); }

CSS 파일에는 CSS 선언만 포함되어 있습니다. CSS 파일에서는 CSS 코드를 로 묶는 데 사용한 -->

다음에 stylesheet 링크를 emoji.html 추가하세요.

gallery.html의 변경 사항을 반영하려면 style.css에 상대 링크를 추가하세요.

<!DOCTYPE html>

가장 인기 있는 CSS 프레임워크 중 하나는 부트스트랩입니다. Real을 포함하여 Simple.css 또는 Bulma도 만나게 됩니다.

<!DOCTYPE html>

 

유연성을 높이기 위해 클래스 사용

HTML 요소에 class 속성을 ​​추가하면 CSS 클래스 선택기를 사용하여 요소의 스타일을 지정할 수 있습니다.

Image Gallery

<img src="sky_1.png" alt="Cloudy sky." class="rounded">
<img src="sky_2.png" alt="Sun shining through a cloudy sky." class="rounded">
<img src="sky_3.png" alt="Sky with almost no clouds." class="rounded">

클래스를 생성하려면 style.css로 이동하여 다음 CSS 코드를 추가하세요.

/* style.css */

/* … */

.gallery { background: rgba(255, 255, 255, 0.2); padding: 1em; }

.rounded { border-radius: 15px; }

.gallery img { margin-right: 0.2em; width: 150px; }

Python으로 HTML 처리

프로그래밍 방식으로 HTML 작성

My favorite emoji

I don’t just like emoji,
I love emoji!

Here’s a table of my most-used emoji:

#EmojiName

1. 🐞 Lady Beetle
2. 🐍 Snake
3. 👍 Thumbs Up Sign 
# emoji_table.py

import unicodedata

all_emoji = "🐞🐍👍🎉🤩😂🐶🍿😎✨💬😘"
columns = ["#", "Emoji", "Name"]

table_head = f"<thead>\n<tr><th>{'</th><th>'.join(columns)}</th></tr>\n</thead>"

table_body = "\n<tbody>\n"
for i, emoji in enumerate(all_emoji, start=1):
    emoji_data = [f"{i}.", emoji, unicodedata.name(emoji).title()]
    table_body += f"<tr><td>{'</td><td>'.join(emoji_data)}</td></tr>\n"
table_body += "</tbody>\n"

print(f"<table>\n{table_head}{table_body}</table>")

내장된 unicodedata 모듈과 enumerate()의 도움으로 Python은 프로그래밍 방식으로 이모티콘 테이블을 구축할 수 있습니다.

터미널에서 emoji_table.py하고 emoji.html 코드를 복사하여 실행

My favorite emoji

I don’t just like emoji,
I love emoji!

Here’s a table of my most-used emoji:

#EmojiName

1. 🐞 Lady Beetle
2. 🐍 Snake
3. 👍 Thumbs Up Sign
4. 🎉 Party Popper
5. 🤩 Grinning Face With Star Eyes
6. 😂 Face With Tears Of Joy
7. 🐶 Dog Face
8. 🍿 Popcorn
9. 😎 Smiling Face With Sunglasses
10. ✨ Sparkles
11. 💬 Speech Balloon
12. 😘 Face Throwing A Kiss

테이블을 좀 더 보기 좋게 만들고 싶다면 :nth-child() 의사 클래스를 사용하여 추가 스타일을 추가할 수 있습니다.

/* style.css */

/* … */

th, tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.2); }

td:nth-child(1) { text-align: right; }

td:nth-child(2) { text-align: center; }

Python으로 HTML 엔터티 만들기

import html

html.entities.html5

Python으로 HTML 구문 분석

# images/parse_image_links.py

from html.parser import HTMLParser

class ImageParser(HTMLParser):
    def handle_starttag(self, tag, attrs):
        for attr, val in attrs:
            if attr == "src" and tag == "img":
                print(f"Found Image: {val!r}")

with open("gallery.html", mode="r", encoding="utf-8") as html_file:
    html_content = html_file.read()

parser = ImageParser()
parser.feed(html_content)

출처 : https://realpython.com/html-css-python/

'python > basic' 카테고리의 다른 글

Python에서 절대값을 찾는 방법  (0) 2023.12.17
Python 문자열에 하위 문자열이 포함되어 있는지 확인하는 방법  (1) 2023.12.17
Python에서 문자열을 바꾸는 방법  (0) 2023.12.13
Python 표준 REPL 코드와 아이디어를 빠르게 시험해 보세요  (0) 2023.12.12
Python과 PySimpleGUI를 사용하여 행맨 게임 구축  (1) 2023.12.11

관련글

티스토리툴바