HTML 핵심 개념 뽀개기 (1) 코멘트, 링크

코멘트 <!-- -->

메모를 남길 때 사용 

코드를 잠깐 감추고 싶을 때 코멘트 안에 넣어 사용

단축키: Cmd + /

주석과 같은 역할을 한다고 느껴짐 (c언어에서의 // 와 같은 역할 )

 

링크

페이지와 페이지 연결 

a라는 태그를 사용하여 사이트 전체 주소를 <a href="www. ~~"> 로 작성

작성하고 있는 html 파일 외에 또다른 html 파일이 존재한다면 html파일과 html 파일을 연결하는 것도 가능

 

웹 브라우저 입장에서 index.html은 파일 이름이므로 현재 브라우저에 있는 폴더는 최상위(= /)이다.

 

contents.html라는 경로로 이동하면 나서의 주소를 보면 / 다음에 contents.html이 붙는다

 

movies라는 폴더에 contents.html을 집어 넣은 후 경로를 작성할 때 movies/contents.html로 표현할 수 있다. 

이때 실행해보면 movies/contents.html 라는 코드가 뒤에 붙어서 movies 폴더 안에 있는 contents.html 파일을 보여 준다는 뜻이 된다. 

 

현재 폴더 나타내기

./찾고자하는파일

 

부모 폴더 나타내기

../찾고자 하는 파일 

 

부모 폴더를 여러개 써야 할 경우 

../../ ..

 

최상위 폴더로 나타내기

/찾고자 하는 파일 

 

 

 

 

 

페이지 안에서 이동하기 

예를 들어 h2태그의 아이디로 이동하는 방법으로는 

<a>태그를 사용하여 <a href=#h2아이디> 로 작성하면 된다.

이때 중요한 점은 아이디 앞에 #을 붙여줘야 한다는 것이다. 

 

새로운 창 열기

아래 사진 처럼 <a> 태그 안에 target = "_blank" 를 적어주면 새 창(새 탭)으로 열린다.

 

<a>태그 안에 target="_blank" 를 적어주면 현재 창에서 열린다.

(=target을 정해주지 않을 때와 동일)

 

이메일 보내기

<a href="mailto:example@example.com">메일 보내기</a> 

 

전화 걸기

<a href="tel:+821012340123">전화 걸기</a>

형식으로 <a>태그 안에 적어 사용할 수도 있다.