[ HTML ] 기본적인 태그

 

---

 

머릿글

 

<h1> 부터 <h6> 까지 있으며, 숫자가 커질수록 글자가 작아진다.

 

코딩 화면

결과 화면

​

엔터키 역할 br , 스페이스키 역할 &nbsp;

 

<br />태그는 닫는태그가 없으며 엔터를 넣을 위치에 사용하면 된다.

 

코딩 화면

 

 

결과 화면

 

HTML 주석

 

<!-- -- > 태그를 이용하여 주석을 단다.

 

코딩 화면

 

수평선 그리기 <hr />

 

문단을 의미적으로 분리하고자 할때 사용한다. ( 닫는 태그는 없음 )

 

코딩 화면

 

결과 화면

 

단락 태그

 

• <p></p> 태그로 단락 구분, 엔터가 두번이 처지는 효과
• <div></div> 태그로 단락 구분, 엔터가 한번 처지는 효과 ( div태그안에 div태그 사용 가능)
• <span></span> 태그는 영역만 구분해준다.

 

코딩 화면

 

결과 화면

 

텍스트 강조 태그

 

• <b></b> 태그는 글자를 굵게 표시하는 태그
• <strong></strong> 태그는 글자를 굵게 표시하는 태그 ( <b> 태그보다 권고한다. )
• <i> 태그는 글자를 기울여서 표시하는 태그
• <em> 태그는 강조된 텍스트를 표현
• <sub>, <sup> 태그는 윛첨자, 아래첨자 표현

 

코딩 화면

 

결과 화면

 

링크 연결 태그

 

• <a href="경로/파일명" or "url"> 태그 사용
• <a></a>태그는 하이퍼링크를 정의하고, href 속성은 링크로 이동페이지의 url을 지정

( 속성은 HTML태그에 대한 추가적인 정보를 제공해준다. )

 

코딩화면

※ <a href="./html.7z"> </a> 태그를 쓰면 다운로드가 된다.

※ < a href=""> 태그에서 target 속성을 이용하면 , 새로운탭에 결과가 띄어진다.

​

​

 이미지 삽입 태그

 

▶ 이미지를 불러올때 경로는 2가지로 나뉜다.

1) 절대경로 : 절대적인 위치

컴퓨터상에 경로 : 드라이브 경로

ex) C:\HTML\images\beach.bmp

url상에 경로 : 도메인 경로 또는 이미지( 오른쪽버튼 - 이미지 주소복사 )

​

2) 상대경로 : 현재 보고 있는 파일

현재 디렉터리에서 파일을 가져오거나 폴더로 들어갈 때 : 도트( ./)

현재 디렉터리가 아니라 한 단계 전 폴더(상위 디렉터리)에서 이미지를 가져오거나 폴더로 들어갈 때 : 도트 두 개 (../)

 

코딩 화면

 

결과 화면

 

이미지삽입 태그 사용시, 보통 상대경로를 많이 사용한다.

태그의 필수 alt 속성은 <img> 어떤 이유로 이미지를 표시할수 없는 경우,

이미지에 대한 대체 텍스트를 지정합니다.

태그의 필수 src속성은 표시할 이미지의 경로를 지정합니다.

​

※ width 는 이미지의 가로길이 , height 는 이미지의 세로길이를 나타낸다.