HTML3 < 2021 - 10 - 28 >

영역 관련 태그

 

block 형식- 공간을 수직 분할하는 영역

- 요소가 한 줄 모두를 차지함

- width, height 사용 가능함

- h1~ h6,p, pre, hr, div 등

 

inline 형식

- 공간을 수평 분할하는 영역

- 요소의 크기만큼만 차지함

- width, height 지정 불가

- b, strong, i, em, mark, span 등

 

 

* block / inline 차이점

1. 줄바꿈

- div(division) : 화면 영역을 나누는 용도로 사용한다. (block 형식)

- span : 줄바꿈이 일어나지 않고 다음 영역이 옆에 온다. (inline 형식)

 

2. 영역 지정 방식

- block 형식 : 줄 전체를 영역으로 가짐

- inline 형식 : 내용(content) 단위로 영역을 지정한다.

 

3. 크기 지정

<div style = "width : 200px; height: 200px; background-color: beige;">
    크기 지정 O
</div>

<span style = "width : 200px; height: 200px; background-color: gray;">
    크기 지정 X
</span>

크기 지정 O

크기 지정 X

 

* Iframe 태그

- HTML 문서 내에 다른 웹 페이지를 추가하는 태그 (inline)

 

 

이미지 관련 태그

img 태그- HTML 문서(웹문서, 웹페이지)에 사진 및 그림을 삽입할 때 사용하는 태그

 

img 태그의 속성- src : 삽입할 이미지 경로 지정 - width : 폭 지정- height : 높이 지정- alt : 이미지를 설명하는 속성, 이미지가 출력되지 않는 경우에 표시

 

* img 태그에 width, height 중 하나의 크기를 지정하면 나머지 크기도 조정된다.* 폭과 높이를 모두 지정하면 비율을 무시하고 지정한 크기대로 삽입된다.

 

고정크기 / 가변크기- 고정 크기 단위 : 화면 크기에 관계 없이 지정된 값 만큼의 크기가 지정되는 단위ex) width="200px" height="200px"

 

- 가변 크기 단위 : 화면 또는 지정된 영역을 기준으로 삼고 그에 따라 변하는 단위ex) width="20%" height="30%"

 

* img 태그는 inline 형식이지만 폭과 높이 지정이 가능하다.

 

 

하이퍼링크 관련 태그

하이퍼링크- 웹 문서가 일반 문서와 구분되는 가장 큰 기능- 클릭을 통해 연결된 다른 문서로 이동하는 방법을 편리하게 제공한다.

1) 텍스트를 클릭해서 다른 문서로 이동

2) 이미지를 클릭해서 다른 문서로 이동

3) 같은 페이지 내에서 이동

 

 

a 태그 (anchor : 닻, 고정하다)

속성

 

* href 속성 (hypertext reference) : 이동할 페이지를 작성하는 속성

* title 속성 : 링크에 마우스를 오버할 경우 설명을 나타내는 속성

* target 속성 : a 태그 클릭 시 페이지가 열리는 방법을 지정

- _self : 현재 창에서 열기

- _blank : 새 창에서 지정된 링크로 이동(새 창으로 열기)
- _parent : 부모 창에서 열기

- _top : 가장 상위 창에서 열기

<a href="https://bank-coder.tistory.com/" title="블로그 홈으로 이동" targer="-blank">
	홈페이지로 이동하기
</a>

홈페이지로 이동하기