자주 쓰는 기본 태그 익히기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

자주 쓰는 기본 태그 익히기

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

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

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

è <hn> 제목 </hn>

- 태그 – 텍스트 단락 만들기

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

è 텍스트

- 태그 – 줄바꾸기

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

è 텍스트

-태그 – 텍스트를 진하게 표시하기

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

è 텍스트

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

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

è 텍스트

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

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

è <img src = “fox.jpg”>

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

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

-주석 – 설명글 추가하기

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

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

'IT > 프로그래밍' 카테고리의 다른 글

HTML 문서의 구조 (0)	2016.07.22
Phaser로 웹 게임 만들기 (2)	2016.07.19
HTML - 텍스트 입력 (0)	2016.07.14
Node.js 게시물 개수 및 번호 매기기와 페이지 나누기 (1)	2016.07.13
Node.js 클라이언트의 요청에 response를 2개 보내는 방법 (0)	2016.07.11

(주)큐넷