'HTML5' 카테고리의 글 목록

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서

HTML5 2023. 7. 20. 17:06

앵커 태그는 다른 문서로 이동하거나, 같은 문서의 특정 위치로 이동하거나 혹은 다른 문서의 특정 위치로 이동하는데 사용됩니다.

[ 문법 ]

1. 다른 문서로 이동하려는 경우, href 속성에 이동하려는 문서의 경로 혹은 URL을 넣고 “링크 텍스트”를 클릭하면 해당 문서로 이동하게 됩니다.

01 	<a href="url">링크 텍스트</a>
02 	<!-- 예 -->
03 	<a href="https://google.com">구글로 이동</a>
04 	<a href="../test.html">test 문서 열기</a>

2. 같은 문서의 특정 위치로 이동하려는 경우(내부 링크), href에 #를 이용해서 id값을 지정하고 이동하고자 하는 태그에 같은 id값을 써주면 된다.
여기서 “Section 1로 이동”을 클릭하면 화면이 스크롤 하면서 해당 위치로 이동하게 됩니다.

01 	<a href="#section1">Section 1로 이동</a>
02 	...
03 	...
04 	...
05 	<h1 id="section1">Section 1</h1>

3. 다른 문서의 특정 위치로 이동하려는 경우 위의 1, 2번에서 설명한 것을 모두 사용하면 됩니다.
즉 href의 url끝에 id를 추가해주면 url의 문서로 이동한 후 id값이 있는 곳을 스크롤 됩니다.

01 	<!-- test1. html -->
02 	<a href="https://test.com/test2.html#Section1">test2.html로 이동</a>

01 	<!-- test2. html -->
02 	...
03 	...
04 	...
05 	<h2 id=”Section1” >test.html에서 이동해 오는 곳</h2>

앵커 태그는 인터넷이 지금처럼 발전할 수 있도록 하는데 기반을 만들어 준 태그입니다.
초창기 인터넷은 문서의 특정 단어나 문장을 클릭하면 링크된 문서로 이동하는 기능을 이용해서 학자들 간 논문이나 문서를 효과적으로 사용하기 위해 개발되었습니다.
그것이 발전을 거듭해 지금의 거대한 인터넷이 된 것이지요. 만일 앵커 태그가 없었다면 불가능한 일이었을 겁니다.

저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ 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] meta tag 총정리 (0)	2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0)	2019.10.23

DeveloperN

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

,

[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?

HTML5 2023. 7. 20. 14:40

<!DOCTYPE> 태그는 HTML문서임을 선언하는 것으로 HTML문서의 제일 위에 작성합니다.

HTML4.01까지만 해도 다음과 같이 길어서 외워서 사용하기에는 어려움이 있었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이후 HTML5가 발표되면서 <!DOCTYPE>만 사용해도 웹 브라우저에서 HTML문서임을 인식합니다.
최근에는 에디터 혹은 통합 개발 환경(IDE)이 많이 발전하여, 단축키 등으로 자동 입력해 주기 때문에 외울 필요가 없어 졌습니다.

01 <!DOCTYPE>

[ 예제 ]

이 태그는 다음 예제와 같이 문서 제일 위에 추가해 줍니다.

01 	<!DOCTYPE html>
02 	<html>
03 	<head>
04 	  <title>HTML 문서 선언</title>
05 	</head>
06 	<body>
07 	  <div>
08 	    이 곳에 내용을 
09 	  </div>
10 	</body>
11 	</html>

저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서 (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] meta tag 총정리 (0)	2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0)	2019.10.23

DeveloperN

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

,

[ HTML Tag - A 그룹 ]  사용법

HTML5 2023. 7. 18. 18:18

주석 혹은 코멘트(comment)라고 부르며, 소스 코드의 내용을 설명하기 위한 메모를 추가하는데 사용합니다.
주석은 코드를 이해하기 쉽게 설명하거나, 특정 부분을 임시로 비활성화하는 용도로 사용하는 것이 일반적입니다.
이 태그로 감싸고 있는 내용은 웹 브라우저에 표시되지 않으며, 소스에서만 내용의 확인이 가능합니다.

[ 문법 ]

HTML 주석은 다음과 같은 형식으로 작성합니다. 한 줄 또는 여러 줄의 주석을 감쌀 수 있습니다.

<!-- 한 줄 주석 -->
<!--
여러 줄 주석 1
여러 줄 주석 2
여러 줄 주석 3
-->

[ 예제 ]

