● Block Tag와 Inline Tag
html은 블럭 태그와 인라인 태그로 나뉜다
Block Tag
- Inline Tag를 포함할 수 있고 다른 블럭 태그도 일부 포함할 수 있다
- 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height,
margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다 - 블럭 태그 다음에는 줄바꿈이 이루어진다
Inline Tag
- 항상 블럭 태그 안에 포함되어 있으며 인라인 태그 안에 다른 인라인 태그가 포함될 수 있다
- 컨텐츠가 차지하는 공간만큼의 넓이를 가진다(임의로 width, height로 변형을 줄 수가 없다)
- line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌측, 우측 정렬을 할 수 있다
- 인라인 태그 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다
● Hyper Link(하이퍼 링크)
html 페이지에서 다른 html 페이지를 연결하리는 고리를 하이퍼 링크라고 부른다
하이퍼 링크는 텍스트나 이미지에 다른 웹 페이지의 주소를 닫아서 만든다
글자와 그림에 하이퍼 링크를 만들어 다른 웹 사이트로 연결하거나 이미 만들어진 html 문서를 연결한다
하이퍼 링크는 같은 사이의 다른 html 페이지뿐만 아니라 다른 웹 사이트에 있는 웹 페이지를 연결하기도 한다
하이퍼 링크를 따라 다른 웹 페이지로 이동하는 것을 Navigation Hyper Link라고 부르기도 한다
■ 하이퍼 링크의 색상 지정
html 페이지의 <body>에서 하이퍼 링크의 각각 상황에 따른 색을 지정해 줄 수 있다
<body link="색상" alink="색상" vlink="색상">
- link : 방문하지 않은, 처음 들어가는 링크 상태
- alink : 링크를 누르고 있는 상태
- vlink : 한 번 링크를 방문한 상태
● Name Anchor(책갈피)
문서의 내용이 길어질 경우 문서의 정해진 위치를 미리 지정한 후 하이퍼 링크를 걸어서 문서의 위치로 이동하는 기능을 처리한다
■ 네임 앵커 지정하는 방법
- 이동할 위치를 지정한다
<a name="section">이동할 위치 - 이동시킬 버튼을 만들어 준다(버튼이 아니어도 된다)
<a href="#section">이동시킬 버튼
■ 네임 앵커의 name 속성
a 태그의 name 속성 자체는 id의 역할을 한다. 그래서 실제로 a태그의 name 속성 대신 id 속성에 매핑해주어도 책갈피가 동작한다
대신 다른 태그의 id에 a태그의 name과 동일한 이름을 부여하면 id가 두 개인 것으로 인식하여 동작하지 않는다
ID를 이용할 때
목적지 요소가 a, div, span등 모두 가능
- 목적지 : id="아이디 명" 표시
<div id="1">목적지</div> - 출발지 : href="#아이디 명" 표시
<a href="#1">출발지</a>
NAME를 이용할 때
목적지 요소가 a인 경우만 가능
- 목적지 : name="네임 명" 표시
<a name="1">목적지</a> - 출발지 : href="#네임 명" 표시
<a href="#1">출발지</a>
'html§CSS' 카테고리의 다른 글
| HTML의 태그들(4) (0) | 2020.06.15 |
|---|---|
| HTML의 태그들(3) (0) | 2020.06.14 |
| HTML의 태그들(2) (0) | 2020.06.12 |
| HTML의 태그들(1) (0) | 2020.06.11 |
| HTML이란 (0) | 2020.06.11 |
