[HTML] [2] 태그(1) - <h1>, <a>, <img>, <p>

html은 기본적으로 태그(Tag)라는 기호를 사용한다. <태그종류>~</태그종류> 의 형태를 띄고 있으며, 해당 '태그종류'에 따라 해당 부분의 역할이 달라진다.

 

태그 쌍은 시작태그와 종료태그로 구성된다.

<h1>예제 소제목</h1>

에 대해서, 다음과 같이 3가지로 나누어진다.

1.<h1>: 시작태그. 태그의 시작을 나타낸다.

2.예제 소제목: 값. 해당 태그에 어떤 값이 나타나는지 보여준다.

3.</h1>: 종료태그. 해당 태그의 종료를 나타낸다.

 

 

위 태그로 만들어진 웹 페이지

 

흔히 사용되는 태그들은 다음과 같다.

1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

제목을 보여주는 태그이다. h뒤의 숫자가 커질수록 작은 제목이 된다. 사이트의 구성에 따라 가장 큰 <h1>부터 가장 작은 <h6>까지 사용할 수 있다. 순서대로 잘 구성된 제목 태그가 해당 페이지의 판단기준 중 하나이므로, 순서대로 잘 ㅏ사용하는 것이 중요하다. 가장 큰 <h1> 태그는 하나의 웹 페이지에 한번만 사용하는 것이 좋다.

 

2. <p>

단락을 출력하는 태그이다. 해당 태그로 감싼 문장이 하나의 단락으로써 출력된다. 새로운 <p> 태그마다 자동으로 줄바꿈 되어 출력된다.

 

3. <img>

이미지를 보여주는 img 태그는 종료 태그가 없는 단독 태그이다. 태그 내부에 src, alt를 입력해주어야한다.

src는 이미지가 저장된 경로를 의미하고, alt는 웹 브라우저에서 이미지를 제대로 출력하지 못했을 때 대신 출력되는 텍스트이다. 일반적으로 이미지의 이름을 alt에 넣는다. src에 사용할 수 있는 파일 경로는 상대 경로와 절대 경로가 있는데, 상대 경로는 현재 html 파일과 이미지 파일간에 상대적인 경로를 의미하고, 절대 경로는 아예 절대적으로 파일이 저장된 경로를 의미한다.

아래 코드의 경우 상대경로를 입력한 것이며, 절대 경로는 "C:/users/example.png" 정도가 될것이다.

이미지 사이즈는 css로 조절할 수 있다.

 

4. <a>

링크를 만드는 태그이다. <a href ="링크 주소">의 형태이며, 같은 폴더 내부의 다른 파일로 이동할 경우 파일 경로를 지정하기만 하면 되지만, 다른 웹 사이트의 url을 지정할 대는 앞에 "http://" 또는 "https://"를 넣어주어야한다.

태그 내부의 텍스트는 해당 링크를 누를 수 있게 해주는 부분이 된다. 한글 파일 등에서 파란색으로 줄그어져있는 링크를 생각하면 쉽다.

해당 링크를 클릭하면 구글로 간다.