HTML 기본 문법
HTML은 웹 브라우저를 통해 출력될 실질적인 내용을 담은 문서이기 때문에 문법에 맞게 작성하는 것이 중요하다. 하지만 HTML 문법 자체는 어렵지 않기 때문에 조금만 시간을 투자하면 금방 익힐 수 있다.
1. 태그(Tag)
HTML은 글자에 의미나 기능을 부여하는 마크업 언어라고 했다. 글자에 마크업을 하기 위해 HTML에서는 태그(Tag)라는 수단을 사용한다.
<!-- <p> 태그는 Paragragh의 줄임말로 문단이라는 뜻이다. -->
<p>HTML은 Hyper Text Markup Language의 줄임말입니다.</p>
<태그명>작성하고자하는 내용</태그명>위에 작성한 코드에서 웹 문서에 표시하고자 하는 내요을 <p>와 </p> 사이에 작성했다. 여기서 <p></p> 가 태그이다. 태그는 글자가 가지는 의미나 기능을 표시하기 위한 마크업 수단이다.
여기서 기억해야할 점은 여는태그 <p>로 시작해서 닫는 태그 </p>로 끝난다는 점이다. 여는 태그와 닫는 태그를 통해서 마크업되는 범위가 지정되기 때문에 반드시 이 구조를 지켜주어야한다.
<!--
이미지를 표시하는 태그.
이미지에는 글자와 같은 내용이 필요없기 때문에 닫는태그 불필요.
-->
<img src="../images/yeji.png" alt="예지 사진">경우에 따라서는 닫는 태그가 필요없는 태그도 존재한다. 주로 태그와 태그 사이에 내용이 필요없는 태그들이 닫는 태그가 필요없다.
<p>
태그를 중첩해서 사용하는 것이 <b>가능</b>하다
</p>.HTML의 태그는 중첩이 가능하다. <b> 태그에 대해서 배우지 않았지만 여기서 중요한 점은 <p> 태그 안에서 <b> 태그를 중첩하여 사용했다는 점이다.
이렇게 작성된 태그를 브라우저가 하나의 요소(Element)로 평가한다.
2. 속성(Attribute)
HTML은 속성(Attribute)를 통해서 태그가 수행하는 특정 기능에 사용될 값 등을 부여할 수 있다.
<!-- href 속성에 부여된 주소로 이동하는 태그 -->
<a href="www.google.com">Google</a>위의 작성된 코드처럼 속성이름=”속성값”의 형태 즉, 키=값 쌍의 형태로 작성한다. 주의할 점은 띄어쓰기를 통해서 태그명과 구분을 지었다는 점이다.
<!-- 속성이 여러개인 경우 띄어쓰기로 구분한다. -->
<img src="../images/yeji.png" alt="예지 사진">
<audio src="../audios/sneakers.mp4" autoplay loop/>속성과 속성 간에도 같은 이유로 띄어쓰기를 해주어야한다. “”로 값을 지정한 경우에는 “”안의 내용이 속성값을 의미하기 때문에 띄어쓰기를 안해도 문제가 안생기지만 두번째 태그처럼 값을 따로 지정하지 않는 속성도 있기 때문에 항상 띄어쓰기를 해주는 것이 좋다.
