본문 바로가기
Web/HTML

HTML 태그 - 앵커태그, 글자 형태 관련 태그

by chaen98 2020. 9. 13.
반응형

 

HTML 태그 - 앵커 태그(a)

 

  • 인라인 방식 태그
  • 페이지 이동할 수 있는 하이퍼링크 설정
  • 텍스트나 이미지 오브젝트에 설정 가능
<body>
    <a href="http://daum.net" target="_self">다음</a>
    <a href="http://naver.com" target="_blank">네이버</a>
    <a href="http://google.com" target="_parent">구글</a>

    <a href="#">Top</a>
    <a href="#title">제목으로 이동</a>

    <h1 id="title">TITLE</h1>
</body>

 

▼ 소스코드 살펴보기

  • 2행~4행 : href 속성에 가고자 하는 url을 설정 target 속성을 이용하여 브라우저를 어떻게 실행시킬지 지정

target속성 값 
1. _self : 현재 페이지 (기본값)
2. _blank : 새로운 탭
3. _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰임
4. _top : 최상위 페이지로,  iframe 등이 사용된 환경에서 쓰임

  • 6행 : href 속성에 #을 넣으면 최상단으로 이동 (스크롤이 길 경우 맨 위로 올라가는 버튼을 만들 때 많이 사용)
  • 7행 : href 속성에 id값을 넣으면 해당하는 id를 가진 요소(9행)로 이동

id와 같은 선택자 부분은 css 부분에서 다시한번더 설명을 하도록 하겠습니다.

 

 

 

 

 

 

 

HTML 태그 - 글자 형태 관련 태그

 

태그 의미 실행결과
b 특별한 의미가 없음
기본적으로 글자가 두껍게 표시하는 태그
읽기 흐름에 도움을 주는 용도
인라인방식태그
b 태그 사용
strong 의미의 중요성을 나타내기 위해 사용
기본적으로 글자를 두껍게 표시하는 태그
인라인방식태그
strong 태그 사용
i 기본적으로 이탤리체로 표시
인라인방식태그
i 태그 사용
em 단순한 의미 강조를 표시
중첩이 가능 - 중접이 될수록 의미가 강해짐
기본적으로 이탤리체로 표시
인라인방식태그
em 태그 사용
u 밑줄있는 글자를 설정
의미없이 꾸미는 용도로 사용
인라인방식태그
u 태그 사용
sub, sup 위첨자(sup), 아래첨자(sub)를 설정
인라인방식태그
X4 + Y2, H2O
span 아무것도 나타내지 않는 콘텐츠 영역설정
인라인방식태그
span 태그 사용
del 삭제된 텍스트의 범위지정
인라인방식태그
Hello World 에 오신걸 환영합니다.
ins 새로 추가된 텍스트의 범위지정
인라인방식태그
Hello World 에 오신걸 환영합니다.

 

 

 

 

 

 

 

참고자료

반응형

'Web > HTML' 카테고리의 다른 글

HTML태그 - 입력양식태그  (2) 2020.09.17
HTML 태그 - 표 태그  (12) 2020.09.15
HTML 태그 - 목록태그  (4) 2020.09.15
HTML 태그 - 제목태그, 본문태그  (10) 2020.09.12
HTML 란?  (13) 2020.09.12

댓글