[코딩 독학 일기/HTML] 2. Codecademy - HTML Document Standards
1. HTML 준비(Preparing for HTML)
html을 작성할 때 가장 먼저 작성될 코드들이 html임을 다음과 같이 선언해야 한다.
<!DOCTYPE html>
2. <html> Tag
html을 구축하기 위해서는 다음과 같은 선언이 필요하다.
<!DOCTYPE html>
<html>
</html>여기서 <html> tag 사이에 있는 코드는 전부 html로 인식하게 된다.
3. Head
<head> Tag는 다음과 같이 작성한다.
<head>
</head>이 Tag 사이에 있는 모든 코드는 웹페이지에 직접 표시되지 않는 Meta Data들이다.
4~5. 페이지 제목(Page Titles)
<title> tag 사이에 작성한 내용은 페이지의 제목이 된다.
예를 들어 현재 작성 중인 페이지의 제목은 "글쓰기"이기 때문에 브라우저 상단에 사진과 같이 표시가 된다.
작성방법은 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>My Coding Journal</title>
</head>
</html>
6. 다른 웹페이지에 연결(Linking to Other Web Pages)
<a> tag 를 활용하여 다른 웹페이지를 연결할 수 있다.
코드 작성방식은 다음과 같다.
<a href="https://www.wikipedia.org/">Learn More</a>이렇게 하면 웹페이지에 Learn More라는 웹사이트로 이동하는 문장이 생긴다.
이를 누르면 https://www.wikipedia.org로 이동하게 된다.
7. 새 창에서 링크열기(Opening Links in a New Window)
이 전에 사용한 코드는 해당 웹페이지를 다른 웹페이지로 이동시킨다.
하지만 다음과 같이 target="_blank" 코드를 추가하면 새 창에서 웹페이지를 여는 것이 가능하다.
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>
8. 관계 페이지에 연결(Linking to Relative Page)
지금까지는 외부 페이지에 연결하는 방법이었다면 이번에는 내부 페이지로 연결하는 방법이다.
우선 한 프로젝트 폴더 안에 관련 페이지 html 파일을 저장해야 한다.
project-folder/
|—— about.html
|—— contact.html
|—— index.html그 후 다음과 같이 연결할 URL 앞에 ./를 추가하여 이전과 똑같은 방법으로 코드를 작성한다.
<a href="./contact.html">Contact</a>
9. 마음대로 연결(Linking At Will)
앞선 과정에서는 URL을 연결할 때 텍스트만을 활용했다.
하지만 다음과 같이 작성하면 텍스트 뿐 아니라 이미지에도 URL을 연결할 수 있다.
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>
10. 같은 페이지에 연결(Linking to Same Page)
해당 페이지 안에서도 바로바로 이동하도록 하는 것이 가능하다.
우선 다음과 같이 id를 지정해준다.
<p id="top">This is the top of the page!</p>
<h1 id="bottom">This is the bottom! </h1>이후 다음과 같이 리스트에 앞서 id를 통해 정의한 곳으로 이동하도록 하는 것이다.
<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol>이를 가장 잘 볼 수 있는 웹사이트는 나무위키다.
나무위키는 목차에서 보고싶은 부분을 클릭하면 바로 해당 내용을 볼 수 있도록 이동할 수 있다.
마무리
이후 강의 내용은 들여쓰기, 띄어쓰기, 주석 등 코드들을 보기 좋게 정리하는 방법에 대해 배운다.
저번에 이어 html의 기초 강의였으며 아직까지 어려운 부분은 없다.
다음은 퀴즈를 풀고 간단한 프로젝트를 진행하는 것 같다.
더 열심히 해봐야겠다.
'코딩 독학 일기 > HTML' 카테고리의 다른 글
| [코딩 독학 일기/HTML] 1. Codecademy - Itroduction to HTML (0) | 2021.02.23 |
|---|