HTML tag 정리2

꿈나무기록장·2021년 7월 6일
0

2021웹캠프정리

목록 보기
24/25
post-custom-banner

이전에 정리한 것 외에 새롭게 안 것을 정리해보았습니다~

title
: 해당 태그가 적용되어 있는 문구에 마우스를 올리면 tooltip처럼 내용이 뜹니다

<p title='툴팁처럼 뜬다구요'>안녕하세요</p>

안녕하세요

mailto
:링크에 걸려있는 이메일로 바로 메일을 보낼 수 있도록 함

<p><a href="mailto:mailaddress@naver.com">Send email</a></p>

Send email

특정 부분으로 건너뛰기

<p><a href="#C4">Jump to Chapter 4</a></p>
<h2 id="C4">Chapter 4</h2>

Jump to Chapter 4

저밑에 chapter4가 있어요!


map & area

  • map: 이미지맵(클릭할 수 있는 영역을 지닌 이미지)을 만드는 태그
    • area: 이미지맵에서 영역을 지정
      여기에서 예제 보기

picture
:img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용
--> 주로 반응형 웹을 만들때

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

img태그는 가장 마지막에 써야한다 <- 호환되지 않는 브라우저나 써놓은 조건에 다 안맞을때를 대비해서


base
:기준이 되는 base url/uri를 설정하여 사용

여기서 base url/uri는 링크 주소 등을 만들 경우 특정 값이 자동으로 추가되는 것과 같습니다
!base 태그 사용시 주의할 점 ---- base 태그를 적용할 경우 반드시 태그 영역 안에 사용하여야하며 또한 중복된 base 태그는 설정할 수 없습니다. 즉 하나만 사용가능합니다. 일반적으로 head 내부에서도 최상단에 선언, 위치합니다.

Chapter 4

profile
초보자가 기록하는 곳
post-custom-banner

0개의 댓글