중급 HTML

JOOYEUN SEO·2024년 9월 28일

100 Days of Python

목록 보기

42/76

🗂️ Day42 프로젝트: 개인 웹사이트2

개인 CV 웹사이트

🔍 유의 사항

🗂️ Day41 프로젝트: 개인 웹사이트 1 의 업그레이드

웹페이지에 연락처 양식과 기본 레이아웃 추가

웹사이트를 실제로 인터넷에 게시해서 링크를 공유할 수 있도록 하기

HTML로만 구현

❖ HTML 표

MDN Table Documentation

table : 테이블 생성
- caption : 표에 제목을 제공하는 태그로, 생략 가능
- thead : 첫 번째 행에 각 열에 대한 제목을 넣을 때 사용(th를 그룹화), 생략 가능
- tbody : 표의 본체 부분(td를 입력하는 부분)으로, 생략 가능
- tfoot : 마지막 행에 각 열에 대한 결과값을 넣을 때 사용(합계 등), 생략 가능
  - tr : 표의 한 행을 생성 (열을 생성하는 태그는 없음)
    - th : 헤더 정보를 저장하는 헤더 셀(굵은체, 가운데 정렬 적용)
    - td : tr로 만든 행의 개별 셀

❗️속성으로 표 배경색, 테두리 등 스타일을 변경하는 것은 비추천
(html로는 구조만 만들고 스타일은 css로 바꾸는 것이 권장되며, 최신 html에서 더 이상 지원하지 않음)

◇ 레이아웃에 HTML 표 사용하기

표를 활용하여 CSS 없이 Layout 짜기
(표의 구조를 이해하는 용도로만 활용, 실제로는 권장하지 않는 방법)

🏗️ index.html

<!DOCTYPE html>
<html lang="en">
<head>
    …
</head>
<body>
    <table cellspacing="20">
        <tr>
            <td><img src="이미지.png" alt="profilepic", width="200", height="200"></td>
            <td>
                <h1>name</h1>
                <p><em>description</em></p>
                <p>brief bio</p>
            </td>
        </tr>
    </table>
    <hr>
    …
    <h3>Work Experience</h3>
    <table>
        <tr>
            <th>Dates</th>
            <th>Work</th>
        </tr>
        <tr>
            <td>20xx-20xx</td>
            <td>explanation</td>
        </tr>
        <tr>
            <td>20xx</td>
            <td>explanation</td>
        </tr>
    </table>
    <h3>Skills</h3>
        <table>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>skill name</td>
                            <td>⭐️⭐️⭐️⭐️</td>
                        </tr>
                        <tr>
                            <td>skill name</td>
                            <td>⭐️⭐️</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td>skill name</td>
                            <td>⭐️⭐️⭐️⭐️⭐️</td>
                        </tr>
                        <tr>
                            <td>skill name</td>
                            <td>⭐️⭐️⭐️</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    <hr>
    …
</body>
</html>

표를 활용하여 프로필 사진 옆에 간략한 정보를 입력하는 구조로 변경
Skills에 중첩된 표 구조로 두 개의 열을 가진 표 생성

❖ HTML 입력 양식

🏗️ contact-me.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Me</title>
</head>
<body>
    <h1>My Contact Details</h1>
    <p>address</p>
    <p>+821012345678</p>
    <p>my_email@gmail.com</p>
    <hr>
    <form action="mailto:seojy2263@gmail.com" method="post" enctype="text/plain">
        <label for="">Your Name:</label>
        <input type="text" name="yourName" value=""><br>
        <label for="">Your Email:</label>
        <input type="email" name="yourEmail"><br>
        <label for="">Your Message:</label><br>
        <textarea name="yourMessage" id="" rows="10" cols="30"></textarea><br>
        <input type="submit">
    </form>
</body>
</html>

JS를 배운 다음에 HTML 양식을 제대로 활용 가능

❖ GitHub에 웹사이트 게시하기

GitHub를 이용해서 HTML/CSS/JS 로 만든 웹사이트 배포 가능

GitHub 가입하기
New → Create a new repository 작성
a. Repository name : 프로젝트 이름
b. Description : 프로젝트 간단 설명(생성된 📄README.md 에 들어감)
c. Public/Private : 공개 범위 설정
d. Initialize this repository with: Add a README file : readme로 저장소를 초기화하는 옵션 체크
Add file → Upload files 로 모든 파일 올리고 변경사항을 커밋하기
a. 업로드 후 이 버전의 이름(커밋 메시지) 짓기
b. Commit directly to the main(기본 설정은 master) branch 에 체크
레포지토리의 Settings → Pages
GitHub Pages의 Branch → None에서 main(기본 설정은 master)으로 변경 → save
레포지토리 메인 페이지 → Deployments → github-pages
해당 주소로 어디서든 접속 가능 (https://<사용자 이름>.github.io/<레포지토리 이름>/)

▷ Angela Yu, [Python 부트캠프 : 100개의 프로젝트로 Python 개발 완전 정복], Udemy, https://www.udemy.com/course/best-100-days-python/?couponCode=ST3MT72524

JOOYEUN SEO

이전 포스트

HTML 소개

다음 포스트