[Week3 웹데이터 크롤 및 분석] TIL 6일차

데브코스_데이터엔지니어링

[Week3 웹데이터 크롤 및 분석] TIL 6일차 - HTML 기본 태그

🪄하루🪄 2023. 10. 23. 18:19

728x90

1) 개요

Html이란?

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

CSS이란?

문서를 예쁘게 꾸미는 언어

JS란?

문서에 “기능”을 만들어주는 언어

(ip 설정을 하면) 같은 와이파이 상에 있는 모든 기기(태블릿, 노트북, 데스크톱 등등)에서 해당 파일(.html)에 접속하여 확인할 수 있다.

2) Html

1. HTML 기본 문법

html은 태그로 구성되는데, 콘텐츠를 갖는 태그와 콘텐트를 갖지 않는 태그로 구분할 수 있다.

콘텐츠를 가지는 태그 : <열리는 태그> 콘텐츠 </닫히는 태그>
콘텐츠를 가지지 않는 태그 : <단일 태그>

태그안에는 속성과 값을 지정할 수 있다. <태그 속성=값>

주석은 다음과 같이 사용한다.

<!— 주석내용 —>

기본 구조는 다음과 같다

<!DOCTYPE html> <!-- 1. 문서 버전 -->
<html lang="ko"> <!-- 2. 시용 언어 -->

<head> <!-- 3. 사용자의 눈엔 보이지 않는 “문서의 정보”가 담기는 영역 -->
    <title>문서제목</title> <!-- 3-1. 문서 제목(페이지 제목) -->
</head>

<body> <!-- 4. 사용자의 눈에 실제로 보이는 콘텐츠 영역 -->
    문서의 내용
</body>

</html>

2. <head>

사용자의 눈엔 보이지 않는 “문서의 정보”가 담기는 영역

<title>
메타데이터
- 인코딩 정보 : 문서에서 허용하는 문자의 집합
- 문서 설명
- 문서 작성자

<meta charset="인코딩정보">
<meta name="description" content="문서설명">
<meta name="author" content="문서작성자">

CSS, JS(스타일과 동작)
- <style> : css 코드를 작성하는 공간으로 문서를 예쁘게 꾸밀 수 있다.
- <link>
  - rel : 링크의 종류를 알려주는 속성 ex) stylesheet : css파일
  - href : 링크의 경로+이름을 삽입하는 속성
- <script> : 동작을 정의 하는 태그

3. <body>

사용자의 눈에 실제로 보이는 콘텐츠 영역

블록 레벨 요소(block) : 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소, 일반적으로 페이지의 구조적 요소를 나타낸다.(상하, 좌우) 설정을 바꿀 수 있다.
인라인 레벨 요소(inline) : 블록 내에 포함되는 요소로 한 줄에 나열된다
- cf) 인라인 블록(inline-block) 요소 : 인라인 레벨 요소이나, css를 이용해 좌우 설정을 바꿀 게 있게 하는 요소이다.

4. 레이아웃 태그

Semantic Markup

의미에 맞는 적절한 태그를 사용하여 마크업 하는 것

HTML 5부터 태그를 의미 있게 사용하기 위해, 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미 있게 전달하기 위해 사용된다.

태그의 사용은 다음과 같다.

header, footer, main
- footer : 페이지의 부가적인 정보를 담는 태그
- main : 페이지의 주요 콘텐츠를 담는 태그(한 페이지에 한 번만 사용해야 한다)
- header : 페이지의 주요 정보를 담는 태그
section. article, aside
- article : 해당 구역의 독립적인 문서를 전달하는 태그
- aside : 문서의 내용의 부가적인 정보를 전달하는 태그(위젯들의 모음, 최근 본 상품 등)
- section : 콘텐츠의 구역을 나누는 태그
div : 의미를 가지지 않고 단순히 구역을 나누는 데 사용되는 태그

기본 레이아웃

<head>

    <title>페이지의 제목</title>
    <meta charset="인코딩정보">
    <meta name="description" content="문서설명">
    <meta name="author" content="문서작성자">

</head>

<body>

    <header> <!-- 페이지의 주요 정보 -->
    </header>

    <main> <!-- 페이지의 주요 콘텐츠 -->

        <section>
        </section>

        <!— 좌우로 나눌 경우 다음과 같이 사용할 수 있다.>

        <div>
            <section>
            </section>
        </div>

        <aside>
        </aside>

    </main>

    <footer> <!-- 페이지의 부가적인 정보 -->
    </footer>

