HTML의 핵심 용어와 문법을 정리해보자(태그, 속성, 선택자)

코딩을 하는 데에 있어서 영어로 구글링하는 것은 필수적이다.

모든 것들을 '기억'하겠다는 생각보다는,

내가 원하는 것을 다시 검색해서 찾을 수 있도록

핵심 검색용어들만 익혀둔다면, 코딩이 어렵지 않을 것이다.

---

* HTML

HyperText Markup Language

 

html은 웹 브라우저를 통해 사람들에게 정보를 제공하기 위해 만들어진 마크업 언어이다.

 

코드의 순서배치와 논리의 흐름으로 작성하는 다른 프로그래밍 언어와 다르기 때문에,

프로그래밍 언어가 아닌 마크업 언어라고 말한다.

---

* 태그(Tag)

Syntax

<tagname>content</tagname>

 

 

HTML을 구성하는 가장 기본적인 문법이다.

 

h1~6 : 큰 제목 ~ 작은 제목

p : paragraph 문단

a : anchor 링크

div : css와 연계하여 여러 문서 '형태'를 만드는 데 쓰이는 태그

img : 이미지를 불러올 때 사용

---

* 속성(Attribute)

Syntax

<tagname attribute1="value1" attribute2="value2" ...>content</tagname>

 

 

말그대로 태그들에 속성을 부여할 때 사용하는 문법이다. 태그마다 반드시 따라다니는 속성이 있는 경우도 있고, 굳이 속성이 필요하지 않은 태그들도 있다.

 

href="URL" : a태그에는 항상 href(html reference) 라는 속성이 따라오는데, 이를 통해 URL을 삽입한다.

style="" : 태그에 CSS 코드를 직접 삽입할 때 사용한다.

src="" : img태그의 사진의 위치, 이름을 첨부할 때 사용한다.

---

* 선택자(Selector)

Syntax

<tagname id="idname"> 또는 <tagname class="classname">

(선택자는 속성(Attribute)이기도 하다. 따라서 문법이 같다.)

 

 

CSS나 JS에서 어떤 특정한 태그들만 골라서 한꺼번에 처리할 수 있도록 만드는 문법이다.

 

id="" : 태그에 고유한 ID를 설정하여 같은 ID를 가진 태그들을 css나 JS를 통해 한꺼번에 처리하는 데 사용할 수 있다.

CSS와 JS에서는 id를 불러올 때 .idname 과 같은 식으로 온점( . )을 사용한다.

 

class="" : ID와 마찬가지로 태그에 고유한 class를 지정하여 같은 class에 속한 태그들을 한꺼번에 처리하는 데 사용한다.

CSS와 JS에서는 #classname 과 같은 식으로 샵( # )을 사용한다.