[웹 기초] HTML 이해하기

70_0ewd ㅣ 2024. 4. 1. 17:17

HTML이란?

HTML 기본 문법

HTML은 기본적으로 <태그 이름>의 구조를 가지며, 콘텐츠를 가지는 태그와 가지지 않는 태그로 구분된다.
콘텐츠를 가지는 태그는 시작 태그와 종료 태그를 가지는 한 쌍으로 존재하는 반면, 콘텐츠를 가지지 않는 태그는 단일 태그만 존재한다. 이때 단일 태그는 셀프 클로징을 통해 코드를 끝내거나, 아예 열린 상태로 두거나 한다.

 <!-- 콘텐츠를 가지는 태그 -->
 <div> 콘텐츠 </div>
 
 <!-- #콘텐츠를 가지지 않는 태그 -->
 <br/>
 <!-- /가 종료 태그임 -->

html 문법 사용 시 주의해야 할 점은 다음과 같다.

대소문자 주의 - 태그는 가능한 소문자로 작성
닫는 태그 생략 주의
ID가 중복되지 않게 주의
계층 구조 유지
동일한 의미의 태그 중첩 주의

속성과 값

태그는 기본적으로 기능 확장을 위한 속성과 값을 가진다.

<TAG 속성="값"></TAG>
<img src="./my_photo.jpg" alt="내 프로필 사진" />
<!-- 
<이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" /> 
-->

<div class="name"> 아무개 </div>
<!-- 
<의미없는분할 태그별명="name"> 아무개 </의미없는분할> 
-->

HTML 기본 문서 구조

HTML의 기본적인 문서 구조는 다음과 같다.

DOCTYPE : 어떤 HTML 버전을 사용하는지 선언. 현재 표준은 HTML5 버전
<html> : HTML 문서 시작 선언 및 문서 기본 언어 설정. 해당 태그를 통해 문서의 전체 범위를 지정한다.
<head> : 문서에 필요한 정보 즉, 화면을 구성하기 위한 기본 정보가 기입되는 곳
<title> : 문서의 제목
<body> : 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<title> 문서 제목 </title>
    </head>
    
    <body>
    	안녕하세요!
    </body>
</html>

이때 각각의 태그들은 아래와 같은 부모-자식 구조를 가진다. 따라서 각각의 코드를 작성할 때는 올바를 들여쓰기를 해야한다.

주석

위의 코드를 보면 알 수 있듯이 html의 주석은  처럼 사용한다. 이때 주석 내부에 주석을 또 다시 넣는것은 불가능하다는 점을 주의하자! 또한 소스 보기나 개발자 도구를 통해서 웹 브라우저를 볼 경우 주석까지 모두 확인 가능하기 때문에 민감한 정보 등은 주석으로 처리하지 않도록 해야한다는 것도 꼭 명심하자. 주석을 사용할때는 앞뒤로 여백을 넣는것이 개발자 사이의 약속 아닌 약속!

HEAD

<head>

<head>태그는 사람의 눈에는 보이지 않지만 문서의 기본 정보를 담는 공간이다. 이 태그가 가질 수 있는 정보의 종류는 다음과 같다.

타이틀 <title> </title> : 웹브라우저의 탭이나 창에서 보이는 문서의 제목과 favicon을 정의
메타 데이터 <meta>
1. 인코딩 정보 : 문서에서 허용하는 문자의 집합, 주로 utf-8
2. 문서 설명
3. 문서 작성자
CSS
1. <style> </style> : 문서 내부에서 CSS를 작성할 때 사용
2. <link> : 외부 문서를 연결할 때 사용. 단일 태그이며 rel, href 속성을 가진다. rel은 링크가 현재 페이지와 어떤 '관계'를 갖고 있는지에 대한 설명을 해주는 속성이며, href는 참조할 파일명을 가르키는 속성이다.
JS <script></script> : JavaScript를 불러오거나 작성할 때 사용. 콘텐츠가 없는 경우에도 단일 태그가 아님을 주의하자.

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<title> 문서 제목 </title>

        <meta charset="utf-8">
        <meta name="description" content="이 문서는 실습 문서입니다.">
        <meta name="author" content="캐스퍼">

        <link rel = "stylesheet" href="../CSS/style.css">
        
        <script>
            const hello = 'world';
            console.log(hello);
        </script>
        <!-- 
        <script src="script.js"></script>
        -->
    </head>