</body>

5. 콘텐츠 태그

제목 태그 <h1>~<h6>

h1은 페이지 내에서 한 번만 사용해야 하고, 1~6번 태그를 순차적으로 사용해야 한다.

문단태그 <p>

하나의 문단을 나타내는 태그이다.

p태그는 콘텐츠 태그 이므로, 레이아웃 태그처럼 사용하지 말자(블록 요소여서 혼동해서 사용하는 경우가 많으니 주의하자)

서식 태그

<b> : 굵은 글씨로 변경
<strong> : 강조의 의미+굵은 글씨로 변경
<i> : 문맥의 내용과 구분되어야 하는 경우 기울임
<em> : 강조의 의미+기울임
<u> : 주석을 가지는 단어의 의미+밑줄
<s> : ~~취소선~~ 추가
<del> : 문서에서 ~~제거된 텍스트~~의 의미+~~취소선~~ 추가
cf) <ins> : 추가된 단어와 함께 사용
<a> : 링크 요소 삽입
- href : 이동하고자 하는 파일이나 URL을 넣는 속성
- target : 링크를 _blank(새창)이나 _self(현재장)으로 띄우는 속성

멀티미디어(이미지, 비디오, 오디오, SVG) 태그

<figure>, <figcation> 태그

<figure> : 블록레벨로 변환 + 멀티미디어(이미지, 비디오, 오디오)와 인용문 등 문서의 흐름에 참조는 되지만 독립적으로 분리하고 설명을 넣을 수 있는 태그
<figcation> : 콘텐츠에 대한 설명을 넣는 태그

이미지 태그 <img>

문서 내에 이미지를 넣을 수 있는 태그

src : 이미지 파일/경로를 넣는 속성
alt : 이미지 로딩 문제시 대체 텍스트의 속성(필수로 넣는 것이 좋다.)

비디오 태그 <video>

문서 내에 비디오를 넣을 수 있는 태그

src : 비디오 파일/경로를 넣는 속성
poster : 비디오가 로드되기 전에 보여주는 이미지의 파일을 넣는 속성
autoplay : 자동재생하는 속성
<source> : 여러 타입의 비디오를 제공하는 태그
- type : 비디오의 타입을 지정하는 태그

오디오 태그 <audio>

문서 내에 소리 파일을 넣을 수 있는 태그

src : 오디오 파일/경로를 넣는 속성
controls : 재생/정지 버튼을 띄우는 속성
<source> : 여러 타입의 오디오를 제공하는 태그
- src : 오디오 파일/경로를 넣는 속성
- type : 오디오의 타입을 지정하는 속성

SVG태그 <svg>

Scalable Vector Graphics

수학적 계산을 통해 그려지는 XML 기반 파일 형식으로 크기를 자유자재로 변경해도 해상도는 크게 영향을 받지 않는다.

(기존 하나의 픽셀을 하나의 색으로 표시하여 나타내는 이미지는 크기에 변경을 가하면 뿌옇게 보이는 등 화질에 문제가 생긴다.)

중요한 이미지(로고, 아이콘 등)에 많이 사용한다.

기존 master image(하나의 픽셀=하나의 색으로 표시되는 이미지)의 경우 크기에 변경을 가하면 뿌옇게 보이는 등 화질에 문제가 생긴다.

6. 리스트 관련 태그

순서가 필요 없는 목록 <ul>

<li>
- <ul>
- <ol>

순서가 있는 목록 <ol>

<li>
- <ol>
- <ul>

<li>

<ul>, <li>의 태그의 각 항목을 나열할 때 사용하는 태그로 list item의 약자이다.

딕셔너리 형태의 목록 <dl>

dt를 key로 dd를 value로 같은 dictionary 형태의 값을 나타낼 때 사용

dt태그 하나에 여러 개의 dd태그가 올 수 있다.

<dt>
<dd>

7. 표 관련 태그 <table>

표에 관련된 태그

<caption> : 표의 설명에 대한 태그
<thead> : 표의 제목 태그(한 번만 사용 가능)
<tbody> : 표의 정보를 담는 태그(한 번만 사용 가능)
<tfoot> : 표의 바닥글 요소 태그(한 번만 사용 가능)
<tr> : 행을 구분하는 태그(가로줄)
- <th> : 표의 속성이름에 대한 태그(굵게+가운데 정렬)
- <td> : 셀을 만드는 역할

