Today I Learned 6 - 링크

오늘 두번째로 쓰는 TIL
HTML 기초 개념 중에서 헷갈렸던 링크 파트를 따로 포스팅한다.

link to page

how to link

<a href="~"> </a>

• 링크로 사용할 부분을 < a >태그로 감싸준다.
• href(hypertext reference)에 연결될 링크의 정보를 속성으로 넣는다.
  
  
  
  

href에 어떤 데이터를 넣느냐에 따라 외부 링크, 내부 링크로 연결할 수 있다.

link to other web page

<a href="https://www.wikipedia.org/" target="_blank">This Is A Link To Wikipedia</a>

• href 속성에 URL을 넣는다.
• target속성을 추가하여 _blank를 넣어 새로운 윈도우 창에서 링크가 열리도록 할 수 있다.

link to relative page

-여러 웹 페이지의 html파일이 있는 경우, html파일은 한 디렉토리에 넣어관리하여 페이지 내부에서 링크가 연결될 수 있도록 한다.(=relative path)

<a href="./contact.html">Contact</a>

• ./뒤에 파일명을 붙여 넣어준다.

link to same page

한 페이지 내에서 링크를 거는 방법이다.

<p id="top">This is the top of the page!</p>    //갈 장소
<h1 id="bottom">This is the bottom! </h1>
...
<ol>
  <li><a href="#top">Top</a></li>               //장소로 가는 링크
  <li><a href="#bottom">Bottom</a></li>
</ol>

좀 헷갈려서 말을 풀어서 설명해본다..(내가 이해하기 쉽게)

• id = "top" : 가려고 하는 장소에 이름을 붙여준다
• href = "#top" : 가려는 곳을 태그하여 링크를 만든다. (target link)
  
  
  
  

readibility 가독성

잘 읽힐 수 있도록 코드를 작성하는 것은 개발자로써 필수 역량이다!
내가 쓴 코드를 다른 개발자가 읽게 되는 것 뿐만아니라,
코드가 길~~~어질때 당장 내일 나도 내가 쓴 코드를 읽기 힘든 일이 발생할 수 있기 때문....

코드를 배우다보면 자연스럽게 html문서의 가독성을 높이는 방법이다.

1) 여백 whitespace

2) 들여쓰기 identation

각 방법이 따로 정의내려지기 보다는, 상호로 섞여있는 개념이라고 생각한다.
요소들의 위계가 시각적으로 잘 느껴질 수 있도록 들여쓰기를 해서 여백을 적절하게 만들어주면 코드가 보기 좋아진다!

---

다음은 테이블을 배울 차례!
언능 HTML 끝내버려야지