주니어 데이터 엔지니어 우솨's 개발일지

HTML의 사용 본문

Web Data Crawling/HTML

HTML의 사용

우솨 2024. 4. 28. 11:55

HTML(Hypertext Markup Language)
웹 브라우저가 이해할 수 있는 언어
CSS(Cascading Style Sheets)
문서를 예쁘게 꾸미는 언어
Java Script
문서에 기능을 만들어주는 언어

HTML
콘테츠를 가지는 태그
<div> 콘텐츠 </div>

콘텐츠를 가지지 않는 태그 두가지로 구분된다.
<br />

속성과 값
<div title = '제목'> Content</div>
a태그 - 링크
href속성을 사용해서 이동하고자 하는 파일 혹은 url을 작성한다.
target속성을 사용해서 이동해야 할 링크를 새창(_blank), (_self)등 원하는 타겟을 지정할 수 있다.

HTML의 기본 문서
<!DOCTYPE html> #문서버전
    <html lang='ko'> #기본언어설정
        <head>
            <title>문서 제목</title> #제목
        </head>

        <body> #실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
            안녕하세요 !
        </body>
    </html>
들여쓰기를 통해 부모, 자식의 관계를 파악이 가능하다.

주석(Comment)
-개발자가 코드 내에 입력한 메모, 주석 안에 주석을 또 넣을순 없다!
<!-- 주석내용 -->


<head> 태그
사람의 눈에 보이지 않는 문서의 정보가 담기는 영역
1. 타이틀
2. 메타 데이터
-인코딩 정보 : 'charset'은 문서에서 허용하는 문자의 집합으로 charset에 선언된 문자의 집합 규칙에 따라 문서에서 사용할수 있는 문자가 제한된다. (꼭 UTF-8사용)
-문서 설명
-문서 작성자
3. CSS,Script
<style>, <link>, <script>
-문서 내용의 외형에 영향을 주는 태그들

<body> 태그
실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳

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

2. inline(인라인 레벨 요소)
블록 요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 좌/우에 여백을 넣는 것만 허용된다.
ex) <span>, <a>, <strong>

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

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

콘텐츠
-div : 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
레이아웃 태그 #1
-header : 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
-footer : 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
-main : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
레이아웃 태그 #2
-section : 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그
-article : 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
-aside : 문서의 주요 내용에 간접적인 정보를 전달하는 태그로, 쇼핑몰의 오른쪽에 따라다니는 '오늘 본 상품' 같은 것으로도 사용할 수 있다.

제목 태그
<h1> ~<h6>
문서 구획 제목을 나타내는 태그로 Heading태그라고 부른다.
h1태그는 한번만 사용되어야 하고 구획의 순서는 지켜져야 한다.

문단태그
<p>
문서에서 하나의 문단으로 나타내는 태그이다.
제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
<b> 볼드태그
굵은 글씨로만 변경
<strong>
굵은 글씨로 변경후 강조의 의미를 부여
<b>와 <strong>의 굵은 효과는 같지만 의미가 다르다.
<i>
기울기
<em>
<i>처럼 기울기 처리를 하며 강조의 의미를 가진다.
<u>
밑줄을 넣고 주석을 가지는 단어임을 나타낸다.
단순하게 밑줄만 긋는 용도로 사용X
<s>
취소선 추가, 단순히 시각적인 효과
<del>
취소선 추가, 문서에서 제거된 텍스트를 나타낼 수 있다, <ins>태그를 함께 사용하여 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.

 

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

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

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

<audio>
문서 내에 소리를 첨부할 수 있는 태그
- video태그와 사용법이 비슷하다.
- 'control' 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.

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

리스트 <ul>, <li>
- 정렬되지 않은 목록 태그
- 기본 불릿형식(점)으로 목록을 그린다.
- <ul>태그의 자식요소로는 <li>태그만 와야한다, 하위 리스트를 만드려면 <li> 태그 안에 <ul>,<ol>태그를 사용하면 된다.
<ol>
기본숫자 방식으로 목록을 그린다.

<dl>,<dt>,<dd>
- 설명목록태그
- <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd>태그에 작성 할 수 있다.
- 주로 용어사전이나 '키-값'이 있는 쌍의 목록을 나타낼 때 사용.

표 <table>
-<tr> 행 구분(row)
-<td> 태그로 열 생성(cell)
-<th> 열의 제목 태그
-<thead> 본문의 제목

-<tbody> 표의 본문 요소
-<tfoot> 표의 바닥글
-<caption> 표 설명태그

아이프레임(iframe)
현재 문서안에 다른 HTML 페이지를 삽입할 수 있는 태그
ex)유튜브 영상 넣기
-src속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다.
-외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.(보안 이슈)
- 'name'속성을 지정하면, <a> 태그의 'target'속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.

양식 태그
Form
-정보를 제출하기 위한 태그 : input, selectbox, textarea등을 가질 수 있다.
-정보를 제출하기 위한 button을 가진다.
-'action' 속성으로 제출되었을 때 페이지를 이동시킬 수 있다.
-'method'속성으로 제출될 때 처리 방식을 결정할 수 있다.

label 
-사용자에게 데이터를 입력 받을 수 있는 대화형 태그
-type속성의 값에 따라 받을 수 있는 input의유형이 달라진다.
-value속성을 사용해 기본내용을 입력 해둘 수 있다.
-name속성을 사용해 input의 이름을 지정할 수 있다.

자주 사용되는 input타입
- checkbox : 체크박스
- radio : 라디오 버튼
- file : 파일을 첨부할 수 있게 만든다.
- button : value속성에 입력된 값을 이름으로 갖는버튼으로 만든다.
- hidden : input을 시각적으로 숨겨준다.

textarea
여러줄을 입력할 수 있는 대화형 태그
-cols/row 속성으로 기본 너비와 높이를 지정할 수 있다.

readonly :읽기전용
required : 입력 필수사항
placeholder : input, textarea에 부가설명 입력
disalbed: 비활성화 시킴.

html 주의사항 
1. 대소문자 구분
2. 받는 태그 생략, 태그 중첩의 오류, 태그가 꼬이지 않게 주의
3. 클래스 속성 생성시 영어사용
4. ID값의 중복
5. 계층(들여쓰기=뎁스) 유지
6.a태그 안에 button태그 넣지 않기

'Web Data Crawling > HTML' 카테고리의 다른 글

웹 스크래핑과 Request  (0) 2024.04.28
'Web Data Crawling/HTML' Related Articles more