그림으로 간단히 나타내면 다음과 같다.

<tr>

<th>	<th>	<th>
<td>	<td>	<td>

</tr>

8. 아이프레임 태그 <iframe>

현재 문서 안에 외부/내부 문서를 삽입할 수 있는 태그

모든 웹 페이지를 iframe으로 불러올 수 있는 것은 아니다.

src : 문서의 파일/경로를 넣는 속성

9. 양식 태그

<form>

사용자의 의견이나 입력된 정보들을 한 번에 서버로 전송하기 위한 태그

action : 태그에 정보들을 전송한 후, 이동할 페이지를 지정
method : 어떤 방식으로 전송할지에 대한 정보(get, post…)

자식 계층으로 사용하는 관련 태그

<input>

사용자로부터 값을 입력받기 위한 태그

type : 입력받을 수 있는 데이터 종류에 대한 속성
- checkbox
- radio : yes or no
- file : 파일 첨부
- button : <button> 태그와 유사
- hidden : 보이지 않지만 전송 버튼을 누를 때 같이 전송하는 값을 넣음
value : 사용자로부터 입력을 받고 전송할 때, 전송할 값(고정값으로 넣을 수 있음)에 대한 속성
name : input에 이름을 지정할 수 있는 속성. radio button의 경우 이름이 같아야 하나의 버튼만 선택된다.
placeholder : 입력 형식에 대한 가이드를 제공하는 속성

<select>

옵션 메뉴를 제공하는 태그

<option> : 옵션을 정의할 수 있는 태그
- value : 옵션을 선택했을 때, 전송할 기본값에 대한 속성
- 제일 처음 옵션은 value=""이다.
- 나머지 옵션은 정의되지 않으면 콘텐츠값이 기본값이 된다.

<texxtarea>

여러 줄을 입력할 수 있는 대화형 태그

cols:가로넓이(글자수)
rows : 세로 길이(글자수)

<label for="labelname">

input, selectbox, textarea에 대한 설명을 작성하는 태그

이후 태그에서 id="labelname"을 지정하면 해당 입력태그와 label을 매칭한다.

<button type=”submit”>

form의 정보 전송을 위한 태그

해당 버튼을 누르면 form에 입력된 내용들이 서버로 한 번에 전송된다.

알아두면 좋은 속성

양식 태그의 속성에 사용할 수 있는 대표적인 값들은 다음과 같다.

readonly : 사용자가 수정할 수 없는 읽기 전용으로 만든다.
required : 해당 입력 영역을 필수 입력 사항으로 만든다.
placeholder : 해당 입력 영역의 양식에 대한 부가 설명을 입력할 수 있다.
disabled : 해당 입력 요소가 비활성화되어 제출 시 값이 제출되지 않는다.

10. 주의사항과 참고 문서

닫는 태그가 필요한 경우, 잘 확인하자.
태그의 id는 한 페이지에서 중복되지 않도록 하자.
같은 의미를 가진 태그를 중첩하지 말자 <a href=””><button> 혹은 <b><strong>
태그를 중첩할 때 계층을 잘 유지해서 사용하자
개발은 영어를 사용하자(태그의 class, id 이름에는 영어를 사용)
태그 이름은 소문자로 작성하자

그 외의 자세한 사항에 대해서는 mdn 문서를 참고하자.

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

728x90

저작자표시 비영리 변경금지

'데브코스_데이터엔지니어링' 카테고리의 다른 글

[Week3 웹데이터 크롤 및 분석] TIL 8일차 - 데이터 크롤링 기초(2) (0)	2023.10.25
[Week3 웹데이터 크롤 및 분석] TIL 7일차 - HTTP와 데이터 크롤링 기초(1) (0)	2023.10.24
[Week2 자료구조/알고리즘] TIL 5일차 - 자료구조/알고리즘 적용하기 (1)	2023.10.20
[Week2 자료구조/알고리즘] TIL 4일차 - 힙과 추가문제 (0)	2023.10.19
[Week2 자료구조/알고리즘] TIL 3일차 - 스택과 큐, 트리 (0)	2023.10.18

현재글[Week3 웹데이터 크롤 및 분석] TIL 6일차 - HTML 기본 태그

Today :
Yesterday :

🐇꾸준히, 한걸음씩☘️