본문 바로가기
언어/HTML

[HTML] 웹 용어, HTML구조, 태그

by 바다의 공간 2024. 5. 22.

나중에 웹크롤링을할때에 소스를 긁어오기위해서 필요한 html을 보고 읽을 수 있기 위해서 배우게 됩니다.

폴더에있는것을 그대로 vscode로 열려면 폴더를 아이콘에 대면 바로 열립니다.

 

VSCODE 줄바꿈 하는 방법 

파일- 프리퍼런스-세팅- wrap- word wrap을 on으로 변경하면 가로 스크롤이 생기지 않습니다. 

 

용어

1. 웹
웹은 World Wide Web의 줄임말로, 전 세계의 컴퓨터와 정보를 연결하는 인터넷 기반의 정보 시스템입니다. 웹은 사용자들이 텍스트, 이미지, 오디오, 비디오 등 다양한 형태의 정보를 검색하고 공유할 수 있도록 하는 플랫폼입니다.

 


2. 웹의 구성 요소

웹 브라우저: 사용자가 웹 페이지를 조회하고 상호 작용하는 도구로, Chrome, Firefox, Safari 등이 여기에 해당합니다.

웹 서버: 웹 페이지와 관련된 파일을 저장하고 사용자의 요청에 응답하는 컴퓨터 시스템입니다.

URL (Uniform Resource Locator): 웹에서 특정 자원의 주소를 나타내는 고유한 문자열입니다. 

예를 들어, "https://www.example.com"은 해당 웹 페이지의 URL입니다.

HTML (Hypertext Markup Language): 웹 페이지의 기본적인 구조와 내용을 정의하는 마크업 언어입니다.

>>  <> 꺾쇠안에다가 명령어(태그)를 만들어주면 페이지에 나타나게 됩니다.


HTTP (Hypertext Transfer Protocol): 웹에서 정보를 주고받기 위한 통신 규약 중 하나로, 

클라이언트와 서버 간의 데이터 전송을 담당합니다.

>>http / https 이런 것들입니다.

CSS (Cascading Style Sheets): HTML로 작성된 웹 페이지의 시각적 디자인을 꾸미기 위한 스타일 시트 언어입니다.
>>html로는 문서의 틀만 만들 수 있습니다. 

>>틀을 만들고 예쁘게 꾸밀 수 있는 언어가 css입니다

>> https://info.cern.ch/ 는 세계 최고의 웹페이지 입니다.(참고)

 

JavaScript: 웹 페이지에서 동적인 기능을 추가하고 상호 작용을 가능하게 하는 프로그래밍 언어입니다.

>> 말 그대로 동적인 기능을 추가하고, 반응하는, 움직이는 화면을 만들기 위해서 사용하는 프로그램 언어입니다.

3. 웹 서비스의 구조


웹 서비스의 구조는 서비스의 특성, 목적, 기술 스택에 따라 다양할 수 있지만, 

일반적으로는 클라이언트-서버 아키텍처를 기반으로 합니다. 다양한 컴포넌트와 계층으로 구성되어 있습니다.
 (사용자가 요청하면 서버가 응답하는 방식)

클라이언트 (Client) //브라우저를 켠 쪽을 부릅니다.
웹 브라우저 또는 애플리케이션: 사용자는 웹 브라우저나 모바일 애플리케이션을 통해 웹 서비스에 접속하고 상호 작용합니다.

서버 (Server) // 응답을 해주는 쪽을 부릅니다.

웹 서버: 클라이언트의 요청을 받아 정적인 콘텐츠(HTML, 이미지, CSS 등)를 제공합니다. 

주로 Apache, Nginx 등이 사용됩니다.


애플리케이션 서버: 동적인 콘텐츠 생성 및 비즈니스 로직을 처리합니다. 

주로 Node.js, Django, Flask, Ruby on Rails 등이 사용됩니다.

데이터베이스 (Database)
데이터베이스 서버: 서버는 필요한 데이터를 저장하고 관리하기 위해 데이터베이스와 상호 작용합니다. 

주로 MySQL, PostgreSQL, MongoDB 등이 사용됩니다.

