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:
- 🐞
- 🐍
- 👍
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라는 새 파일을 만드십시오.
My favorite emoji
I don’t just like emoji,
I love emoji!
Here’s a list of my most-used emoji:
- 🐞
- 🐍
- 👍
다음으로 프로젝트 디렉토리 내에 images 라는 새 폴더를 만들고 gallery.html 라는 파일을 추가합니다.
Image gallery
보다 편리하게 액세스하려면 index.html:의 탐색 메뉴에 갤러리 링크를 추가할 수도 있습니다.
또한 emoji.html:에서 갤러리에 연결할 수 있습니다.
상대 링크는 웹사이트의 페이지를 연결하는 데 유용합니다. 외부 링크를 추가하려면 절대 링크를 사용하세요.
Links
My favorite websites are:
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)
'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 |