newhaneul

[Advanced Python Programming] Lecture 17. HTML5 기본 요소 본문

4. University Study/Advanced Python Programming

[Advanced Python Programming] Lecture 17. HTML5 기본 요소

뉴하늘 2026. 6. 11. 16:21
728x90

포스팅은 인하대학교 허혜선 교수님의 [202601-EEC3408-001] 고급파이썬프로그래밍을 수강하고 공부한 내용을 정리하기 위한 포스팅입니다.

 

 

1. HTML 문서 기본 구조

<!DOCTYPE html>   <!-- HTML5 선언 -->
<html>
  <head>
    <title>페이지 제목</title>
    <meta charset="utf-8">   <!-- 한글 깨짐 방지 -->
  </head>
  <body>
    <!-- 실제 보여지는 내용 -->
  </body>
</html>
  • <head>는 브라우저한테 전달하는 메타정보(제목, 인코딩 등), <body>는 실제 화면에 보이는 내용

 

2. 태그(Tag) & 요소(Element) & 속성(Attribute) 

<a href="https://www.w3.org">W3C</a>
 ↑태그  ↑속성명  ↑속성값        ↑종료태그

 

  • 요소 = 시작태그 + 내용 + 종료태그 전체
  • 속성 = 태그에 추가 정보를 부여하는 것 (href, src, class, id 등)

 

 

3. 텍스트 관련 태그

태그 기능
<p> 문단 (앞뒤에 빈 줄 생김)
<br> 강제 줄바꿈
<pre> 입력한 그대로 출력 (공백/줄바꿈 유지)
<h1>~<h6> 헤딩 (크기 순서대로 작아짐)
<hr> 수평선
  • HTML 소스에서 엔터 눌러도 브라우저에선 줄바꿈 안 됨. <br> 써야 함.

 

4. 텍스트 서식

태그 결과
<b>, <strong> 굵게
<i>, <em> 기울임
<code> 코드 스타일
<sup> 위첨자 (x²)
<sub> 아래첨자 (H₂O)

 

5. 특수문자

코드 출력
&nbsp; 공백
&lt; <
&gt; >
&amp; &
&quot; "
  • HTML에서 <를 그냥 쓰면 태그로 인식해버려서 이렇게 대체 표현을 써야 함.

 

6. 이미지

<img src="dog.jpg" width="300" height="230" alt="강아지 사진">

 

  • src : 이미지 파일 경로
  • width, height : 크기
  • alt : 이미지 못 불러올 때 대체 텍스트

 

JPEG 사진처럼 복잡한 이미지. 손실 압축
PNG 클립아트, 적은 색상. 무손실 압축
GIF 로고, 애니메이션. 256색 한계

 

7. 리스트

<!-- 번호 없는 리스트 -->
<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

<!-- 번호 있는 리스트 -->
<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

<!-- 정의 리스트 -->
<dl>
  <dt>용어</dt>
  <dd>설명</dd>
</dl>

 

8. 링크 (하이퍼링크)

<!-- 기본 링크 -->
<a href="https://www.google.com">구글</a>

<!-- 새 탭에서 열기 -->
<a href="https://www.google.com" target="_blank">구글</a>

<!-- 페이지 내 특정 위치로 이동 -->
<a href="#section1">이동</a>
<a id="section1">도착지</a>

<!-- 이메일 링크 -->
<a href="mailto:hong@google.com">이메일 보내기</a>
 

경로 표시 방법

범위 예제 설명
절대경로 href="https://www.google.com/" 다른 웹사이트의 페이지
상대경로 htref="../doc/info.html/" 웹사이트 안에서의 다른 페이지
내부파일 href="#anchor1" 현재 페이지 안의 다른 위치 

 

 9. 테이블

<html>
<body>
    <table border="1">
        <caption>표 제목</caption>
        <thead>
            <tr>
                <th>이름</th>
                <th>점수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>98</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

  • 셀 병합: colspan(열 합치기), rowspan(행 합치기)
  • <th> 는 헤더 셀 (굵게 + 가운데 정렬 자동)

 

LAB: 썸네일

파일 1: thumbnail.html
<!DOCTYPE html>
<html>
  <head>
    <title>NASA 이미지들</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><b>Hubble Images</b></h1>
    <a href="photo1.html">
      <img src="thumbnails/PIA12110_hithumb.jpg" alt="">
    </a>
    <img src="thumbnails/PIA03149_hithumb.jpg" alt="">
  </body>