API (Application Programming Interface)
웹 API: 클라이언트와 서버 간의 통신을 위한 인터페이스로, 데이터를 주고받는 데 사용됩니다. 

RESTful API, GraphQL 등이 있습니다.

1. HTML의 구조

HTML은 HyperText Markup Language(하이퍼텍스트 마크업 언어)의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML은 웹 브라우저가 웹 페이지를 해석하고 표시하는 데 사용되며, 텍스트, 이미지, 링크, 표, 목록 등의 다양한 요소를 포함할 수 있습니다.

 

HTML 문서는 태그(tag)라 불리는 특별한 코드로 구성되어 있습니다. 각 태그는 각자의 의미를 가지며, 웹 브라우저에게 문서의 구조를 알려줍니다. 각 태그는 일반적으로 다음과 같은 형식을 가집니다

 

기본 구조

<tagname>내용</tagname>

live Server 웹 페이지 확인 방법
- 알트 + L + O

 

<!DOCTYPE html>  ▶ "이렇게 생기면 html의 버전5을 이야기하는것임"
<html>  ▶문서의 시작을 알려줌
<head> ▶문서의 머리(문서의 특징을 알려주는것임)
    <title>문서 제목</title> ▶말 그대로 문서 페이지 (아래 사진 참고)
</head>
<body>

    <h1>이것은 제목입니다</h1> ▶제목
    <p>이것은 단락입니다.</p> ▶단락 /HTML은 엔터를 아무리 눌러도 내려가지 않음
띄어쓰기를 아무리해도 띄어지지 않아요.
그래서 글자를 띄려고 해도 띄어쓰는 태그를 사용해야합니다.

</body>
</html> ▶문서의 끝을 알려줌

 

2.문단 태그

문단(paragraph) 태그는 텍스트를 문단으로 묶는 데 사용되는 HTML 태그입니다. 주로 글의 내용을 구조화하고 가독성을 높이기 위해 활용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  ▶ 다른나라의 글자로 해서 깨지지 않게 하는것
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> ▶ 모바일 세팅 / 줌인/아웃 안되는거 방지하는것
    <title>문단 태그</title>
</head>
<body>
    <p>1. 문단 태그</p> ▶p태그는 중요도가 조금 낮음
    <p>문단을 만드는 태그</p>
    블록 태그
    블록 태그
</body>
</html>

3. 제목 태그


HTML에서 제목을 나타내는 데 사용되는 태그는 <h1>에서 <h6>까지입니다. 이는 Heading(헤딩) 태그로 불리며, 숫자가 커질수록 제목의 수준이 낮아집니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목 태그</title>
</head>
<body>
    <h1>안녕하세요. 제목태그 h1</h1> ▶제목태그 
    <h2>안녕하세요. 제목태그 h2</h2>
    <h3>안녕하세요. 제목태그 h3</h3>
    <h4>안녕하세요. 제목태그 h4</h4>
    <h5>안녕하세요. 제목태그 h5</h5>
    <h6>안녕하세요. 제목태그 h6</h6>
</body>
</html>

h1,h2,h3,h4,h5는 각각 글자 크기를 뜻하는것입니다. 그래서 순서는 상관이 없습니다.

 

4. 서식 태그

"서식 태그"는 HTML 문서에서 텍스트의 서식을 지정하는 태그들을 가리킵니다. 여러 서식 태그들이 텍스트의 스타일, 강조, 목록, 링크 등을 정의하는 데 사용됩니다.

 

5. 서식 태그

"서식 태그"는 HTML 문서에서 텍스트의 서식을 지정하는 태그들을 가리킵니다. 여러 서식 태그들이 텍스트의 스타일, 강조, 목록, 링크 등을 정의하는 데 사용됩니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>서식태그</title>
</head>
<body>
    <h2>서식 태그</h2>
    <p>b 태그는 글자를 <b>굵게</b> 표현합니다</p>
    <p>strong 태그는 글자를 <strong>굵게</strong> 표현합니다</p>
    <p>i 태그는 글자를 <i>이탤릭체</i>로 표현합니다</p>
    <p>em 태그는 글자를 <em>이탤릭체</em>로 표현합니다</p>
    <p>ins 태그를 사용하면 <ins>중요한 글자</ins>를 표현할 수 있습니다</p>
    <p>del 태그를 사용하면 <del>글자를 지운 것</del>처럼 표현합니다</p>
    <p>sup 태그를 사용해서 수식을 표현: x<sup>2</sup> + y<sup>3</sup> = z</p>
    <p>sub 태그를 사용해서 화학식을 표현: H<sub>2</sub>O</p>
