[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그

HTML5 2019. 11. 16. 19:26
반응형

<picture>태그는 HTML5에서 새롭게 등장한 태그로서 화면 사이즈에 따라 각기 다른 이미지를 출력 할때 사용한다.

아래 코드에서 media 속성에 화면의 크기를 설정해 준다.

미디어 쿼리를 사용할 떄와 같이 min-width, max-width를 이용하여 화면 크기의 범위를 셋팅 해주면 된다.

다음 예제는

- 화면크기가 1024px이상에서는 img_01.jpg를 출력

- 768px에서 1024px까지는 img_02를 출력

- 769px이하에서는 img_03을 출력한다.

<picture>
  <source media="(min-width: 1024px)" srcset="img_01.jpg">
  <source media="(min-width: 768px)" srcset="img_02.jpg">
  <img src="img_03.jpg">
</picture>

그다지 많이 사용하지 않는 태그이기는 하지만 PC화면과 스마트폰 화면, 태블릿 화면 등에서 다른 이미지를 보여줘야 할 경우에는 유용하게 사용할 수 있다.

 

 

 

반응형

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법  (0) 2023.07.18
[HTML5] <dl> tag - definition list (정의 목록)  (0) 2019.11.13
[HTML5] block과 inline level 요소들  (0) 2019.11.01
[HTML5] meta tag 총정리  (0) 2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰  (0) 2019.10.23
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[HTML5] <dl> tag - definition list (정의 목록)

HTML5 2019. 11. 13. 21:11
반응형

<dl> tag는 <ol>, <ul>과 유사한 리스트를 정의하는 태그이다.

차이는 <ol>, <ul>의 경우 일반적으로 사용하는 순번 혹은 비 순번 리스트에 적용하는 반면, <dl>의 경우 사전처럼 특정 용어나 단어를 설명하는 리스트에 적용한다.

사용법은 다음과 같다.

<dl>
  <dt>description list</dt>
  <dd>특정 용어나 단어를 설명하는 리스트</dd>
</dl>

<dt>는 definition term(정의 용어) 즉, 용어 혹은 단어를 기입한다.

<dd>는 definition description(정의 설명) 즉, 해당 용어 혹은 단어에 대한 설명을 기입한다.

<dl> tag 출력

 

위의 출력 예를 보면 <dd>의 들여쓰기를 제외하면 특별한 특징을 발견하기 어렵다.

다만 시멘틱 태그를 적극적으로 사용하는 것이 SEO에 유리하기 때문에 용어를 정의 할때도 다른 리스트와 구분될 수 있도록 태그를 선별하는 것이 바람직 할 것이다.

 

반응형

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법  (0) 2023.07.18
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그  (0) 2019.11.16
[HTML5] block과 inline level 요소들  (0) 2019.11.01
[HTML5] meta tag 총정리  (0) 2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰  (0) 2019.10.23
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[HTML5] meta tag 총정리

HTML5 2019. 10. 31. 15:32
반응형

SEO의 출발은 meta tag이다.

html의 tag는 대부분 <body> tag 내부에 위치 하면서 노출될 웹페이지의 구조 등을 나타내기 위해 사용된다. 반면 meta tag는 <head> tag 내부에 위치 하면서 해당 페이지의 구성에 대한 정보를 기술한다.

이는 사이트를 방문하는 사용자를 위한 정보가 아니라, 검색엔진에 제공될 정보의 요약이라고 볼 수 있다.

따라서 이 meta tag를 잘 작성함으로서 검색엔진에 최적화된 사이트 제작이 가능하다.

 

[ 메타태그의 속성 ]

charset 등 몇가지 예외인 경우도 있지만 대부분 다음의 속성 두가지를 사용한다.

  • name="정보 이름" : meta 정보의 이름
  • content="정보값" : meta 정보의 내용

keywords : 페이지으 키워드

<meta name="keywords" content="html5, css3, javascrip, 강좌" />

description : 페이지으 설명

<meta name="description" content="front-end 개발과 관련된 자료 및 강좌 모음" />

subject : 페이지의 주제

<meta name="subject" content="메타태그 종정리" />

author : 페이지의 저자

<meta name="author" content="developer N" />

viewport : 페이지의 크기와 크기를 제어하는 ​​방법

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

이밖에 주요 meta 정보

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- 브라우저 호환성 -->

 

다음은 meta tag를 적용한 예시이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Meta Tag Summary</title>
  <meta charset="UTF-8" /> 
  <meta name="keywords" content="html5, css3, javascrip, 강좌" />
  <meta name="description" content="front-end 개발과 관련된 자료 및 강좌 모음" />
  <meta name="subject" content="메타태그 종정리" />
  <meta name="author" content="developer N" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
  
</body>
</html>

 

 

 

 

 

 

 

 

 

반응형

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?  (0) 2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법  (0) 2023.07.18
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그  (0) 2019.11.16
[HTML5] <dl> tag - definition list (정의 목록)  (0) 2019.11.13
[HTML5] block과 inline level 요소들  (0) 2019.11.01
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰  (0) 2019.10.23
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,
반응형

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바