[2022.04.27] Web 기초 - HTML — 느리더라도 꾸준히

Web에 대한 공부를 진행 후 잊기 전 기록을 하기 위해 작성하였습니다.

기본적으로 웹 페이지를 구성하는 요소로 HTML, CSS, JS(JavaScript)를 꼽을 수 있다.

각각의 특성은 아래와 같이 정의할 수 있다.

HTML	웹 페이지의 구조를 정의
CSS	웹 페이지의 모양/표현 등 스타일을 정의
JS(JavaScript)	웹 페이지의 기능/동작 등 동적인 기능들을 정의

이 3가지를 복합적으로 사용하여 웹 페이지를 구성하게 된다.

HTML 이란?

HyperText Markup Language의 약자로써 웹 페이지를 기술하기 위한 마크업 언어
웹 페이지의 의미와 구조를 정의할 때 사용
프로그래밍 언어에 속하지 않는다.

HTML 구성 요소

태그(tag)
- 여는 태그(opening tag)와 닫는 태그(closing tag)로 구성, 닫는 태그에는 '/' 사용
- 닫는 태그(closing tag)가 없는 경우도 존재 - 이러한 태그를 "빈 요소(empty element)"라고 표현
- 태그를 사용하여 문서의 다른 텍스트와 구분
- 대소문자를 구분하지 않으나 W3C에서 소문자 사용을 권고
- 인라인(inline) 태그와 블록(block) 태그가 존재
  - 인라인(inline) 태그
    - 자신의 내용과 앞, 뒤 태그의 내용을 같은 라인에 출력
    - 줄바꿈 X
    - 내용물의 크기가 태그의 영역으로 지정
  - 블록(blcok) 태그
    - 자신의 내용과 앞, 뒤 태그의 내용을 다른 라인에 출력
    - 줄바꿈 O
    - 내용물의 크기와 상관 없이 태그의 영역 중 너비는 100%, 높이는 내용물 크기에 맞춰 지정

요소(element)
- 여는 태그, 닫는 태그, 내용을 포함
- 웹 페이지는 요소들의 집합으로 구성

속성(attribute)
- 해당 태그의 특성을 부여
- 정렬 방식을 지정하거나 링크를 거는등의 동작을 지정

HTML 기본 구조

아래와 같은 구조로 작성하게 된다.

<!DOCTYPE html>    /* 해당 문서가 html5 문서임을 선언 */
<html>    /* html 태그 열림 */
    <head>    /* head 태그 열림 */
        ...    /* head 영역 : 문서의 정보, 타이틀, 스타일시트(CSS) 등의 내용을 정의하는 영역 */
    </head>    /* head 태그 닫힘 */
    <body>    /* body 태그 열림 */
        ...    /* body 영역 : 해당 페이지에서 출력하고자 하는 내용을 정의하는 영역 */
    </body>    /* body 태그 닫힘 */
</html>    /* html 태그 닫힘 */

아래는 간단하게 작성한 html 문서이며, 해당 문서의 실제 출력 예이다.

<!DOCTYPE html>
<html>
    <head>
        <title>아메바문화의 블로그</title>
    </head>
    <body>
        <div>
            <p>아메바문화의 블로그에 오신걸 환영합니다.</p>
            <p>아메바문화의 블로그 홈으로 가시려면 <a href="https://amoeba-culture.tistory.com" target="_blank"><b>링크</b></a>를 눌러주세요</p>
            <img src="https://cdn.pixabay.com/photo/2015/05/09/23/46/welcome-sign-760358_960_720.jpg" width="480" height="270" alt="Welcome">
        </div>
    </body>
</html>

아메바문화의 블로그

아메바문화의 블로그에 오신걸 환영합니다.

아메바문화의 블로그 홈으로 가시려면 링크를 눌러주세요

자주 사용되는 태그

<html>...</html> : html 문서의 시작과 끝을 정의하는 태그
<head>...</head> : 문서의 정보, 타이틀, 스타일시트(CSS) 등의 내용을 정의하는 영역의 시작과 끝을 정의하는 태그
<body>...</body> : 해당 페이지에서 출력하고자 하는 내용을 정의하는 영역의 시작과 끝을 정의하는 태그
<title>...</title> : 웹 페이지의 제목을 정의하는 태그, 브라우저의 제목 표시줄 또는 탭에 표시
<meta>...</meta> : HTML 문서에 대한 메타데이터를 정의하는 태그, 대표적으로 charset 정의 등이 존재
<div>...</div> : 단락을 구분하거나 섹션을 나누는 용도로 사용되는 태그, 앞뒤로 줄바꿈이 배치됨
<a>...</a> : 하이퍼링크를 정의하는 태그
<script>...</script> : 클라이언트 측 스크립트(JS)를 포함하는 데 사용되는 태그
<link> : 현재 문서와 외부 리소스 간의 관계를 정의하는 태그, 빈 요소(empty element)
<img> : HTML 문서에 이미지를 포함하는 데 사용되는 태그, 2가지의 필수 속성 : src, alt, 빈 요소(empty element)
<span>...</span> : 텍스트의 일부 또는 문서의 일부를 마크업 하는데 사용되는 인라인 태그
<p>...</p> : 단락을 정의하는 태그, 앞뒤로 줄바꿈이 배치됨, 태그 내부에 인라인 태그만 사용 가능
<li>...</li> : 목록 항목을 정의하는 태그, <ol> 또는 <ul>, <menu> 태그 내부에서 사용
<ul>...</ul> : 순서가 지정되지 않은 목록을 정의하는 태그
<style>...</style> : 스타일 정보(CSS)를 정의하는 데 사용되는 태그
<br> : 줄 바꿈을 삽입하는 태그, 빈 요소(empty element)
<h1~6>...</h1~6> : 제목을 정의하는 태그, <h1>의 경우 페이지당 1개만 사용하는 것을 권장
<input>...</input> : 사용자가 데이터를 입력할 수 있는 필드를 지정하는 태그
<form>...</form> : 사용자 입력을 위한 HTML 양식을 만드는데 사용되는 태그
<nav>...</nav> : 현재 페이지 또는 다른 페이지로 연결된 링크의 집합을 정의하는 태그, 보통 메뉴, 목차, 색인등에 사용
<iframe></iframe> : 인라인 프레임을 지정하는 태그, 인라인 프레임이란 현재 HTML 문서 내에 다른 문서를 포함하는 데 사용되는 프레임
<button>...</button> : 클릭 가능한 버튼을 정의하는 태그
<strong>...</strong> : 매우 중요한 텍스트를 정의하는 태그, 해당 내용은 일반적으로 굵게 표시됨
<i>...</i> : 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트를 정의하는 태그, 해당 내용은 일반적으로 기울임꼴로 표시됨

이 외 다른 여러 가지의 태그 또는 태그들의 자세한 사용 방법은 해당 링크의 사이트를 참고

'Develop > TIL(Today I Learned)' 카테고리의 다른 글

[2022.05.24] 자료구조/알고리즘 - 재귀 (0)	2022.07.25
[2022.05.23] 모의 기술 면접 (0)	2022.07.25
[2022.05.13] OOP 심화 2/2 - 다형화, 추상화 (0)	2022.07.25
[2022.05.12] OOP 심화 1/2 - 상속화, 캡슐화 (0)	2022.07.25
[2022.04.28] Web 기초 - CSS (0)	2022.07.25

HTML 이란?

HTML 구성 요소

HTML 기본 구조

자주 사용되는 태그

'Develop > TIL(Today I Learned)' 카테고리의 다른 글

티스토리툴바