</html>

<!-- style.css 내부 코드 -->
body{
    color: green;
}

BODY

<body>

body 태그는 사용자의 눈에 보이는 내용이 담기는 태그이다. 해당 태그는 블록 레벨 요소와 인라인 레벨 요소로 구분된다.

block (블록 레벨 요소)

일반적으로 페이지의 구조적 요소(<div>, <article>, <p>, <section>,...)를 말한다. 블록의 크기와 내/외부 여백을 지정할 수 있고, 레고 블록처럼 차곡차곡 쌓이듯이 화면 너비가 꽉 차는 구조이다 . 인라인 요소를 포함할 수 있지만, 인라인 요소에 포함되는 것은 불가능하다.

inline (인라인 레벨 요소)

블록 요소 내에 포함되는 요소(<span>, <a>, <strong>, <img>,...)를 말한다. 주로 문장, 단어 같은 작은 부분에 사용되며, 한 줄로 나열되는 구조이다. 블록과는 다르게 좌우에만 여백을 넣는 것이 허용된다.

inline-block

글자처럼 취급되나 block태그의 성질을 가지는 요소를 말한다. block처럼 크기와 내/외부 여백 조절이 가능하다. 하지만 CSS로 성질을 바꾼 것이기 때문에 의미상으로는 인라인 레벨 요소인 것을 꼭 명심하자.

Layout

HTML5 이전에는 <div>만을 통해서 레이아웃을 구성했었고, 이 때문에 글의 구분을 짓는것이 힘들었다. 이를 보완하기 위해 HTML5 부터는 Semantic 태그를 사용하여서 문서 구조를 의미있게 작성하기 시작했다. 시멘틱하게 마크업된 문서는 검색엔진의 검색 순위에 가산점을 얻거나 로딩 속도가 향상되는 등 여러 이점이 존재하므로 사용에 익숙해지는것이 좋다.

시멘틱 태그의 종류는 다음과 같다.

<div> : 가장 흔히 사용되는 레이아웃 태그. 단순히 구역을 나누는데 사용되는 태그
<header> : 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
<footer> : 페이지 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
<main> : 사이트의 내용 즉, 주요 콘텐츠를 담는 태그. 한 페이지에 한번만 사용 가능
<nav> : 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분 나타내는 태그
<section> : 콘텐츠의 구역을 나누는 태그.
<article> : 나눠진 구역안에서 작성된 정보를 담는 태그
<aside> : 문서의 주요 내용에 간접적인 정보를 담는 태그. main, section, article 어디서든 사용 가능

이미지 출처 : https://seo.tbwakorea.com/blog/what-is-semantic-tag/

Tags

제목 태그(Heading tag)

문서 구획 제목을 나타내는 태그로 해딩 태그라고도 부른다. h1 부터 h6까지 사용 가능하다. h1태그는 페이지 내에 한번만 사용되어야 하고, 구획의 순서는 지켜져야 한다.

문단 태그

문서에서 하나의 문단을 나타내는 태그이다. 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.

<p> 문단 태그 사용</p>

서식 태그

글자의 시각적인 요소를 변경해주는 태그이며 종류는 다음과 같다.

<b> : 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해주는 태그 (시각적 목적)
<strong> : 굵은 글씨로 변경 후 강조의 의미를 부여해주는 태그 (의미론적 목적)
<i> : 텍스트를 기울여주는 태그. 텍스트가 문단의 내용과 구분되어야 할 때 주로 사용 (시각적 목적)
<em> : strong과 마찬가지로 내용을 기울임과 동시에 강조의 의미를 부여해주는 태그 (의미론적 목적))
<u> : 텍스트에 밑줄을 넣어주는 태그. 단순히 시각적인 목적이 아닌 부가적인 의미를 부여할 때 사용하는 것임을 유의하자. 시각적인 목적을 위한다면 그냥 CSS에서 수정하면 된다.
<s> : 단순히 시각적인 취소선만 추가되는 태그. 접근성 기기에 취소에 대한 안내는 하지 않음 (시각적 목적)
<del> : 문서에서 제거된 텍스트를 나타내는 태그. <ins>태그와 함께 사용하여 제거된 택스트 옆에 추가된 텍스트를 표현할 수 있다. (의미론적 목적)