</body>
</html>

 

여기서 중요한것은 태그안에 태그를 만들 수있다는 점이 중요한것이다.

<p>태그안에 <b>태그를 써서 부분만 굵게 사용이 가능하다는것입니다.

 

6. 목록 태그

HTML에서 목록을 만들기 위해 사용되는 주요 목록 태그에는 <ul>, <ol>, <li>가 있습니다. 이러한 태그들은 웹 페이지에서 항목을 순서 있는 목록(ordered list)이나 순서 없는 목록(unordered list)으로 구성하는 데 사용됩니다.

봇들은 목록태그를 메뉴로 인식을 하게 됩니다. 따라서 이렇게만들어놓고 나중에 css로 칸을 만들어서 네비로 바꿀수도있고 결국 디자인적인것은 css가 다 하는것이다. html은 정말 말 그대로 뼈대만 만들어놓는것이라고 알고있으면 될것같습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록 태그</title>
</head>

<body>
    <h2>목록 태그</h2>
    <ul> ▶순서가 없는 목록
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ul>

    <hr> ▶수평선을 그어줌
    <ol> ▶순서가 있는 목록 
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ol>

    <hr>
    <dl> ▶dt와 dd를 나뉠 수 있다. dt는 안 띄어쓰고 dd는 한 줄 띈다.
        <dt>류정원 선생님</dt>
        <dd>김사과 학생</dd>
        <dd>오렌지 학생</dd>
        <dd>반하나 학생</dd>
    </dl>
</body>
</html>

7. 이미지 태그

이미지를 웹 페이지에 삽입하기 위해 사용되는 HTML 태그는 <img>입니다. <img> 태그는 이미지의 소스(src) 및 대체 텍스트(alt)와 같은 속성을 사용하여 이미지를 정의합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 태그</title>
</head>
<body>
    <h2>이미지 태그</h2>
    <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음 로고"> ▶절대경로
    <img src="./summer 1.png" alt="여름 이미지"> ▶상대경로
    <img src="/images/summer 2.png" alt="여름 이미지">
</body>
</html>

src = 소스  속성 어디 위치에 있는데? 라는것을 의미합니다.

절대경로와 상대경로로 경로는 나뉩니다.

상대경로 : 내 폴더에 저장되어있는 것

절대경로 : 보통 다른사람의 경로, 파일을 사용할때 쓰입니다.

8.하이퍼링크 (크롤링할때 굉장히 많이 쓰임)

하이퍼링크(하이퍼텍스트 링크)를 생성하기 위해 사용되는 HTML 태그는 (앵커) 태그입니다.  태그는 사용자를 다른 웹 페이지로 이동하거나 같은 페이지 내에서 다른 부분으로 이동하게 하는 링크를 생성하는 데 사용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>
</head>
<body>
    <h2>하이퍼링크</h2>
    <!-- 절대 경로 -->
    <a href="http://koreaisacademy.co.kr">코리아IT아카데미</a>
▶ 앵커(에이)태그를 쓰고 화면에 나타날 이름이 나타나게 됩니다. 글자를 클릭하게되면 왼쪽 링크로 이동하게 됩니다.
    <a href="https://www.daum.net"><img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음 로고"></a> //
▶ 앵커태그와 앵커태그 사이에 절대경로 이미지가 보이고 이미지를 누르면 다음 페이지로 넘어갑니다.

    <!-- 상대 경로 -->
    <a href="./2.문단태그.html">문단태그로 이동</a>
▶a와 a사이에 문단태그를 이라는 글자를 클릭하게되면 문단태그 html로 이동합니다.
    <a href="./6.이미지태그.html"><img src="./summer 1.png" alt="여름 이미지"></a>
