HTML이란?
Hyper Text Markup Language의 줄임말로, 웹 페이지의 구조를 정의할 때 사용된다. 여기서 Hyper Text는 Hyper Link를 통해 어떤 문서에서 다른 문서로 이동할 수 있도록 하는 텍스트를 의미하고, Markup Language는 태그 등을 통해 문서나 데이터의 구조를 명시하는 언어를 뜻한다.
태그 (Tag)
HTML 태그는 HTML 문서를 구성하는 기본 단위이다. 요소(Element)라고 불리기도 하며, 대부분 시작태그와 종료태그가 한 쌍으로 이루어져있다.
<h1>My Favorite Things</h1>
<p>First. Animals<p>
<br>
<!-- 사진 -->
<img src="https://cdn.pixabay.com/photo/2023/02/02/13/27/cat-7762887_640.jpg">
속성
속성이란 태그에 추가적인 정보를 제공하거나 동작을 구체적으로 제어하기 위해 부여하는 설정값을 의미한다. 태그의 속성은 <태그 속성명 = "속성값"> 의 형태로 표현하며, 하나의 태그에 여러 속성을 선언하는 것이 가능하다.
<h1 id="title" class="style1">Welcome My Velog</h1>
<img src="./profile.png" alt="프로필" />
<p class="style1">HTML 공부중입니다</p>
• 속성은 순서 상관없이 자유롭게 선언 가능
• 즉, class속성과 id속성의 순서를 변경해도 동일한 결과가 출력
• <img>는 이미지를 삽입할 때 사용하는 태그
• src 속성은 삽입할 이미지의 경로를 지정
• alt 속성은 오류로 이미지가 출력되지 않을 때, 이미지 대신 보여질 텍스트를 지정
• id와 class는 특정 태그에 스타일을 지정하고 싶을 때 사용하는 속성
• id 속성은 하나의 HTML 문서에서 단 하나의 태그에만 사용 가능
• class 속성은 여러 태그에 중복으로 사용 가능
빈 태그
하지만, 시작태그와 종료태그가 한 쌍을 이루지 않는 태그도 존재한다. 바로 빈 태그이다. 빈태그는 다른 태그들과 달리 내용이 존재하지 않기 때문에 종료 태그를 사용하지 않는다.
<br>
<img src = "인터넷 주소">공백
일반적인 텍스트와 달리 HTML은 두 칸 이상의 공백과 개행을 모두 무시한다.
즉, 들어간 스페이스와 엔터 수에 상관 없이 한 번만 적용된다.
따라서 두 칸 이상의 공백을 화면에 출력하기 위해서는  를 입력해야 하고, 개행을 화면에 출력하기 위해서는<br> 를 입력해야 한다.
<h1>hello World!</h1>
<h1>hello World!</h1>
<h1>
hello
World!
</h1>
<!--위의 코드는 모두 아래와 같이 출력됨-->
hello World!
<!--두 번째 코드처럼 출력하기 위해서는 아래와 같이 입력-->
<h1>hello World!</h1>
<!--세 번째 코드처럼 출력하기 위해서는 아래와 같이 입력-->
<h1>hello<br>World!</h1>
주석
주석은 HTML 코드에 대한 설명 등을 메모하는 목적으로 활용하는 코드를 의미한다. 화면 상에는 노출되지 않고, 코드에만 나타난다.
<h1> Title </h1>
<!-- <h2> Sub </h2> 이 코드는 브라우저가 해석하지 않습니다. -->
<!-- 주석은 여러 줄로 작성 가능합니다.
VS Code 기준 주석 단축키: Ctrl + / -->
태그의 중첩
대부분의 태그는 중첩으로 사용이 가능하며 먼저 선언된 태그를 부모 태그, 나중에 선언된 태그를 자식 태그라고 부른다. 부모 태그의 종료 태그는 자식 태그의 종료 태그가 먼저 선언된 후에 선언해야 한다.
<p>HTML은 <strong>태그의 중첩</strong>이 가능해요</p>
<h1>To do List<h1>
<ul>
<li>HTML 강의 듣기</li>
<li>Velog에 내용 정리하기</li>
<li>우체국에서 택배박스 구매하기</li>
<li>3월 여행지 선정하기<li>
</ul>
• <p>는 <strong>의 부모 태그이고 <strong>은 <p>의 자식태그
• <ul>은 <li>의 부모태그이고, <li>는 <ul>의 자식태그이다.
