[DEV] 3주차. 파이썬으로 웹 다루기(1)

1. HTML

Hypertext Markup Language
웹 브라우저가 이해할 수 있는 언어

2. HTML 기본 문법

속성과 값

<div title="제목">Content</div>

title : 속성
“제목” : 값

<a href="https://naver.com">네이버 바로가기</a>

href : 속성
“https://naver.com” : 값
네이버 바로가기 : 콘텐츠

HTML 기본 문서

<!DOCTYPE html>     <!-- 문서 버전 -->
<html lang="KO">    <!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
    <head>      <!-- 문서에 필요한 정보가 기입되는 곳 -->
        <title>문서 제목</title>
    </head>

    <body>       <!-- 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳 -->
        안녕하세요!
    </body>
</html>

부모요소 자식요소

html
|- head
| ㄴ title
ㄴ body

올바른 코드의 depth 를 지키는 것이 아주 중요함!

주석

개발자가 코드 내에 입력한 메모 
주석 안에 주석은 안됨!
소스 보기나 개발자 도구로 보면 코드가 보이니 중요한 정보는 작성하면 안됨!

3. HEAD

head 태그

사람의 눈에는 보이지 않지만 문서의 정보가 담기는 영역
ex

<head>
    <title>문서 제목</title>
</head>

head 태그가 가질 수 있는 정보의 종류

타이틀
메타 데이터
- 인코딩 정보
  - charset은 문서에서 허용하는 문자의 집합
  - charset에 선언된 문자의 집합 규칙에 따라 문서에서 사용할 수 있는 문자가 제한됨
- 문서 설명
- 문서 작성자

<head>
    <title>문서 제목</title>

    <meta charset="utf-8">
    <meta name="description" content="이 문서는 실습 문서입니다.">
    <meta name="author" content="bokyung">
</head>

CSS, Script

style, link, script 태그

문서 내용의 외형에 영향을 주는 태그들

style 태그

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

link 태그

<link rel="stylesheet" href="style.css">

rel: 지금 링크된 파일
href : 링크할 파일 (stylesheet)의 경로

script 태그

콘텐츠 방식

<script>
    const hello = "world";
    console.log(hello)
</script>

링크 방식
- 컨텐츠를 가지지 않지만, 반드시 종료태그 </script> 를 작성해야 함

<script src="script.js"></script>

4. BODY

body 태그

사람의 눈에 실제로 보이는 컨텐츠 영역

block 레벨 요소

레고 블록처럼 차곡차곡 쌓이고, 화면 너비가 꽉 차는 요소
- 블록의 크기와 내/외부에 여백을 지정할 수 있고, 일반적으로 페이지의 구조적 요소를 나타냄
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없음
대표적인 블록 레벨 요소
- <div>, <article>, <section>, …

예시

<!DOCTYPE html>
<html lang="KO">
    <head>
        <title>문서 제목</title>
        
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div>블록1</div>
        <div>블록2</div>
        <div>블록3</div>
    </body>
</html>

스크린샷 2023-10-24 오후 3 43 33

inline 레벨 요소

블록 요소 내에 포함되는 요소
- 주로 문장, 단어같은 작은 부분에 사용되며, 한 줄에 나열됨
- 크기는 줄 수 없고, 좌/우에 여백을 넣는 것만 허용됨
대표적인 인라인 레벨 요소
- <span>, <a>, <strong>

예시

<!DOCTYPE html>
<html lang="KO">
    <head>
        <title>문서 제목</title>
        
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <span>인라인</span> 인라인 옆 글자
    </body>
</html>

body {
    color: blue;
}

span {
    padding-left: 10px;
    padding-top: 100px;   /* 적용되지 않음 */
}

스크린샷 2023-10-24 오후 3 45 49

inline-block 레벨 요소

글자처럼 취급되나, block 태그의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백 지정할 수 있음
- CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소임

5. 레이아웃

div 태그

가장 흔히 사용되는 레이아웃 태그로, 단순히 구역을 나누기 위한 태그

블로그 글, 제목, 작성일 등의 주요 정보를 담는 태그

페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그

main 태그

페이지의 가장 큰 부분으로 사이트의 내용, 즉 주요 컨텐츠를 담는 태그
한 페이지에 한 번만 나와야 함!
- header, footer는 여러 번 가능

section 태그

