깡뇽

[Front-End] HTML 배우기 : 구조 본문

Web/HTML & CSS

[Front-End] HTML 배우기 : 구조

깡뇽 2021. 1. 17. 03:16
반응형

전체 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

 

반응형
저작자표시 비영리 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

[Front-End] CSS 배우기  (0) 2021.01.19
[Front-End] HTML 배우기 : Semantic HTML  (0) 2021.01.18
[Front-End] HTML 배우기 (2)  (0) 2021.01.16
[Front-End] HTML 배우기  (0) 2021.01.14
[Front-End] 인터넷, 웹 개발, 그리고 프론트엔드 개발 (2)  (0) 2021.01.12
'Web/HTML & CSS' Related Articles more