링크 이동 태그

클릭하면 페이지를 이동할 수 있는 링크 요소를 만들어주는 태그이다. 문서 내/외부 모두 이동가능하다. href 속성을 사용해서 이동하고자하는 파일 혹은 URL을 작성하고, target 속성을 사용해서 이동해야할 링크를 띄울 타켓(새 창, 현재 창 등)을 지정한다.

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

멀티미디어 태그

이미지나 비디오, 오디오 같은 외부 자원을 문서에 넣을 수 있는 태그이다. 각각의 태그들은 아래 작성된 것 외에도 더 다양한 속성값을 가진다. 더 정확한 내용을 알고싶다면 구글에 명세를 검색해보면 아주 상세히 잘 나올것이니 검색해보는것을 추천한다.

<img> : 문서 내에 이미지를 넣을 수 있는 가장 기본적인 이미지 태그. 단일 태그임
- src 속성 : 이미지의 경로를 넣어서 출력
- alt 속성 : 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 출력
<figure> : 하나의 독립적인 콘텐츠로 분리하고 <figcaption>을 통해 그에 대한 설명을 넣을 수 있는 태그. 보통 이미지를 넣는데 인용문, 비디오, 오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담는다.
<video> : 문서 내에 영상을 첨부할 수 있는 태그
- src 속성 : 첨부할 비디오 경로
- poster 속성 : 비디오가 로드되기 전에 보여줄 포스터
- autoplay 속성 : 입력 시, 자동 재생을 해줌
- <source> 태그 : 여러 확장자의 영상을 준 뒤, 브라우저가 스스로 골라서 재생할 수 있게끔 해줌
<audio> : 문서 내에 소리를 첨부할 수 있는 태그. 오디오는 기본적으로 외형을 제공하지 않아서 보통 컨트롤러와 함께 작성한다.
- src 속성 : 첨부할 오디오 경로
- controls 속성 : 재생/ 정지 버튼 등이 있는 컨트롤러를 띄워줌
- <source> 태그 : 비디오와 동일한 기능
<svg> : 그래픽으로 만들어진 이미지를 사용하는 태그
- 해상도의 영향을 받지 않아 확대/축소가 자유로우며 이러한 특성때문에 아이콘이나 로고에 자주 사용된다.
- svg 파일을 불러오거나 코드를 직접 작성해서 사용하는 등 여러 사용법이 존재한다.

리스트 태그

말 그대로 목록을 만들어주는 태그이다. 순서가 없는 목록, 순서가 있는 목록, 설명 목록 3종류가 있다.

<ul>,<li> : 순서가 없는 목록 태그이며, 기본 불릿 형식으로 목록을 그린다. <ul>의 자식 태그는 오로지 <li>만 들어와야 하며, 하위 태그를 작성하고자 한다면 <li>안에 <ul> or <ol>을 사용하면 된다.

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

<ol>,<li> : 순서가 있는 목록 태그이며, 숫자 형식으로 목록을 그린다. 기본적인 사용 방식은 ul태그와 동일하다.
<dl>,<dt>,<dd> : 설명 목록 태그이다. <dt>태그를 <dd>가 설명하는 구조이며 두 태그를 <dl>이 감싸는 형식이다.
하나의 <dt>에 여러개의 <dd>가 와도 되고, 여러개의 <dt>에 하나의 <dd>가 와도 된다.

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

표 태그

말 그대로 표를 만드는 태그이다. <table>태그로 감싸진 구조이며, <tr>태그로 행(row)을 구분하고 <td>태그로 열(cell)을 구분해서 사용한다. <th>를 통해 열 제목을 작성할 수 있고, <thead>를 통해 열 제목을 모아둔 행을 그룹화할 수 있다.

