html 태그와 html의 속성(attribute)

태그란?

태그는 '<, >' 를 사용하여 표현하고 '<>'안에 태그 이름이 들어간다. 시작하는 태그와 닫는 태그가 한 쌍을 이루는데, 닫는 태그에는 '/' 기호를 사용하여 구분해준다. 그리고 시작, 종료태그 사이에 웹에 표현할 내용을 적어준다.

<h1>제목을 표현하는 heading 태그</h1>

제목을 표현하는 heading 태그

요소(element)란 시작태그, 닫는태그, 콘텐츠를 포함한 전체를 요소라고 한다. 

mdn html 기본

속성

속성은 태그에 추가적인 정보를 줄 때 사용한다. 실제 표시되는 컨텐츠에는 나타나지 않는다. 속성은 속성명과 속성값으로 이루어져 있으며 시작태그의 태그명 뒤에서 속성명="속성값"의 형태로 작성한다.

<!-- 올바른 사용 -->
<h1 id="title">안녕하세요. html!!</h1>

<!-- 잘못된 사용 -->
<h1id="title">안녕하세요. html!!</h1> // 태그명 뒤에 공백이 없음
<h1 id="title'>안녕하세요. html!!</h1> // 따옴표 짝이 맞지 않음

태그명 뒤에 한칸의 공백을 가지고 사용하며 속성값은 따옴표(", ' 둘다 사용 가능)를 사용하여 작성한다. 단 쌍따옴표로 시작했으면 쌍따옴표로 마쳐야한다. 또, 속성은 항상 소문자를 사용하여야한다.

속성은 모든 태그에 사용이 가능한 글로벌 속성이 있고, 특정 태그에만 사용할 수 있는 속성이 있다. 또 선택적으로 사용할 수 있는 속성과 특정 태그에선 반드시 사용해야하는 필수 속성이 있다.

<a href="#"></a> //href 는 a 태그의 필수속성이며 a, link 등 특정 태그에만 사용할 수 있는 속성
<div class="wrap"></div> // class 는 모든 태그에 사용 가능한 글로벌 속성

태그중첩

html 태그는 태그안에 또 다른 html 태그를 선언할 수 있다. 

<!-- 올바른 사용 -->
<h1>안녕하세요<span>html 태그!</span></h1>

<!-- 잘못된 사용 -->
<h1>안녕하세요<span>html 태그!</h1></span>

대신 중첩하는 태그는 부모 태그 바깥에서 닫을 수 없다.  태그는 중첩하여 사용할 수 있지만 태그가 block요소인지, inline 요소인지에 따라중첩할 수 없는 경우도 있다.

빈태그

html 태그는 시작태그와 닫는태그로 이루어졌다고 했지만 닫는태그가 없는 빈태그도 존재한다. 이러한 빈 태그는 태그 중첩을 할 수 없다.(닫는 태그가 없으니까..) 빈태그는 컨텐츠를 가지고 있지 않고, 태그의 속성을 통해 컨텐츠를 표현한다. 빈 태그는 브라우저가 컨텐츠를 대체해주기 때문에 대체되는 태그(replacement tag)라고도 불린다.

하지만 브라우저에 표현할 내용 없이 다른 용도로만 사용되는 <br> 태그도 있다. 

<img src="../img/image.png" alt="image">
<input type="text" placeholder="작성해주세요">
<br>

 

html 공백

html 은 두칸 이상의 공백을 가지지 못한다.

See the Pen BaLqELE by eunhye Park (@kurepark) on CodePen.

마지막 공백이 없는 텍스트를 제외하곤 모두 동일한 결과가 노출된다.

 

html 주석

주석은 화면엔 노출되지 않지만 html 작업을 진행하면서 필요한 메모 등을 적어둘 수 있다. html 에서 주석표시를 사용해 작성한 내용은 브라우저가 인식하지 못해 화면에 나타나지 않는다. <!-- 로 시작해서 -->로 닫는다.

<!-- html 주석은 이렇게 생겼습니다. -->

 

 

---

참조

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

HTML basics - Learn web development | MDN

https://www.w3schools.com/tags/ref_standardattributes.asp

HTML Global attributes