기본 문법과 여러가지 태그들

HTML의 기본 문법과 태그들에 대해서 알아봅시다.

페이지 가이드 라인

<!doctype html> : HTML의 문서 규격을 표시 할 때에는 DOCTYPE 이라는 것을 통해 표현하게 됩니다. HTML5 문서는 아래와 같은 코드를 문서 최상단에 쓰면서 HTML5임을 정의합니다.

<html> </html> : html의 시작을 알리는 태그

<head> </head> : 웹에는 표지되지 않지만 페이지에 대한 메타데이터(metadata)를 포함하는 태그

메타 태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그입니다. 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있고, 이를 활용하여 검색엔진을 최적화 할 수 있다.(SEO)

닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공합니다.

메타요소 와 <meta> 속 contents

<body></body> : 웹 페이지의 내용이 들어가는 태그

<title></title> : 웹 페이지의 제목을 나타내는 태그 , <head> 태그와 대조적으로 태그 속 내용들이 브라우저 화면에 보인다.

다음 예시를 살펴보자.

<body> 이하 태그들

제목 표시 <h1>~<h6>

제목을 크기 순서대로 <h1>,</h1> ~<h6>,</h6>

<br>태그와 <pre>태그

기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다. (=한 줄로 연이어 나옵니다)

줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령을 적어 주어야 하며, HTML에서는 <br>를 통하여 줄바꿈을 합니다.

실제 줄바꿈이 그대로 반영되게 하고 싶을 때가 있을 것입니다.이때는 <pre>태그를 사용하면 됩니다.

(주의) <pre>태그는 줄바꿈 뿐만 아니라 띄어쓰기, 탭 등 원래 무시되던 문자들이 그대로 출력되게 됩니다.

<p> 태그

<p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.

<b> 태그

<b></b> 태그는 글자를 굵게 표시하는 태그로, bold의 약자입니다.

<strong></strong>태그도 같은 기능을 하며 최신 표준은 <b> 태그 보다는 <strong> 태그를 권고 하고 있습니다.

CSS에서 font-weight을 bold으로 설정하는 것과 같은 효과를 나타냅니다.

<i>태그

<i></i> 태그는 글자를 기울여서 표시하는 태그로, italic의 약자입니다.

CSS에서 font-style을 italic으로 설정하는 것과 같은 효과를 나타냅니다.

<li> 태그

<li></li> 태그는 list의 약자로, 목록을 만드는 태그입니다.이 태그는 단독으로 쓰이지 않으며 <ul></li> 혹은 <ol></ol> 태그 내부에 들어갑니다.

<ol> 태그는 번호를 메겨 순서가 있는 (ordered list) 목록을 만듭니다.

<ul> 태그는 순서없이 모양으로 (unordered list) 목록을 만듭니다.

<li> 태그는 단순히 리스트 나열 뿐만 아니라 메뉴등을 만들때도 사용합니다.이중 리스트를 만들기 위해서는 <ul>이나 <ol>하위에 다시 <ul>이나 <ol> 태그를 쓰면 됩니다.

<a>태그

<a> </a> 태그는 anchor의 약자이고, 하이퍼링크를 걸어주는 태그입니다.

속성

href: 클릭시 이동 할 링크, href는 HyperText Reference의 약자이다.

target: 링크를 여는 방법

_self: 현재 페이지 (기본값)

_blank: 새 탭

_parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.

_top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.

프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다.

예제1. 네이버와 구글로 이동하는 태그 (단, 네이버는 클릭할 경우 현재 페이지에서 이동. 구글은 새 탭에서 페이지 열기. )

<img> 태그

<img /> 태그는 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정합니다.

이미지 파일이 src 속성에서 지정한 경로에 없을시, 이미지는 출력되지 않거나 엑스박스가 뜨게 됩니다.

속성

src: 이미지의 경로

width: 이미지 가로 크기

height: 이미지 세로 크기

<div> 태그

<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰입니다.

다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰입니다.

<span> 태그

<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다.

<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다.이 둘의 차이를 쉽게 설명하자면, <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않다는 점입니다.

CSS display properties

줄바꿈 태그

<br> : 가장 일반적인 줄바꿈 태그

<wbr> : 하나의 절 단위로 줄바꿈 되는 태그

<nbr> : 절대 줄바꿈 되지 않는 태그. 웹 크기가 달라져도 줄바꿈이 되지 않는다.

폰트 스타일 태그

밑줄 (underline) : <u></u>

출처 : 생활코딩 WEB1

WEB1 - HTML & Internet - 생활코딩

opentutorials.org

이전으로 돌아가기

HTML5

홈으로 돌아가기