주요 태그_1

1 minute read


주요 태그 1

오랫동안 사용돼온 태그나 사용빈도가 높은 태그들을 정리한다.



p

paragraph의 줄임말인 p태그는 html1 부터 존재한 태그로 단락을 표현할 때 사용한다.

<p>첫번째 단락, 엔터는 문서를 작성할 때 단락을 나누는 역할을 한다. 하지만 html에서는 엔터는 인식되지 않기 때문에 아무리 엔터를 써도 소스코드를 보는 사람의 눈에만 구분되지 실제 웹 페이지에는 반영되지 않는다.</p>

<p>두번째 단락, html에서 단락을 구분하기 위해서는 이렇게 p 태그를 사용하여야 한다. 이 형식은 고정되어 있지만 나중에 다룰 css를 통해서 이 형식을 자신만의 스타일로 수정할 수 있다.</p>

첫번째 단락, 엔터는 문서를 작성할 때 단락을 나누는 역할을 한다. 하지만 html에서는 엔터는 인식되지 않기 때문에 아무리 엔터를 써도 소스코드를 보는 사람의 눈에만 구분되지 실제 웹 페이지에는 반영되지 않는다.

두번째 단락, html에서 단락을 구분하기 위해서는 이렇게 p 태그를 사용하여야 한다. 이 형식은 고정되어 있지만 나중에 다룰 css를 통해서 이 형식을 자신만의 스타일로 수정할 수 있다.


br

line-break의 줄임말로 html2부터 존재한 태그이다.

새로운 행에서부터 입력이 시작되도록 하는 역할을 하며 단락을 나누는 제한적인 p태그보다 자유롭게 줄을 조절할 수 있다.

br태그는 줄을 강제로 띄우는 태그이다.<br>
단락을 구분하는 p태그보다 자유롭게 사용할  수 있는 장점이 있다.<br>한줄 띄우기<br><br>두줄 띄우기

br태그는 줄을 강제로 띄우는 태그이다.
단락을 구분하는 p태그보다 자유롭게 사용할 수 있는 장점이 있다.
한줄 띄우기

두줄 띄우기

소스코드를 찾아보면 br태그의 방식이 여러가지이다.

<br> <br/> <br />

HTML4 : <br>만 혀용된다.

HTML5 : <br> 선호, <br/>, <br />사용 가능

XHTML : <br />선호, <br/>, <br>, </br>사용 가능 </br>은 태그를 닫는 용도


img

웹 페이지에 이미지를 포함하는 태그로 html2부터 추가되었다.

무료 이미지 사이트 pixabay

<img src="경로" height="300" alt="dog" title="dog">

src : 이미지의 경로

height/width : 이미지의 높이와 너비를 픽셀단위로 조절, 둘 중 하나만 사용하면 비율에 맞춰서 사이즈가 바뀌지만 둘 다 설정하면 원본 이미지의 비율이 깨지면서 사이즈를 원하는대로 조절할 수 있다.

alt : alternative text 줄임말로 이미지가 깨졌을 때 대체하는 텍스트를 지정한다.

title : 이미지의 툴팁을 설정한다.

dog