<table> : 표를 선언
<tr> : 표의 행을 뜻함
<td> : 표의 열을 뜻함
<th> : 열 제목을 뜻함
<thead> : 열의 제목을 그룹화
<tbody> : 테이블 요소들을 그룹화
<tfoot> : 표 바닥글 요소 (ex. 합계)
<caption> : 표 설명 태그

<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> tfoot </td>
        </tr>
    </tfoot>
</table>

외부 콘텐츠 태그

외부 페이지를 불러올 때는 불러오는 외부 페이지에 영향을 받음을 항상 기억하자.

<iframe> : 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있게끔해주는 태그이며 src로 내/외부 문서의 경로 혹은 링크를 작성해주면 된다.

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

양식 태그

양식 태그에는 사용자로부터 정보를 수집하는 <form> 태그와 이 폼 태그를 위한 설명을 제공하는 <label> 태그가 있다.

<form> : 사용자로부터 정보를 수집하기 위한 영역을 정의하는 태그. 주로 입력 필드, 버튼 등의 폼 컨트롤을 포함한다.
- action : 폼 데이터가 제출되는 URL을 지정하는 속성
- method : 폼 데이터를 전송하는 HTTP 메소드를 지정하는 속성. 주로 GET, POST가 사용된다.
- enctype : 폼 데이터가 서버로 전송될 때의 인코딩 방식을 지정하는 속성
- target : 폼 데이터가 전송된 후 결과가 표시될 위치를 지정하는 속성. 주요 _self(현재창), _blank(새 창) 이 사용된다.
- name : 폼의 이름을 지정하는 속성. 폼이 제출될 때 폼 데이터를 식별하는데 사용된다.
- id : 폼 요소의 고유 식별자를 지정하는 속성. 값은 unique해야한다.
<label> : 폼 컨트롤과 연결된 설명을 제공하는 태그. 보통 폼 컨트롤 바로 앞에 위치한다. 이때 라벨이 지정하는 id 값은 unique해야 함을 주의하자.
<input> : 사용자로부터 데이터를 입력 받는 폼 컨트롤을 생성하는 태그. 텍스트 입력, 체크박스, 라디오 버튼, 체크 박스 등 다양한 형태의 입력 필드가 존재한다.
- button : 사용자가 클릭할 수 있는 버튼을 생성하는 태그. 버튼의 동작은 type 속성에 따라 달라진다.
- radio : 여러 옵션 중 하나를 선택할 때 사용되는 태그.
- file : 파일을 업로드할 수 있는 입력 필드를 생성하는 태그.
- checkbox : 여러 옵션을 동시에 선택할 때 사용되는 태그.
- hidden : 화면에는 보이지 않지만 폼 데이터를 서버로 전송할 때 함께 전송되는 숨겨진 입력 필드를 생성하는 태그.
<select> : 옵션 메뉴를 제공하는 태그. <option> 태그를 사용해 옵션을 정의하며, 첫번째 옵션이 셀렉트 박스의 이름이 된다.
<textarea> : 여러줄을 입력할 수 있는 대화형 태그. 보통 제목은 input을 통해 입력받고, 내용은 textarea를 통해 입력받는다.

<form action="/submit-order" method="post">
  <div>
    <label for="product">제품 선택:</label>
    <select id="product" name="product">
      <option value="phone">스마트폰</option>
      <option value="laptop">노트북</option>
      <option value="tablet">태블릿</option>
    </select>
  </div>
  <div>
    <label for="quantity">수량:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
  </div>
  <div>
    <label for="color">색상:</label>
    <input type="text" id="color" name="color">
  </div>
  <div>
    <button type="submit">주문하기</button>
    <button type="reset">취소</button>
  </div>
</form>

저작자표시 (새창열림)

'프로그래밍 > WEB' 카테고리의 다른 글

[웹 기초] 웹 스크래핑 VS 웹 크롤링 (0)	2024.04.02
[웹 기초] HTTP 와 HTTPS (0)	2024.04.02

Seung's Learning Record