HTML 기초

HTML 기본 문법에 대해 간단한 정리

1. HTML 태그 기초

1.1. 태그

: HTML 문법을 이루는 가장 작은 단위로, <> 사이에 태그명을 넣는 형태이다.

• 여는 태그<div>, 닫는 태그 </div>
• 스스로 닫는 태그 <input />
• 콘텐츠가 있는 문법은 시작태그와 종료태그로 감싸서 요소라고 하지만, 콘텐츠가 없는 문법은 시작태그만 사용한다.

1.2. 속성

: 태그에 어떤 의미나 기능을 보충하는 역학을 하며, 옵션이라고 생각하며 된다.

• 사용해도 되고, 안 해도 되고, 여러개를 사용해도 된다. 그러나 태그 없이 단독으로 사용할 수는 없다.
• <태그명 속성명 = "속성값">
• 속성값이 여러 개인 경우에는 하나의 큰 따옴표 안에서 쉼표로 구분해서 나열한다.

1.3. 주석

: 실행결과에는 표시되지 않지만, 코드에 메모나 설명을 넣고 싶을 때 사용한다.

• <!-- 주석 내용 -->

2.텍스트 작성하기

2.1. hn 태그

: 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다,

• <hn> 제목 </hn>
• <h1>이 가장 크고, <h6>이 가장 작다.

2.2. p 태그

: 본문의 문단을 작성할 때 사용한다.

• <p> 내용 </p>

2.3. br 태그

: 문단에서 줄 바꿈할 때 사용한다.

• 닫는 태그 없이 단독으로 <br>을 사용한다.

3. 그룹 짓기

3.1. div 태그

: 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.

• body 태그 안에 영역 구분 없이 표시하려는 텍스트만 작성하면 코드가 복잡해질수록 텍스트를 구분하기 어렵다. 그럴 때 div 태그를 사용하여 영역별로 그룹을 지으면 HTML 문서의 구조가 깔끔해진다.
• <div> </div>

3.2. span 태그

: 인라인 요소를 그룹으로 묶을 때 사용한다.

• <span> </span>
• 한 문장(ex. 이번 영화가 곧 개봉합니다.)에서 인라인 요소(영화)에만 색상을 다르게 주고 싶을 때, 공간을 분리하기 위해서 사용한다.
• <p>이번 <span>영화가</span> 곧 개봉합니다.</p>
• <section> </section>: 영역 그룹으로 묶기

4. 목록 만들기

4.1. ul 만들기

: 순서가 없는 비순서형 목록을 생성할 때 사용한다. 목록 내용은 li 태그로 구성한다.

<ul>
	<li></li>
	<li></li>
</ul>

• 이런 글머리 기호가 붙어서 출력된다.

4.2. ol 만들기

: 순서형 목록을 생성할 때 사용한다. 목록 내용은 마찬가지로 li 태그로 구성된다.

<ol>
	<li></li>
	<li></li>
</ol>

글머리 기호가 숫자형이다.(1. 2.)

4. 유저 입력

4.1. 버튼 만들기

: 클릭 이벤트를 발생시키는 입력버튼이다.

• <button> 을 사용하여 type 값에 따라 다양한 형태와 역할로 사용 가능하다.
• submit: <form>으로 감싸진 <input> 들의 값을 제출한다.

4.2. 입력받아 사용하기

: 입력받을 때 사용한다.

• <input>을 사용하여 마찬가지로 type 값에 따라 다양항 형태와 역할로 사용 가능하다.

5. 자주 사용되는 HTML 태그

5.1. 하이퍼링크

: <a>로, 다른 페이지로 연결되는 하이퍼 링크를 나타낸다.

• href: 이동할 링크
• target: 링크한 URL 표시할 위치 = _self (현재 창, 기본값), _blank (새 창)

+++ 앞으로 코드를 작성해가며 추가할 예정!