▶여름이미지 라는 텍스트가 대체 텍스트로 지정된 이미지를표시하고 이 이미지를 클릭하면 6.이미지태그.html페이지로이동하는 링크를 생성하는것을 의미합니다.
</body>
</html>

9. 테이블(표)

HTML에서 테이블을 만들기 위해 사용되는 태그는 입니다. 테이블은 행과 열로 구성되며, 각 셀에 데이터를 담을 수 있습니다. 테이블을 만들 때는 을 시작 태그로 사용하고, 각 행은 (table row)  태그로, 각 셀은 (table data) 태그로 정의합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 1</title>
</head>
<body>
    <h2>테이블 1</h2>
    <table>
        <tr>
            <td>첫번째 셀</td>
        </tr>
    </table>
    <hr>
    <table border="1" width="300">
        <tr>
            <td>첫번째 셀</td>
        </tr>
    </table>
    <hr>
    <table border="1">
        <tr>
            <td>첫번째 셀</td><td>두번째 셀</td>
        </tr>
        <tr>
            <td>세번째 셀</td><td>네번째 셀</td>
        </tr>
        <tr>
            <td>다섯번째 셀</td><td>여섯번째 셀</td>
        </tr>
    </table>
    <hr>
    <table border="1">
        <tr>
            <td colspan="2">첫번째 셀</td> ▶오른쪽으로 합쳐라라는 뜻
        </tr>
        <tr>
            <td>세번째 셀</td><td>네번째 셀</td>
        </tr>
        <tr>
            <td>다섯번째 셀</td><td>여섯번째 셀</td>
        </tr>
    </table>
    <hr>
    <table border="1">
        <tr>
            <td>첫번째 셀</td><td>두번째 셀</td>
        </tr>
        <tr>
            <td rowspan="2">세번째 셀</td><td>네번째 셀</td> ▶세로로 합쳐라라는 뜻
        </tr>
        <tr>
            <td>여섯번째 셀</td>
        </tr>
    </table>
</body>
</html>

10. 아이프레임

아이프레임(<iframe>) 태그는 다른 HTML 문서를 현재 문서에 삽입하는 데 사용됩니다. 

이를 통해 외부 웹 페이지, 동영상, 지도 등을 현재 페이지에 내장할 수 있습니다. 

<iframe> 태그는 웹페이지의 일부분을 다른 웹페이지로 대체하거나, 다른 소스의 콘텐츠를 보여주는 데에 유용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이프레임</title>
</head>
<body>
    <h2>아이프레임</h2>
    <p><a href="./6.이미지태그.html">이미지 연습 페이지(현재창)</a></p>
    <p><a href="./6.이미지태그.html" target="_blank">이미지 연습 페이지(새탭,새창)</a></p>
▶target을 넣으면 새탭 새창이 열린다.
    <p><a href="./6.이미지태그.html" target="korea">이미지 연습 페이지(아이프레임)</a></p>
▶아이프레임에서 바뀔 수 있게 하는것.
    <p><a href="http://www.koreaisacademy.com" target="korea">코리아IT아카데미(아이프레임)</a></p>
    <p><iframe src="http://www.koreaisacademy.com" style="width:100%; height:600px; border: 3px dashed red;" name="korea"></iframe></p> 
▶가로는 100%로 가득 채우고 세로는 600px로 채워라 border는 점선으로 3px짜리 테두리(빨강색으로), 아이프레임의 이름은 kroea라고 지었다 라는 의미입니다.
</body>
</html>

11. 폼

HTML에서 폼(form)은 사용자로부터 정보를 입력 받을 수 있는 구조를 제공하는 데 사용됩니다. 

폼을 생성하기 위해 사용되는 주요 태그는 <form>입니다. 

