Html 문법과 태그 알아보기

 

Html은 파일이자 문서입니다. 그리고 이 문서는, 코딩 규칙(문법)에 맞게 작성되어야 합니다.
코딩 규칙(문법)과, 규칙의 필수요소인 태그(= tag, element)를 알아봅시다.

 

 

1. 태그(= tag, element)는 여는 꺾쇠와 닫는 꺾쇠로 써야합니다.

<!-- 여는 꺾쇠와 닫는 꺾쇠가 있어야합니다. -->
<img />

 

 

2. 기본으로 닫는 태그가 있어야되지만, 몇몇 태그는 없을 수 있습니다.

닫는 태그는 /(슬래쉬)를 넣어주세요.

<!-- 닫는 태그가 있어야되지만 몇몇 태그는 없어도 됩니다. -->
<h1></h1>
<img />

 

 

3. 여는 태그와 닫는 태그 사이에 내용을 넣습니다.

<!-- 닫는 태그가 있어야되지만 몇몇 태그는 없어도 됩니다. -->
<h1>Heading(헤딩)</h1>

 

 

4. 태그 안에 태그를 넣을 수 있습니다.

여는 태그와 닫는 태그 사이에 태그도 넣을 수 있습니다. 이 때, 상위 태그는 부모(parent)태그 또는 요소(element)라 말하고, 안쪽 태그는 자식(child)태그 또는 요소(elemnt)라고 합니다.

 

이렇게 부모-자식 관계를 만들 때, 읽기 편하게 들여쓰기를 해줍시다.

<!-- 태그 안에 태그를 넣을 수 있습니다. -->
<h1>
  <span>h1 태그 안쪽으로 span 태그를 넣을 수 있습니다.</span>
</h1>

 

 

5. 여는 태그에 속성을 넣을 수 있습니다.

대표적으로 이 네가지 이유로 속성을 사용합니다. Html을 계속 만들다보면 자연스레 알아져요.

• 기본으로 태그가 제공하는 기능 사용(ex 어떤 이미지를 넣을 건지)
• Css로 스타일링하기 위한 네이밍(Selector) 지정
• Javascript/Typescript의 동작(Event)이나 네이밍(Selector) 지정
• 웹접근성을 위한 부가적인 편의기능 사용

<!-- 태그 안에 속성을 넣을 수 있습니다. -->
<img src="https://dummyimage.com/500x500/000/fff" alt="대체 텍스트" />

 

 

6. 주석을 달 수 있습니다.

주석은 실제로 .html을 실행시켰을 때, 보이지는 않지만 개발의 편의성을 위해 간략한 글을 메모해두는 역할을 합니다.

<!-- 간략한 메모를 적을 수 있습니다. -->

 

 

 

Html을 잘 작성하기 위해, 아래 네가지를 기억합시다.

• 태그 적재적소에 쓰기
• 속성 알맞게 쓰기
• 들여쓰기 잘하기
• 주석(간략한 메모) 잘쓰기

 

---

웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.

 

https://zabefofoon.github.io/mm-guide/

---

로또 번호 생성기도 만들었습니다. 한번 구경해보세요.

 

https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea

---

 

 

 

이전글: Html 파일 만들기(with Visual Studio Code)

다음글: 주요 Html 태그 알아보기