디자인 모든 것/HTML

[HTML기초] 개행 태그, 앵커 태그 기본내용 정리

Do_Do!! 2017. 8. 14. 15:58

▶ [HTML5] 개행 태그, 앵커 태그 기본내용

 

 

1. 개행 태그

 

개행 태그인 <br>태그는 문단의 내용이 긴 경우 단락을 띄어주고자 주로 사용하는 태그입니다. 이 태그는 HTML5로 넘어오면서 </br>을 사용 없이 <br>만 사용해도 적용이 되는 것을 확인하 실 수 있습니다.

 

 

위의 코딩을 저장하여 브라우저로 확인을 해보면

 

 

문단 단락이 띄어서 출력되는 것을 확인 하실 수 있습니다.

 

여기서 잠깐~! 간단한 설명

 

이것은 꿀팁아닌 꿀팁(?) 일수도 있겠지만 코딩을 한 후 되도록 익스플로러, 크롬, 파이어폭스, 오페라, 사파리 등 다양한 브라우저로 확인을 하는것이 좋습니다. 대신 브라우저 상에서 탐색기를 통해 오류나는 부분을 파악하고자 할 때에는 제 생각으로는 익스플로러 보다는 파이어폭스나 크롬을 추천해 드립니다.^^ 익스플로러에 비해 크롬이나 파이어폭스 탐색기는 보기 좀 더 쉽고 빠르게 파악하기가 용이해 추천드리며 탐색기를 보고 싶을 경우에는 브라우저 상에서 "F12"를 눌러주시거나 또는 오른쪽마우스를 클릭하셔서 "페이지 요소검사" 를 하시면 확인 하실 수 있습니다.

 

 

2. 앵커 태그

 

앵커 태그는 <a>태그로 하이퍼링크 태그라고 불립니다. 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치를 이동할 때 사용하는 태그 입니다.

 

<a>태그만 사용한다고 해서 웹 페이지가 이동하지는 않습니다. 여기에 'href' 속성을 사용하여 이동하고자 하는 웹페이지를 지정해 줘야 합니다.

 

 

위와 같이 href속성을 사용하여 이동하고자 하는 웹 페이지의 링크를 걸어줍니다. 코드를 실행하고 a태그로 지정되어있는 '네이버, 다음'을 클릭해 주면 해당 웹페이지도 이동하시는 것을 볼 수 있습니다.

 

 

브라우저에서 확인해 보면 위와 같은 이미지를 확인 하실 수 있습니다. 명칭에 언더라인으로 표시되어있는것은 <a>태그 고유의 성질때문에 저렇게 보여지는 것으로 저 부분은 CSS를 통해 안보이게도 처리가 가능합니다^^

 

빈 링크 사용이란?

 

 

보통 <a>태그는 다른 웹 페이지 이동을 위해 사용하는 경우가 주 목적이지만 하이퍼링크 기능을 제거하고 사용하는 경우도 있습니다. 위의 이미지에서 처럼 href속성 값에 "#"을 입력해 주면 됩니다.

이것을 "빈 링크" 라고 하여 웹 페이지 이동링크가 확실히 정해져 있지 않을 때 주로 사용합니다.

그렇지만 홈페이지를 제작하면서 웹표준을 따르려면 a태그에 href속성을 반드시 입력을 해야합니다.

 

누구나 파워지식인이 되는 그날까지, 늘보지식인

#Copyleft(C)는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힘니다#