HTML 문서는 웹 페이지를 올바르게 표시하는 지침을 포함한 단어들로 이루어져 있습니다. 이러한 지침은 태그라고 불리며, 어떤 블록을 표시할지를 나타냅니다.
- tag
instructions on how to display a web page properly
브라우저가 / HTML 문서를 받으면 / 태그를 분석하고 / 분석한 태그를 사용하여 이를 사용하여 우리가 볼 수 있고 상호 작용할 수 있는 요소(element)를 형성 /합니다. 다시 말해, 태그는 웹 페이지를 구성하는 벽돌입니다.
현재 HTML 명세에는 약 100개의 태그가 포함되어 있습니다.
MDN에서 모든 태그의 완전한 목록을 살펴보세요.
이 모든 것을 기억하는 데에는 시간이 걸릴 것입니다!
태그 작성 방법
태그 구문은 매우 간단합니다. 요소의 이름은 < 및 > 기호 사이에 작성됩니다. 태그 이름은 대소문자를 구분하지 않지만 소문자로 작성하는 것이 좋은 습관으로 여겨집니다.
태그의 구분
Paired tags
짝 지어진 HTML 태그는 두 가지 명령으로 구성되어 있습니다.
시작 태그(opening tag)라고도 하는 여는 태그는 블록의 시작을 표시하고 여는 슬래시 /가 추가된 닫는 태그(closing tag)로 끝납니다.
예를 들어
태그를 살펴보겠습니다. 이는 텍스트 단락을 나타냅니다:
어떤 종류의 텍스트
여기서는 시작 태그, "어떤 종류의 텍스트"는 내용이며
는 닫는 태그입니다.태그는 기본적으로 우리가 무언가를 넣을 (포함할) 수 있는 컨테이너(container)입니다. paired HTML 태그는
주로 (1)other tags (2)some information(ex:text)
container의 type을 알려주는게 태그라고 생각하면 될까?
Unpaired tags
unpaired tag는 내용이 없습니다.
그들은 페이지의 그래픽 HTML element 또는 symbols on a pag를 형성합니다.
따라서 짝 지어지지 않은 HTML 태그는 opening tag만 있습니다.
브라우저는 이 태그를 감지하면 수평 선을 그립니다.
또 다른 예로는 한 줄 바꿈을 정의하는
태그가 있습니다.
Nested tag
태그는 중첩될 수도 있습니다:
You have learned HTMLtags
Congratulations!
이 HTML 라인은 다음과 같이 렌더링됩니다:
nested tag는 초기 태그를 닫기 전에 닫혀야 합니다.(그럼 paired tag 말하는 거겠지?)
-> 안에 중첩되어 작성된 태그인, tags 가 Initial tag인,
외부 태그를 부모 요소(parent element), 내부 태그를 자식 요소(child element)라고 합니다.
Tag Attribute
개별 태그의 기능을 확장하고 더 쉽게 관리하기 위해 속성을 사용할 수 있습니다.
속성은 태그를 표시하는 방법에 대한 브라우저에 대한 설명입니다.
각 HTML 속성은 이름과 값으로 이루어져 있습니다. 다음 예제는 속성의 구문을 보여줍니다:
html
Copy code
링크
여기서 태그는 링크를 의미하고, href는 속성의 이름이며 "https://hyperskill.org"는 값입니다.
속성은 등호 =로 값을 지정합니다.
HTML은 한 단어로 구성된 경우 따옴표 없이 속성 값을 지정할 수 있습니다.
그러나 따옴표를 사용하는 것이 좋은 습관입니다.
속성 값은 이중 따옴표 ("" 또는 '')로 묶일 수 있습니다.
HTML 속성 구문의 또 다른 중요한 특징은 속성은 꺾쇠 괄호 내에 작성되어야 한다는 것입니다:
이 예에서는 이미지를 웹 페이지에 추가하는 데 사용되는 짝 지어지지 않은 태그는 브라우저에 웹 페이지의 구조에 대한 정보를 제공합니다. 태그의 이름은 소문자로 둘러싸인 <와 > 사이에 있습니다. 이들은 여는 태그와 닫는 태그, 짝 지어진 태그와 짝 지어지지 않은 태그로 나뉩니다.
각 하위 유형에는 고유한 목적이 있습니다. 태그 속성도 중요한 역할을 합니다.
속성은 태그를 정제하고 태그에 대한 추가 정보를 제공하며 브라우저를 지원합니다.
HTML에는 많은 태그와 속성이 포함되어 있습니다. 일부는 흔하고 일부는 그렇지 않습니다.
- 옳은 예
- 옳지 않은 예
<img src"img.jpg">
이유?
태그는 닫는 태그가 필요 없는 unparied tag이므로!!