컨텐츠의 구역을 나누는 태그

article 태그

section의 구역 안에서 작성된, 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그

aside 태그

문서의 주요 내용에 간접적인 정보를 전달하는 태그
- 쇼핑몰 오른쪽에 따라다니는 “오늘 본 상품” 과 같은 것으로 사용할 수 있음

레이아웃 태그를 알아야 하는 이유

HTML5부터 태그를 의미있게 사용하기 위해 Semantic(시맨틱) 태그를 사용하여 문서 구조를 작성
단순히 의미 구분자인 <div>를 남발하지 않고, 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미있게 전달
시맨틱하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임

6. 컨텐츠

<h1> ~ <h6>
문서 구획 제목을 나타내는 태그로, heading (헤딩) 태그라고 부름
- h1부터 h6까지 사용 가능
- h1 태그는 페이지 내에 한번만 사용되어야 하고, 구획의 순서는 지켜져야 함
  - ex) <h3> 태그 다음에 <h5> 태그가 나올 수 없음

2) 문단 태그 (p)

<p>
문서에서 하나의 문단 (paragraph) 을 나타내는 태그
- 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 함
- 레이아웃처럼 사용하면 안됨!

3) 서식 태그 (b/strong, i/em, u, s/del)

<b>, <strong>
글씨의 두께 조절
- <b> 태그는 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해줌
- <strong> 태그는 굵은 글씨로 변경 후 강조의 의미 부여
- 시각적으로 굵은 효과는 같지만, 의미가 다르므로 사용에 주의!

<i>, <em>
글씨의 기울기 조절
- <i> 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용
  - ex) 등장인물 이름, 외국어 구절, 기술 용어 등
- <em> 태그는 기울임과 동시에 내용의 강조를 나타냄
- 시각적으로 기울림은 같지만, 의미가 다르므로 사용에 주의!

<u>
글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타냄
- CSS로 스타일링하여 빨간 밑줄을 넣는 것으로 “오타”를 나타내는 것처럼 사용할 수 있음
- 단순하게 “밑줄”만 긋는 용도로는 사용하면 안됨

<s>, <del>
글씨에 취소선 추가
- <s> 태그는 단순히 시각적인 취소선만 추기되고, 접근성 기기에 취소에 대한 안내는 하지 않음
- <del> 태그는 문서에서 제거된 텍스트를 나타낼 수 있음
  - <ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를표현할 수 있음

<del>캐ㅍ</del><ins>캐스퍼</ins>입니다.

4) 링크 이동

<a>
클릭하면 페이지를 이동할 수 있는 링크 요소 생성
- href 속성을 사용해서 이동하고자 하는 파일 혹은 URL 작성
- target 속성을 사용해서 이동해야 할 링크를 새창(_blank), 현재창(_self) 등 원하는 타겟 지정 가능

<a href="https://programmers.co.kr" target="_blank">프로그래머스로 바로가기 (새 창)</a>

멀티미디어

1) 이미지 태그

<img>
문서 내에 이미지를 넣을 수 있는 태그
- 가장 기본적인 이미지 넣는 방법
- src 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
- alt 속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있음 (필수 작성!)

