블록 레벨 요소
줄 바꿈이 있는 것
인라인 요소와 텍스트 요소를 자식으로 쓸 수 있음
ex) <p><a>어쩌고 </a></p>
같은 블록 요소라도 자식으로 사용할 수 있는 것이 있고 아닌 것이 있음
<h1>, <h2>, <p> 태그 등이 있다.
인라인 요소
줄 바꿈이 없는 것
인라인 요소와 텍스트 요소만을 자식으로 쓸 수 있음
블록 레벨 요소는 자식으로 못 씀
html 5에는 좀더 복잡한 콘텐츠 모델이라는 것으로 대체되었음
HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
Every XML and HTML document in an HTML UA is represented by a Document object. [DOM41] The Document object’s URL is defined in the DOM specification. It is initially set when the Document object is created, but that can change during the lifetime of the
www.w3.org
a태그
인라인 요소
다른 HTML 문서로 이동 ( 외부링크 )
동일한 HTML 문서 내에서 이동 ( 내부 링크 )
이메일 주소 링크
href 속성은 목적지 지정
인라인 요소이기 때문에 블록 레벨 요소는 원래 자식으로 포함할 수 없지만
HTML 5 에선 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<h1>a 태그</h1>
<a href="http://www.naver.com">네이버</a>
<a href="#content">본문 바로가기</a>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<h1>자리 채우기</h1>
<a href="#">
<section>
<h2>멍멍</h2>
<P>야옹</P>
</section>
</a>
<p id="content">본문 바로가기 누르면 나타날 내용</p>
</body>
</html>
<h1>은 블록 레벨 요소이기 때문에 줄바꿈이 일어남
<a>태그는 줄바꿈이 없는 인라인 요소이기 때문에
한줄에 연달아 링크가 나타나게 됨
<a href="www.naver.com">네이버</a> => 외부 링크 방법
<a href="#content">본문 바로가기</a> => 내부 링크 방법
# : id의 속성의 기호
content : id 속성
id=content 인 곳으로 이동하라는 뜻
본문 바로가기를 클릭하면
문서 가장 하단의 <p id=content>본문 바로가기 누르면 나타날 내용</p>로 이동하게 된다
문서의 내용이 길어져서 콘텐츠의 내용이 보이지 않을 때 문서 내 위치 이동을 위해서 사용함
-> 건너뛰기 링크 ( Skip Navigation ) 이라고 한다
: 반복적인 영역을 건너뛰고 핵심적인 컨텐츠 영역으로 바로 갈 수 있는 수단을 만들어 주는 것
인라인 요소이지만 h2, p 태그와 같이 블록 레벨 요소도 포함할 수 있다.
#을 사용하면 클릭시 웹문서 최상으로 이동함
<a href="javascript;;">로 처리하면 이동을 막을 수 있다고 함
멍멍과 야옹을 누르면 문서 최상단으로 이동한다.
target 속성
링크된 html문서를 어떻게 브라우저에 보여줄 것인지에 대한 속성
_self, _blank, _parent, _top 등이 있는데 _blank를 가장 많이 사용한다고 함
_blank는 링크된 웹 문서를 브라우저에서 새 탭(새 창)으로 보여줌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<h1>a 태그</h1>
<a href="http://www.naver.com" target="_blank">네이버</a>
</body>
</html>
출처 : 반응형 웹 실전 프로젝트 가이드
'Web > HTML CSS JS' 카테고리의 다른 글
| HTML - form, input type 속성, text area, select, 주요 입력 속성 (0) | 2020.10.22 |
|---|---|
| html - map, text, list, table (0) | 2020.10.21 |
| Java Script - 비동기 프로그래밍 2 (async, await, Promise API (all, race)) (0) | 2020.09.28 |
| Java Script - 비동기 프로그래밍 1 (callback, promise) (0) | 2020.09.25 |
| Java Script - JSON (0) | 2020.09.25 |