3. HTML 코드 기초 문법은 뭐여?

HTML은 언어다.

한국어나 영어처럼, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 해야한다.

 

가장 중요한 것, 태그(tag)

태그란?

HTML 코드에서 정보(콘텐츠)를 정의하는 형식이다.

 

HTML 태그 사용법 

1. 시작과 끝

<>과 </> 기호를 사용해 콘텐츠를 감싸며 시작과 끝을 표시한다.

ex) <태그명>여기에 콘텐츠를 기입합니다</태그명>

     -> 여는 태그와 닫는 태그가 같아야 한다.

 

2. 단일 태그

경우에 따라서는 시작과 끝을 구분할 필요가 없는 태그도 존재하는데 그것이 바로 단일태그이다.

ex) <태그명/> or <태그명>

-> 단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.

 

3. 속성

태그의 부가적인 기능을 정의하는 것으로, 선택사항이다. 

주로 속성은 시작태그의 내부에 정의하며, 개수에는 특별한 제한은 없다.

ex) 여는 태그에 속성을 추가한 태그는

      <태그명 속성명="속성값">내용이 들어감</태그명>

      단일태그는

      <태그명 속성명="속성값"/>

-> 태그명과 속성의 정의는 공백(space)로 구분하며, 속성값은 큰 따옴표를 사용

 

4. 주석

편집기에는 보이지만, 웹브라우저에는 보이지 않는 코드이다.

주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

총 7개의 기호가 사용된다.

ex) <!--이 사이에 작성한 내용은 주석으로 처리된다.-->

     -> 형식이 다르긴 하지만, 주석 또한 기호를 통해 시작과 끝을 구분한다.

 

실습

1. <p></p>

기본적인 출력

 

2. <strong></strong>

강조

 

3. <br>

 

공백

<br>을 더 추가하면?

공백공백

 

3. 속성

빨간색이라는 스타일 추가!

속성을 추가할 땐

1. 여는 태그에 추가한다.

2. 태그와 속성은 공백(space)로 구분해 준다.

3. 속성값은 큰따옴표("")를 사용한다.

 

4. <!--   --> (주석)

주석은 웹브라우저에서는 안보인다!

 

https://youtu.be/dOpFU0apoes

*유노코딩님 영상을 통해 공부 중입니다.