<img src="/logo.png" alt="프로그래머스 로고">`

<figure>, <figcaption>
하나의 독립적인 컨텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
- <figcation> 태그를 사용해 컨텐츠의 설명 혹은 범례를 추가할 수 있고, 제일 처음이나 제일 아래에 추가해서 사용할 수 있음
- 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있음

<figure>
    <img src="/hotdog.png" alt="핫도그">
    <figcaption>맛있는 핫도그 이미지</figcaption>
</figure>

2) 비디오 태그

<video>
문서 내에 영상을 첨부할 수 있는 태그
- src 속성을 사용하여 비디오를 문서 내에 첨부할 수 있음
- poster 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있음
- <source> 태그를 사용하면 여러 타입의 비디오를 제공할 수 있음

<video src="/video.mp4" poster="/poster.png">
    비디오 태그가 실행되지 않을 때 보이는 글자
</video>

<video poster="/poster.png">
    <source src="/video.mp4" type="video/mp4">
    <source src="/video.webm" type="video/webm">
    비디오 태그가 실행되지 않을 때 보이는 글자
</video>

3) 오디오 태그

<audio>
문서 내에 소리를 첨부할 수 있는 태그
- src 속성을 사용하여 소리를 문서 내에 첨부할 수 있음
- <source> 태그를 사용하면 여러 타입의 오디오를 제공할 수 있음
- controls 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있음

<audio src="/audio.mp3" controls>
    오디오 태그가 실행되지 않을 때 보이는 글자
</audio>

<audio controls>
    <source src="/audio.mp3" type="audio/mp3">
    <source src="/audio.ogg" type="audio/ogg">
    오디오 태그가 실행되지 않을 때 보이는 글자
</audio>

4) svg 태그

<svg>
Scalable Vector Graphics
그래픽으로 만들어진 이미지
- 일반 이미지(래터스 이미지)와 다르게 수학 공식을 사용하여 그려짐
  - 해상도의 영향을 받지 않아 확대/축소가 자유로움
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용됨
- 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용되고 있음
- <img> 태그처럼 svg 파일을 불러올 수도 있고, 태그를 그대로 사용할 수도 있음 (다른 방법들도 있음)
- 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있음

리스트

1) 정렬되지 않은 목록

<ul>, <li>
정렬되지 않은 목록 태그
- 기본 불릿(bullet) 형식으로 목록을 그림
- <li> 태그를 사용하여 목록을 구성할 수 있고, 다양한 태그를 포함할 수 있음
- <ul> 태그의 자식 요소로는 <li> 태그만 들어와야 함
  - 하위 리스트를 만드려면 <li> 태그 안에 <ul>, <ol> 태그를 사용하면 됨

<ul>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>
        리스트3

        <ul>
            <li>하위 리스트1</li>
            <li>하위 리스트2</li>
        </ul>
    </li>
</ul>

2) 정렬된 목록

<ol>, <li>
정렬된 목록 태그
- 기본 숫자(1, 2, 3, …) 형식으로 목록을 그림
- <li> 태그를 사용하여 목록을 구성할 수 있고, 다양한 태그를 포함할 수 있음
- <ol> 태그의 자식 요소로는 <li> 태그만 들어와야 함
  - 하위 리스트를 만드려면 <li> 태그 안에 <ol>, <ul> 태그를 사용하면 됨

<ol>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>
        리스트3

        <ul>
            <li>하위 리스트1</li>
            <li>하위 리스트2</li>
        </ul>
    </li>
</ol>

3) 설명 목록

<dl>, <dt>, <dd>
설명 목록 태그
- <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에 작성할 수 있음
- 주로 용어 사전이나 “키-값”이 있는 쌍의 목록을 나타낼 때 사용
- <dt> 태그를 여러 개 작성하고 하나의 <dd> 태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있음
- 위와 반대로, <dt> 태그 하나에 여러 개의 <dd> 태그를 가질 수 있음

<dl>
    <dt>Chrome</dt>
    <dd>구글에서 만든 웹브라우저</dd>

    <dt>프로그래머스</dt>
    <dd>개발자를 위한 교육, 평가, 채용 서비스를 통해 개발자 성장의 나침반이 되어 확실한 길을 제시합니다</dd>
</dl>

표

1) 표 태그

<table>
- <tr> 태그로 행을 구분할 수 있음 (row)
- <td> 태그로 열을 구분할 수 있음 (cell)

<table>
    <tr>
        <td>행1 열1</td>
        <td>행1 열2</td>
    </tr>

    <tr>
        <td>행2 열1</td>
        <td>행2 열2</td>
    </tr>
</table>

2) 열 제목 태그

<th>
- 셀의 제목을 만들 수 있음 (기본 볼드체)

<table>
    <tr>
        <th>행1 열1</th>
        <th>행1 열2</th>
    </tr>

    <tr>
        <th>행2 열1</th>
        <th>행2 열2</th>
    </tr>
</table>

3) 제목 그룹 태그

<thead>
- <thead> 태그 안에 열(cell) 제목의 행을 넣음으로써 그룹 지을 수 있음

<table>
    <thead>
        <tr>
            <th>열1 제목</th>
            <th>열2 제목</th>
        </tr>
    </thead>

    <tr>
        <td>행2 열1</td>
        <td>행2 열2</td>
    </tr>
</table>

4) 표 본문 요소 태그

<tbody>
- <tbody> 태그 안에 여러 열(cell)의 행을 넣음으로써 본문 요소를 그룹 지을 수 있음

<table>
    <thead>
        <tr>
            <th>열1 제목</th>
            <th>열2 제목</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>행1 열1</td>
            <td>행1 열2</td>
        </tr>

        <tr>
            <td>행2 열1</td>
            <td>행2 열2</td>
        </tr>
    </tbody>
</table>

5) 표 바닥글 요소 태그

<tfoot>
- <tfoot> 태그 안에 여러 열(cell)의 행을 넣음으로써 표의 바닥글 요소를 넣을 수 있음
- HTML4 버전이라면 <tfoot>는 <tbody> 보다 먼저 작성되어야 함
- HTML5 버전이라면 <thead>, <tbody>, <tfoot> 순으로 배치되어도 됨

<table>
    <thead>
        <tr>
            <th>열1 제목</th>
            <th>열2 제목</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>행1 열1</td>
            <td>행1 열2</td>
        </tr>

        <tr>
            <td>행2 열1</td>
            <td>행2 열2</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>테이블 푸터</td>
            <td>테이블 푸터</td>
        </tr>
    </tfoot>
</table>

6) 표 설명 태그

<caption>
- 표가 가진 데이터에 대한 설명을 넣을 수 있음

<table>
    <caption>샘플 표</caption>
    <thead>
        <tr>
            <th>열1 제목</th>
            <th>열2 제목</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>행1 열1</td>
            <td>행1 열2</td>
        </tr>

        <tr>
            <td>행2 열1</td>
            <td>행2 열2</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>테이블 푸터</td>
            <td>테이블 푸터</td>
        </tr>
    </tfoot>
</table>

아이프레임

외부 컨텐츠 <iframe>
현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
- src 속성에 원하는 HTML 문서 또는 URL을 넣을 수 있음
  - iframe에 사용되는 것을 막은 문서도 있음
- 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있음
- name 속성을 지정하면, <a> 태그의 target 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있음

<iframe src="/sample.html" frameborder="0">
    브라우저가 아이프레임을 지원하지 않을 때 나오는 문구
</iframe>

<iframe src="https://example.com" frameborder="0"></iframe>

7. 양식 태그

form 태그

정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있음
- 정보를 제출하기 위한 button을 가짐
- action 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있음
- method 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있음
  - get: URL에 모든 옵션이 표시됨
    - 보통 검색엔진에서 사용
  - post: URL에 옵션이 가려짐!
    - 넘겨진 옵션은 [개발자 도구] - [네트워크] - [페이로드/미리보기] 에서 확인 가능
    - 보안이 중요한 경우 (ex. 로그인)에 사용

<form action="./submit.html" method="post">
    <label for="name">이름</label>
    <input id="name" type="text" name="name">
    <input id="password" type="password" name="password">

    <select name="opt">
        <option>옵션1</option>
        <option>옵션2</option>
        <option>옵션3</option>
        <option>옵션4</option>
    </select>

    <button type="submit">전송</button>
</form>

설명과 입력 태그

설명 태그

<label>
input, textarea, selectbox의 설명을 작성할 수 있는 태그
- for 속성을 사용하여 연결하고자 하는 태그에 id 속성을 지정하면 label을 클릭하면 연결된 태그가 선택됨
- label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해줌
- id 속성은 값이 절대로 중복되면 안됨!

<label for="userid">아이디</label>
<input id="userid" type="text" name="userid">

<label>
    비밀번호
    <input name="password" type="password">
</label>

입력 태그

<input>
사용자에게 데이터를 입력 받을 수 있는 대화형 태그
- type 속성의 값에 따라 받을 수 있는 input의 유형이 달라짐 (기본값: text)
- value 속성을 사용해 기본 내용을 입력 해둘 수 있음
- name 속성을 사용해 input의 이름을 지정할 수 있음

<input type="text">
<input type="text" name="input-name">
<input type="text" value="input contents">

자주 사용되는 input 타입
- checkbox: input을 체크박스 형태로 만듦
- radio: 라디오 버튼으로 만듦
- file: 파일을 첨부할 수 있게 만듦
- button: value 속성에 입력된 값을 이름으로 갖는 버튼으로 만듦
- hidden: input을 시각적으로 숨겨줌. 정보 제출 시 value 속성에 입력된 값은 전송됨

옵션 태그

<select>
옵션 메뉴를 제공하는 태그
- 첫번째 option은 이름이 됨
- value 속성을 선언하지 않은 경우 <option> 태그의 컨텐츠가 기본값이 됨
- selectbox 로 많이 부름
- 첫번째 옵션이 버튼명이기 때문에 placeholder 속성을 사용할 수 없음

<select name="selectbox">
    <option>선택하세요.</option>
    <option value="옵션1">옵션1</option>
    <option value="옵션2">옵션2</option>
    <option>옵션3</option>
</select>

대화형 태그

<textarea>
여러 줄을 입력할 수 있는 대화형 태그
- 컨텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 됨
- cols/rows 속성으로 기본 너비와 높이를 지정할 수 있음
- 너비와 높이는 글자 크기 기준으로 정의됨

<textarea name="content" cols="20" rows="5">
    내용을 입력하세요.
</textarea>

알아두면 좋은 속성

readonly: 사용자가 수정할 수 없는 “읽기 전용”으로 만듦
required: form이 제출될 때 “필수 입력 사항”으로 만듦
- 이때, 필수 입력에 대한 태그에 따른 안내 문구, 행동 등은 브라우저가 자동으로 처리해줌!
placeholder: input, textarea에 부가 설명을 입력해둘 수 있음
- select 태그에서는 사용할 수 없음
disabled: 요소가 비활성화되며, 정보 제출 시 값이 제출되지 않음

버튼 태그

<button>
클릭 가능한 버튼을 태그로 <form> 태그 내에 어디서든 사용할 수 있음
- type을 “reset”으로 지정하면 버튼을 눌렀을 때 입력한 양식이 모두 초기화 됨
- type을 “submit”으로 지정하면 form 양식을 제출할 수 있음
  - form 태그 내 button 태그의 기본 type
- <button> 태그 내 컨텐츠에 태그의 입력이 가능하나, 블록 레벨 태그는 사용하면 안됨
- distbled 속성을 가질 수 있음

8. HTML 주의 사항

대소문자 반드시 구분하기
- 대문자로 해도 동작은 되지만, 특수한 상황을 제외하고 모두 소문자 이용하기
닫는 태그 생략하지 않기
- 컨텐츠를 가지는 태그라면 반드시 닫는 태그 적기
- 셀프 태그는 생략 가능
class 등 속성 값은 모두 영어로 작성
- 컨텐츠 값을 제외하고는 모두 영어로
id 값은 한 문서에서 절대 중복되지 않도록!
태그 중첩의 오류 발생하지 않도록
- ex1) <em><span>안녕</em>하세요</span>
  - 순서가 맞지 않음
  - 시작, 종료 태그 안에는 컨텐츠만 들어가도록
- ex2) <b><strong>Hi</strong></b>
  - 같은 의미의 태그를 반복해서 적지 않아야 함
  - 더 굵게 하고 싶은 경우 css 사용해야 함
- <a> 태그 안에 <button> 태그 절대 넣지 않아야 함!
depth 잘 맞추기, 대칭 유지

1. HTML

2. HTML 기본 문법

태그

속성과 값

HTML 기본 문서

부모요소 자식요소

주석

3. HEAD

head 태그

head 태그가 가질 수 있는 정보의 종류

style, link, script 태그

style 태그

link 태그

script 태그

4. BODY

body 태그

block 레벨 요소

예시

inline 레벨 요소

예시

inline-block 레벨 요소

5. 레이아웃

div 태그

header 태그

footer 태그

main 태그

section 태그

article 태그

aside 태그

레이아웃 태그를 알아야 하는 이유

6. 컨텐츠

태그

1) 제목 태그 (h1 ~ h6)

2) 문단 태그 (p)

3) 서식 태그 (b/strong, i/em, u, s/del)

4) 링크 이동

멀티미디어

1) 이미지 태그

2) 비디오 태그

3) 오디오 태그

4) svg 태그

리스트

1) 정렬되지 않은 목록

2) 정렬된 목록

3) 설명 목록

표

1) 표 태그

2) 열 제목 태그

3) 제목 그룹 태그

4) 표 본문 요소 태그

5) 표 바닥글 요소 태그

6) 표 설명 태그

아이프레임

7. 양식 태그

form 태그

설명과 입력 태그

설명 태그

입력 태그

옵션 태그

대화형 태그

알아두면 좋은 속성

버튼 태그

8. HTML 주의 사항