HTML 소개

JOOYEUN SEO·2024년 9월 23일

100 Days of Python

목록 보기

41/76

🗂️ Day41 프로젝트: 개인 웹사이트 1

개인 CV 웹사이트

🔍 유의 사항

HTML만 이용하여 개인 이력을 올리는 웹사이트 구축하기

Wayback Machine

웹사이트의 url을 검색하면 시기별로 변화하는 웹사이트의 모습을 보여주는 사이트

여기서 볼 수 있는 초기 버전의 웹사이트와 비슷한 유형으로 구현됨

❖ 기초 개념

◇ 인터넷의 작동 원리

👩‍💻 client : 사용자가 인터넷에 접속하기 위한 컴퓨터
🖥️ server : 24시간 온라인 상태로 대기하며 언제든 요청을 받을 준비가 된 컴퓨터
🌐 Internet Service Provider : KT 등과 같은 인터넷 서비스 제공자
🗃️ DNS(Domain Name Service) Server : 전화번호부처럼 IP주소 정보를 갖고 있음

👩‍💻가 브라우저에 예)www.google.com 를 입력하면 🌐으로 메시지 전달
🌐에서 🗃️에 메시지 전달
🗃️에서 구글 🖥️의 IP 주소를 검색하여 👩‍💻에게 알려줌(216.58.200.14)
👩‍💻가 이번에는 구글 🖥️에 직접 요청하기 위해 🌐에게 메시지를 보냄
🌐는 Internet Backbone을 통해 메시지를 구글 🖥️로 보냄
(해저 케이블 지도를 통해 인터넷 연결망 확인 가능)
🖥️는 구글 홈페이지를 보기 위해 필요한 모든 파일을 Internet Backbone을 통해 🌐로 전달
🌐는 파일을 👩‍💻에게 전달
👩‍💻는 브라우저에서 구글 홈페이지에 접속 가능

◇ 웹사이트의 작동 원리

🧭 browser

웹페이지에 접속하기 위해 필요한 소프트웨어
웹사이트의 IP 주소를 찾은 후 데이터를 받아서 웹페이지를 볼 수 있게 하는 역할
데이터는 3 종류의 code files로 구성됨
- 🏗️HTML
  - 웹사이트의 구조를 설정
  - 이미지, 버튼, 텍스트 박스 등을 추가할 수 있음
- 🎨CSS
  - 웹사이트의 스타일링(모습)을 지정
  - 예) HTML에서 만든 버튼의 색상이나 글꼴 등을 설정
- 🔌JS
  + 웹사이트가 실제로 작업이나 행동을 하게 만듦
  + 예) 버튼을 누르면 실제로 동작

크롬 브라우저에서 오른쪽 클릭 → 검사 → 자동으로 해당 웹사이트를 렌더링하는 데 사용된 코드 파일 오픈

하이라이트 된 부분에서 텍스트 부분을 찾아 값을 변경하면 실제로 바뀐 모습

페이지를 새로고침하면 고친 값은 다시 원래대로 돌아감
(서버에서 받아온 파일의 로컬 복사본을 바꾼 것이라서 새로 요청하면 다시 원본 콘텐츠가 업데이트 됨)

❖ 필요 소프트웨어

Visual Studio 코드
- 익스텐션
  - Live Preview
  - Prettier
  - vscode-icons
구글 크롬 브라우저

❖ HTML 태그

💡 참고할 사이트

codepen.io

온라인에서 라이브로 HTML, CSS, JS를 편집하고 결과를 확인 가능

무료 가입

create new pen

HTML elements reference

devdocs.io

HTML(HyperText Markup Language)

markup
- HTML 태그를 사용하여 웹사이트의 레이아웃과 구조를 지정하는 것
- 편집자가 원고 형태를 잡고 변경사항을 저자에게 표시하는 것과 같은 역할
- HTML 외에도 XML, GML 등의 마크업 언어 존재
태그의 종류
- content 사이에 start tag와 end tag가 필요한 태그
  (구조에 영향을 미치는 태그)
- 종료 태그 없이 self-closiong tag로 자체 종료하는 태그
태그의 구조
< + HTML element + + HTML attribute="value" + >
- 요소와 속성 사이, 각 속성의 사이는 공백으로 띄움
- 안내서 참조하여 어떤 속성들이 있는지 파악하기
HTML 파일에서 주석 달기

- 주석 부분은 프로그램에서 무시됨
- 여러 줄에 걸쳐서 작성 가능

❖ HTML 보일러플레이트

HTML 파일 작성 기본

VScode 접속
index.html로 파일 생성
(보통 개발자들이 첫 페이지에 붙이는 이름)
보일러플레이트 코드 작성
a. 어떤 HTML 웹사이트를 만들더라도 항상 들어가는 상용구 템플릿
b. 증기 보일러의 제작자 이름을 넣은 작은 금속판에서 유래
c. 자동으로 입력하는 방법
- 방법1 : ! 입력 후 자동완성 창이 뜨면 엔터 키
- 방법2 : html:5 입력 후 엔터 키

