[Front-End] HTML 배우기 : 구조
전체 HTML
☆ <!DOCTYPE html> 표시: 브라우저에서 HTML을 정의하는 것이므로 HTML파일에서 코드 첫 줄에 필수로 적어야 함.
- <html>요소: HTML 코드 모든 것을 포함.
- <head>태그: <title>과 같은 웹 페이지의 메타 데이터를 포함.
HTML의 body 내부
① 다른 웹 페이지 연결하기: <a>태그 안에 href속성을 사용하여 다른 웹 페이지의 링크를 걸어줄 수 있음.
ex) <a>태그 안에서 href속성에 제공된 경로는 보통 URL이다.
<a href="webpage's URL">This Is A Link To Webpage</a>
② 새 창에서 다른 웹 페이지 열기: <a>태그 안에 href속성이 있는 상태에서 target속성을 추가해주면 새 창에서 다른 웹 페이지를 열 수 있음.
ex) <a>태그 안에 href속성과 target속성이 있으며, target속성은 "_blank"여야 한다.
<a href="webpage's URL" target="_blank">This Is A Link To Webpage</a>
③ 내부 페이지를 연결하기: 내부 페이지 중에서 또 다른 내부 페이지를 열 수 있음.
ex) project-folder/ 안에 main.html과 sub.html이 있다면, sub.html의 내부 페이지를 연결해볼 수 있다.
<a href="./sub.html">Sub Page</a>
④ 이미지를 사용해 링크 걸기: 텍스트가 아닌 이미지를 통해 링크를 걸어둘 수 있음.
ex) 이미지에 main.html 링크를 걸고 새 창에서 열어볼 수 있다.
<a href="./main.html" target="_blank"><img src="image's URL" alt="This is the main page"</a>
⑤ 동일한 페이지의 특정 섹션으로 이동하기: id속성을 가져와 href속성에 #id를 해주면 해당 id를 가진 섹션으로 이동함.
ex)
<!-- 리스트에 링크를 걸어둠 -->
<ol>
<li><a href="#numberone">One</a></li>
<li><a href="#numbertwo">Two</a></li>
</ol>
<!-- 각 id에 맞게 연결됨 -->
<p id="numberone">This is numberone part.</p>
<h1 id="numbertwo">This is numbertwo part.</h1>
☆ 공백과 들여 쓰기
다른 개발자 또는 코드를 수정할 때 등등 알아보기 편하도록 공백과 들여 쓰기(스페이스 2번)을 하도록 한다.
☆ 주석
<!-- 내용 -->의 형식으로 주석을 작성할 수 있으며, 주석은 다른 사람들이 코드를 읽을 때 이해를 돕고 임시로 코드를 작동하지 않게 해 둘 수 있으니 유용하게 사용하도록 한다.
- HTML 디버깅
⤷ HTML과 디버깅에 관련해 이해를 도울 수 있는 글
developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
Debugging HTML - Learn web development | MDN
When writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows
developer.mozilla.org