본문으로 바로가기

자주 쓰는 기본 태그 익히기

category IT/프로그래밍 2016. 7. 18. 14:00
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

자주 쓰는 기본 태그 익히기

 

HTML에 빠짐없이 등장하는 감초 태그들을 알아보자. 지금 배울 태그들은 <body> 태그와 </body> 태그 사이에 사용한다.

 

-<hn> 태그 제목 표시하기

제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다. 제목 크기에 따라 <h1>~<h6> 태그까지 사용할 수 있는데, <h1>이 가장 크고 <h6>이 가장 작게 표시되는 태그이다. <p>라는 텍스트 단락을 표시하는 태그를 사용해서 제목 텍스트를 만든 다음 크고 진하게 바꿔도 결과 화면은 <hn> 태그를 쓰는 것과 비슷하지만, <p> 태그는 일반 텍스트에, <hn>태그는 제목 텍스트에 사용해야 웹 표준에 맞다.

è  <hn>  제목  </hn>

 

 

 

 

-<p> 태그 텍스트 단락 만들기

웹 문서에서 가장 많이 사용하는 태그 중의 하나가 <p>태그이다. <p> 태그와 </p> 태그 사이에 텍스트를 입력하면 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락(paragraph)이 만들어진다. 반드시 닫는 태그인 </p>를 사용해야 한다.

è  <p>  텍스트   </p>

 

 

 

 

 

-<br> 태그 줄바꾸기

가장 많이 보이며 웹 브라우저에 창에서 줄 바꿈이 되도록 하려면 <br> 태그를 사용해야 한다. <br> 태그가 삽입된 위치에서만 줄이 바뀌며, 닫는 태그는 없다.

è  <b>  텍스트   </b>

 

 

 

 

 

 

 

-<b>태그 텍스트를 진하게 표시하기

<b>태그는 굵게라는 뜻을 가진 ‘bold’의 약자로, 텍스트의 앞뒤를 <b>태그와 </b>태그로 감싸면 그 부분의 텍스트가 진하게 표시된다.

è  <b> 텍스트 </b>

-<i> 태그 텍스트를 이탤릭체로 표시하기

<i> 태그 역시 텍스트 중 일부에 적용하는 태그이다. <i> 태그와 </i> 태그로 텍스트를 감싸면 해당 텍스트가 이탤릭체로 표시된다.

è  <i>  텍스트  </i>

 

 

 

 

-<img> 태그 이미지 추가하기

<img> 태그는 웹 문서에 이미지를 넣을 때 사용하는 태그로, <img> 태그 하나당 하나의 이미지를 삽입할 수 있다. 이때 <img> 태그 안에 반드시 src라는 속성을 이용해서 어떤 이미지를 삽입하는 지 이미지 파일 경로를 표시해야 한다. 닫는 태그는 없다.

è  <img  src = “fox.jpg”>

 

 

-<a> 태그 웹 문서나 외부 사이트 연결하기

현재 화면에서 다른 문서나 다른 사이트로 연결해 주는 것을 하이퍼링크’, 또는 줄여서 링크라고 한다. 링크를 만들 땐 <a> 태그를 사용하는 데, 링크로 사용할 텍스트나 이미지의 앞뒤를 <a> 태그와 </a> 태그로 감싸주고 <a> 태그 안에서 href 속성을 이용해 연결한 웹 문서 이름이나 웹 사이트 주소를 지정하면 된다.

 

 

 

 

-주석 설명글 추가하기

주석(comment)이란 나중에 자신이 작성한  HTML 소스를 보거나 다른 사람이 HTML 소스를 열어 보더라도 페이지 내용을 쉽게 이해할 수 있도록 설명글을 붙이는 것이다. 주석은 사람을 위한 것이기 때문에 웹 브라우저에서 해석하지도 않고, 나타나지도 않는다. HTML 태그에 주석을 표시할 때는 <!-- -- >사이에 원하는 내용을 쓰면 되고, 여러 줄에 걸친 주석도 가능하다. CSS에서의 주석은 HTML과 달리 /* */ 사이에 내용을 입력한다.

 

HTML5 태그 주석와 CSS주석 사용 예