폼은 텍스트 입력, 비밀번호 입력, 라디오 버튼, 체크박스, 드롭다운 메뉴 등 다양한 입력 요소를 포함할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼태그</title>
</head>
<body>
    <h2>폼태그</h2>
    <form action="./regist" method="post">
        <input type="hidden" name="hdd" value="서버로 전달될 값">

        <p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요" name="userid" id="userid" required></p>
        <p>비밀번호: <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw" required></p>
        <p>성별: <label for="male">남자</label><input type="radio" name="gender" value="남자" id='male' checked> <label for="female">여자</label><input type="radio" name="gender" value="여자" id="female"></p>
        <p>취미: <label for="hobby1">게임</label><input type="checkbox" name="hobby" id="hobby1" value="게임" checked>  <label for="hobby2">술</label><input type="checkbox" name="hobby" id="hobby2" value="술"> <label for="hobby3">다꾸</label><input type="checkbox" name="hobby" id="hobby3" value="다꾸"> <label for="hobby4">배드민턴</label><input type="checkbox" name="hobby" id="hobby4" value="배드민턴"> <label for="hobby5">드라마시청</label><input type="checkbox" name="hobby" id="hobby5" value="드라마시청"></p>
        <p>첨부파일: <input type="file" name="file"></p>
        <p>이메일: <input type="email" name="email"></p>
        <p>웹사이트: <input type="url" name="url" value='http://www.naver.com' readonly></p>
        <p>전화번호: <input type="tel" name="tel" disabled></p>
        <p>생년월일: <input type="date" name="birthday"></p>
        <p>좋아하는 숫자: <input type="number" min="1" max="10" step="1"></p>
        <p>쿠폰번호: <input type="search" name="search"></p>
        <p>좋아하는 색상: <input type="color" name="color"></p>
        <p>프로그래밍 능력: <input type="range" min="0" max="10" value="3"></p>
        <p>직업:
            <select name="job" id="job">
                <option value="프로그래머">프로그래머</option>
                <option value="공무원">공무원</option>
                <option value="의사">의사</option>
                <option value="법조인">법조인</option>
                <option value="취준생">취준생</option>
            </select>
        </p>
        <p>자기소개</p>
        <p><textarea name="content" id="content" cols="50" rows="5"></textarea></p>
        <p><input type="button" value="클릭하세요" onclick="alert('안녕?')"> <input type="reset" value="다시입력"> <input type="submit" value="회원가입"></p>
    </form>
</body>
</html>

12. 디스플레이

디스플레이 관련 태그는 웹 페이지에서 콘텐츠의 표시 방법과 레이아웃을 제어하는 데 사용됩니다.

주로 CSS (Cascading Style Sheets)와 함께 사용되며, 웹 페이지의 디자인 및 레이아웃을 조정하는 데에 큰 역할을 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>디스플레이</title>
</head>
<body>
    <h2>디스플레이</h2>
    1. <span style="font-size: 30px; color: deeppink">span 태그 영역</span>입니다.
▶스판 기능(=글자속성변경) 을 아무것도안주면 그냥 글자가 되고 style이라는 속성과 css라는 속성을 주면 속성이 바뀝니다.
    <div style="width: 600px; height: 300px; background-color: gold;">2. div 태그 영역</div>
▶div는 면에 대한 속성을 주는겁니다.
</body>
</html>

 

 

13. 시맨틱 태그

시맨틱 태그(semantic tags)는 HTML5에서 도입된 태그로, 문서의 구조와 의미를 더 명확하게 전달하기 위해 사용됩니다. 이러한 태그들은 웹 페이지의 콘텐츠를 구조화하고 의미를 부여하여 검색 엔진 및 개발자에게 페이지의 내용을 이해하기 쉽게 만듭니다.

<div 태그>

<header>: 문서나 섹션의 머리말을 정의합니다.
    <nav>: 내비게이션 링크를 정의합니다.
    <article>: 독립적으로 구분되거나 재사용 가능한 컨텐츠 영역을 정의합니다.
    <section>: 문서의 섹션을 정의합니다.
    <aside>: 주변 내용과는 관련이 적은 부가 정보를 포함하는 콘텐츠를 정의합니다.
    <footer>: 문서나 섹션의 꼬리말을 정의합니다.
저작자표시

'언어 > HTML' 카테고리의 다른 글

프론트엔드 개발_HMTL_(3)  (0) 2024.06.21
프론트엔드 개발_HMTL_(3)  (0) 2024.06.08
[HTML] 순서유무의 리스트, 테이블, 태그  (0) 2024.05.21
[HTML] 기본용어, 요소, 자동완성,VSCODE사용  (0) 2024.05.21

관련글

티스토리툴바