</html>

파일 2: photo1.html
<!DOCTYPE html>
<html>
  <head>
    <title>Deep Field</title>
  </head>
  <body>
    <h1>Hubble Image #1</h1>
    <p>
      <img src="thumbnails/PIA12110_hithumb.jpg" alt="Deep Field">
    </p>
  </body>
</html>

 

LAB: 커피 샵 홈페이지 #3

파일 1: coffee2.html
<!DOCTYPE html>   <!-- HTML5 선언 -->
<html>
  <head>
    <title>Web Programming</title>
    <meta charset="utf-8">   <!-- 한글 깨짐 방지 -->
  </head>
  <body>
    <h1>Welcome to Web Coffee!</h1>   <!-- 제목 -->
    <img src="coffee.gif" alt="커피 이미지">   <!-- 이미지 삽입 -->
    <p> 하우스 로스팅 원두의 신선한 커피를 맛보고 싶다면 
        <i>공인 1급 바리스타</i>가 최고급 원두만을 직접 엄선하여 사용합니다.
    </p>
    <h2>메뉴</h2>   <!-- 소제목 -->
    <p> 메뉴에 대해 자세히 알고싶으시면 
    <a href="menu.html" target="_blank">여기</a>
    를 클릭하세요.
    </p>
  </body>
</html>

파일 2: menu.html
<!DOCTYPE html>   <!-- HTML5 선언 -->
<html>
  <head>
    <title>Web Coffee Menu</title>
    <meta charset="utf-8">   <!-- 한글 깨짐 방지 -->
  </head>
  <body>
    <h1>메뉴</h1>   <!-- 제목 -->
    <ul>
      <li>아메리카노<br>
        <img src="coffee1.gif" alt="커피 이미지">   <!-- 이미지 삽입 -->
        에스프레소에 물을 넣어 연하게 마시는 커피
      </li>
      <li>카페라떼<br>
        <img src="coffee2.gif" alt="커피 이미지">   <!-- 이미지 삽입 -->
        우유와 에스프레소를 혼합한 커피
      </li>
      <li>카푸치노<br>
        <img src="coffee3.gif" alt="커피 이미지">   <!-- 이미지 삽입 -->
        우유, 에스프레소, 그리고 거품으로 만든 커피
      </li>
    </ul>
  </body>
</html>

 

LAB: 테이블을 이용한 이미지 갤러리 만들기

 

<html>
<body>
    <table border="1">
        <caption>고전 영화 리스트</caption>
        <tr>
            <td><img src="movie1.jpg" width="100" height="200"></td>
            <td><img src="movie2.jpg" width="100" height="200"></td>
            <td><img src="movie3.jpg" width="100" height="200"></td>
        </tr>
    </table>
</body>
</html>​

 

LAB: 개인 홈페이지

<!DOCTYPE html>
<html>
  <head>
    <title>My Homepage</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h2>My Homepage</h2>
    <p>
    <img src="programmer.png"width="100"height="100"alt="My Image">
    <strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는 1인입니다.
    </p>
    <h3>현재 학습하고 있는 과목</h3>
    <ul>
      <li>C 언어</li>
      <li>JAVA 언어</li>
      <li>웹프로그래밍 <a href="https://www.w3c.site.com/" target="_blank">W3C 사이트</a></li>
    </ul>
    
    <h3>이번 학기 시간표</h3>
    <table border="1">
      <caption>시간표</caption>
      <thead>
        <tr>
          <th>&nbsp;</th><th>월요일</th><th>화요일</th><th>수요일</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1교시</td><td>C 언어</td><td>JAVA 언어</td><td>JAVA 언어</td>
        </tr>
        <tr>
          <td>2교시</td><td>C 언어</td><td>웹프로그래밍 언어</td><td>웹프로그래밍 언어</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

 

 

 

 

 

728x90

'4. University Study > Advanced Python Programming' 카테고리의 다른 글

[Advanced Python Programming] Lecture 20. Machine Learning  (0) 2026.06.11
[Advanced Python Programming] Lecture 19. Drawing graphs from web data  (1) 2026.06.11
[Advanced Python Programming] Lecture 18. Regular Expression  (0) 2026.06.10
[Advanced Python Programming] Lecture 16. Web Scrapping  (0) 2026.05.27
[Advanced Python Programming] Lecture 15. Web Crawling  (0) 2026.05.27
'4. University Study/Advanced Python Programming' Related Articles more