<!DOCTYPE html>   <!--문서 유형 선언(해당 파일이 사용하는 HTML 버전을 브라우저에 알려줌)-->
<html lang="en">  <!--브라우저에 코드 시작을 알림-->
<head>                <!--코드의 헤드 시작-->
    <meta charset="UTF-8">    <!--부수적인 메타 데이터나 관련 데이터를 제공-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   <!--브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목-->
</head>               <!--코드의 헤드 종료-->
<body>                <!--코드의 바디 시작-->
    
</body>               <!--코드의 바디 종료-->
</html>           <!--브라우저에 코드 종료를 알림-->

HTML 파일을 브라우저에서 여는 방법
a. 방법1: 파인더(탐색기)에서 index.html를 찾아서 더블 클릭
b. 방법2: VScode에서 index.html 우클릭 → Open In Default(Other) Browser(s)
head의 meta 태그
a. 웹페이지를 렌더링하거나 표시하는 방법을 브라우저에 알림
b. 브라우저의 검색 인덱스에 나오는 웹사이트 설명 작성 가능
c. charset(문자 집합)을 제대로 설정해야 문자가 깨지는 현상(mojibake)을 방지
- 텍스트 인코딩은 각 언어에 따라 특화된 유형이 존재함
- UTF-8은 html5로 작업할 때 사용하는 표준 인코딩
  (이모지를 포함한 유니코드 문자를 사용 가능)

❖ HTML에서 텍스트를 구조화하기

<!DOCTYPE html>
<html lang="en">
<head>
    …
</head>
<body>
    <h1>name</h1>
    <p><em>description</em></p>
    <p>brief bio</p>
    <hr>
    <h3>Education</h3>
</body>
</html>

❖ HTML 목록

<!DOCTYPE html>
<html lang="en">
<head>
    …
</head>
<body>
    …
    <hr>
    <h3>Education</h3>
    <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
    </ul>
    <h3>My Hobbies</h3>
    <ol>
        <li>hobby 1</li>
        <li>hobby 2</li>
        <li>hobby 3</li>
    </ol>
</body>
</html>

❖ HTML 이미지 요소

img 태그의 파라미터

scr : 이미지의 소스
- 방법1: 웹사이트에서 이미지 주소 가져오기
  - 원하는 이미지 오른쪽 클릭 → 이미지 주소 복사하기
  - 이미지가 호스팅 된 서버에 핑을 수행
    - 이미지를 다운로드할 수 있는 권한이 있다면 이미지를 표시
    - 서버에 문제가 생기면 이미지를 다운할 수 없음
  - Photobucket에 가입하고 원하는 사진을 업로드하여 이미지 주소를 얻을 수 있음
- 방법2: 프로젝트 디렉토리에 이미지 파일을 직접 넣고 내부 소스로 참조
  - index.html과 같은 폴더 안에 넣으면 사진 파일 이름만으로 참조 가능
  - 서버에 의존하지 않아도 됨
  - 이미지를 원하는 모양대로 자르기
    (이미지를 원형으로 자르는 사이트 링크)
alt : 브라우저가 이미지를 렌더링할 수 없을 경우 뜨는 대체 텍스트
width, height : 픽셀 단위로 가로, 세로 크기 지정 가능

<!DOCTYPE html>
<html lang="en">
<head>
    …
</head>
<body>
    <img src="businesswoman.png" alt="profile picture", width="200", height="200">
    <h1>name</h1>
    …
</body>
</html>

❖ HTML 링크 및 앵커 태그

HTML(HyperText Markup Language)

hypertext
- 함께 링크할 수 있는 텍스트 문서의 묶음
- 하이퍼링크를 클릭하면 다른 텍스트 문서로 이동
- wiki game : 링크 클릭만으로 시작 위키피디아 페이지에서 목표 페이지까지 도달하는 게임
앵커(Anchor) 태그
- href : 하이퍼링크가 가리키는 URL 또는 대상
- 링크 텍스트에 밑줄이 그어지고 파란색으로 강조됨
- 한 번 클릭하면 보라색으로 변경

🏗️ index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name's Personal Site</title>
</head>
<body>
    <img src="businesswoman.png" alt="profile picture", width="200", height="200">
    <h1>name</h1>
    <p><em>description</em></p>
    <p>brief bio</p>
    <hr>
    <h3>Education</h3>
    <ul>
        <li>first item</li>
        <li>second item</li>
        <li><a href="https://www.udemy.com/course/best-100-days-python/?couponCode=ST22MT92324A">udemy python boot camp</a></li>
    </ul>
    <a href="hobbies.html">My hobbies</a>
    <br>
    <a href="contact-me.html">Contact Me</a>
</body>
</html>

🏗️ hobby.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My hobbies</title>
</head>
<body>
    <h3>My Hobbies</h3>
    <ol>
        <li>hobby 1</li>
        <li>hobby 2</li>
        <li>hobby 3</li>
    </ol>
</body>
</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>My hobbies</title>
</head>
<body>
    <h3>My Hobbies</h3>
    <ol>
        <li>hobby 1</li>
        <li>hobby 2</li>
        <li>hobby 3</li>
    </ol>
</body>
</html>