01 	<!DOCTYPE html>
02 	<html>
03 	<head>
04 	  <title>주석 예제</title>
05 	</head>
06 	<body>
07 	  <h1>웹 페이지 제목</h1>
08 	  <p>이것은 웹 페이지의 본문입니다.</p>
09 	  
10 	  <!-- 한 줄 주석입니다.  -->
11 	  
12 	  
13 	  <!-- 
14 	    여러 줄에 걸친 주석을 작성할 수도 있습니다.
15 	    또한 다음과 같이 주석으로 처리된 태그는 비활성화 되어 동작하지 않습니다.
16 	    <div>
17 	      <p>이 부분은 표시되지 않습니다.</p>
18 	    </div>
19 	  -->
20 	</body>
21 	</html>

저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서 (0)	2023.07.20
[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가? (0)	2023.07.20
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0)	2019.11.16
[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] 미디어의 크기에 따라 다른 이미지를 보여주는 <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(정의 설명) 즉, 해당 용어 혹은 단어에 대한 설명을 기입한다.

위의 출력 예를 보면 <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] block과 inline level 요소들

HTML5 2019. 11. 1. 12:16

css에서 display 속성을 사용할 때 우리는 사용하는 tag가 block-lever인지 inline-level인지를 구분할 필요가 있다. 두 요소의 특징을 살펴보면 block요소는 한 라인을 전부 차지한다. 따라서 내용이 많지 않은 block요소라도 한 라인을 전부 차지하고 복수개의 block을 사용하면 옆에 위치할 수 없기 때문에 위 아래로 배치된다.

이에 반해 inline요소는 내용의 크기만큼만 자리를 차지하고 같은 라인이지만 옆에 자리가 남는다면 옆에 위치하게 된다.

다음 포스트에서 설명할 예정이지만 이런 특징 때문에 block요소의 tag지만 inline요소처럼 배치하고 싶을 때는 inline-block속성을 사용하게 되는 것이다.

다음은 block 속성의 tag와 inline속성의 tag를 정리한 것이다.

block 속성 tag	inline 속성 tag
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>	<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

'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] 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)

,

[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰

HTML5 2019. 10. 23. 00:58

<article>과 <section>은 모두 <div>와 같은 block 속성을 갖고 있는 tag이다.

따라서 <article>과 <section> 을 모두 <div> tag로 대치해도 기능상의 문제는 전혀 없다. 이 외에도 semantic tag중 기본 구조를 구축하기 위한 <header>, <footer> 등도 모두 마찬가지이다.

다만 <header>, <footer> 등 그 뜻이 명확한 것과는 달리 <article>, <section>, <div>는 어디에 사용되어야 가장 적절 한지 명확히 구별하여 개발한 사례를 찾기가 힘들다.

시맨틱 태그를 사용하는 이유는 SEO뿐만이 아니라 개발자들의 가독성을 높이기 위한 측면도 무시할 수 없다.

이완 사용하는 것이라면 용도에 맞게 적절하게 사용하는 것이 좋을 것 같다.

각 tag의 기본적인 의미는 다음과 같다.

<article> tag는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
<section> tag는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
<div> 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다.

위와 같은 기본적인 의미를 생각 한다면 <section>안에 <article>이 여러 개 들어가는 것은 조금 부자연스러울 수 있다. 왜냐하면 서로 관련 있는 내용을 모아 놓아야 할 <section>안에 각각이 독립된 <article>이 들어가 서로 다른 내용의 독립 <article>이 배치되기 때문이다.

따라서 <article>안에 <section>이 들어가는 것이 자연스럽다.

<div>의 경우는 논리적 관계와는 무관하게 요소를 나누는데 사용됨으로 <article>과 <section> 어느 쪽의 내부에 정의하던 크게 어색하지 않다. 다만 시맨틱 태그에는 <div>태그로 사용하던 다양한 역할의 태그, 즉 aside, header, footer, nav 등 대부분을 정의하고 있기 때문에 특별한 경우가 아니라면 사용 자제하는 것이 가독성을 높이는데 유리하다.

다음은 web page내용을 구성하는 기본 구조의 예시이다.

<article>
  <h1>Article1 Heading</h1>
  <section>
    <h2>Section1 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section2 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section3 Heading</h2>
    <p>Content...</p>
  </section>
</article>

'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] meta tag 총정리 (0)	2019.10.31

DeveloperN

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

,

'HTML5'에 해당되는 글 8건

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서

'HTML5' 카테고리의 다른 글

[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?

'HTML5' 카테고리의 다른 글

[ HTML Tag - A 그룹 ]  사용법

'HTML5' 카테고리의 다른 글

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

'HTML5' 카테고리의 다른 글

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

'HTML5' 카테고리의 다른 글

[HTML5] block과 inline level 요소들

'HTML5' 카테고리의 다른 글

[HTML5] meta tag 총정리

'HTML5' 카테고리의 다른 글

[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰

'HTML5' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

DeveloperN

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 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