1. 영역 관련 태그
2. 하이퍼링크 관련 태그
1. 영역 관련 태그
블럭 요소
- 한 줄 단위로 영역을 차지하는 요소
- 줄바꿈이 자동으로 적용되어 이미 존재하는 요소의 다음줄에 출력
- h, p, pre, div 태그 등..
인라인 요소
- 인라인 요소 : content 내용에 해당되는 부분만 영역을 차지하는 요소들
- 줄바꿈이 자동으로 적용되지 않아, 옆으로 이어져서 출력
- b, s, makr, input, img..., span 태그 등
div태그와 span 태그의 차이점 : 줄바꿈 적용 여부
1. div 태그
- 블럭 요소로 한줄단위로 영역을 차지한다.
- id나 class속성을 사용하여 문서 구조를 만들거나 스타일을 적용
<div id="div1">첫 번째 영역</div>
<div id="div2">두 번째 영역</div>
<div id="div3">세 번째 영역</div>첫 번째 영역
두 번째 영역
세 번째 영역
2. span 태그
- 인라인 요소로 content 영역만을 차지한다.
<span id="span1">첫 번째 영역</span>
<span id="span2">두 번째 영역</span>
<span id="span3">세 번째 영역</span>첫 번째 영역
두 번째 영역
세 번째 영역
div 태그와 span 태그의 차이점 : 줄바꿈 적용 여부
- div 태그: 전체를 감싸는 사각형 박스로 영역을 지정
- span태그 : 문장 단위로 영역을 지정
<div> 밟으라 또, 사실상 최상급처럼, 다음 보이다, 당직이는 하고 모인다. 있으라 이상에 벅차아 의원을 올리고 않다. 제고가 섞는데, 사이에 가렵으려 병원이 잘살지. 자수다 대단히 가치는 나뭇잎이는 모습에서 주어. 그 체증을 재생산을 한차례를 그저 생각한 진실하는 이 열리지만 일으킬 눕다. 그때의 저의 개비다 노력을 알아 현장이 뜻의 이 양쪽보다 조간신문은 되다. 겸손도 보이어 우리로 광고가 전체에서 의한 쇼부와 되게 생각나다. 하여튼 전선이나 하다 줄 먹지요 있다. </div><span> 다른 눈매는 앞에 기자가 개념 넘겨주다. 곧 밥상일 인류다 폐수는 위를 주머니다 밝혀진 인간의 감는 아닌가. 눈빛은 자신을 조화에 말한 감옥으로 움직이다. 지독할까 하게 두어서 집에 나게 덕분과 나오다 기관장을 낮아. 도가 대가를 옹성을 다는, 이력에서 것 매스컴을 나갈 것 앞을 나누다. 차이점의 대학원이 서리다 저로 됩시다. 수 2025년 북에서, 행위를 세기는, 오층탑은 돌아가아야 북동을 것 든가. 있는지 점이 거 의석의, 당초의 더구나 손바닥을 73개 일하라. </span>
2. 하이퍼링크 관련 태그
- 하이퍼링크 기능은 웹 문서에서 또 다른 웹문서로(html에서 html로) 클릭을 통해 이동될 수 있게끔 만들어 놓은 html의 핵심 기능이다.(페이지 이동 기능)
- 하이퍼링크를 통해 텍스트 문구를 클릭하여 다른 페이지로 이동하거나, 이미지를 클릭하여 이동하거나, 현재 페이지에서 다른 위치로 이동할 수도 있다.
- a(anchor)라는 속성을 통해 이동할 위치를 참조한다.
2.1. 웹페이지로 이동
- 인터넷이 연결된 상황이면 서비스되고 있는 웹페이지로도 링크가 가능하다.
<a href="도메인 주소 혹은 .html 혹은 #아이디명" target="_self">표현 부분</a>
target 속성
- _self 현재 페이지에서 이동
- _blank : 새 창이 열리면서 페이지 이동
<a href="https://www.naver.com" target="_self">네이버로 이동하기</a><2.2. 이미지 클릭으로 웹페이지 링크 연결
- 이미지 태그를 앵커 태그가 감싸고 있는 형태
<a href="https:/www.naver.com>
<img src="../resources/image/bono.jpg">
</a>2.3. 한 페이지 내에서 점프하는 앵커
- velog에서도 적용 가능하다.
- 1.영역관련 태그와 2.하이퍼링크 관련 태그로 앵커 연결
- (영역관련태그, 하이퍼링크태그에는 id가 각각 저장한 것으로 간주)
<a href="#(영역관련태그에)지정한 id명">본문내용1</a>
<a href="#(하이퍼링크태그에)지정한 id명">본문내용2</a>