2. HTML 태그
1) HTML 태그 소개
- 존재하는 태그는 100여개가 넘지만, 실제 사용하는 태그는 한정적임
Reference
https://www.advancedwebranking.com/seo/html-study/#overview
2) 제목과 단락요소
- Heading 태그 (h1~h6)
- paragraph 태그 (p)
- Linebreak 태그 (br)
제목 (HEADING)
<h1> Hello </h1>
- 문서 내에 제목을 표현할 때 사용
- h1~h6
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Heading tags</title>
</head>
<body>
<h1>역사</h1>
<h2>개발</h2>
팀 버너스리 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀
버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이
문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반
하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에
HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와
CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을
요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다.
버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러
분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서
문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5] 그것은 머릿글자로
이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다.
하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML
GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
존재한다.[6] HTML은 동적인 웹 페이지의 웹 브라우저를 통한 문자와 이미지
양식이다. 문자 요소의 대부분은 1988년 ISO 기술 보고서 9537 SGML을 이용한
기법에서 찾을 수 있다. 하지만 SGML 개념의 일반적인 마크업은 단지 개별 효과
보다는 요소 기반이고 또한 구조와 처리의 분리(?)(HTML은 CSS와 함께 이
방향으로 점진적으로 이동해 왔다.) 버너스리는 SGML 응용 프로그램이 되는
HTML을 고안해야 했고 그것은 공식적으로 IETF(국제 인터넷 표준화 기구)에
의하여 1993년 중반, HTML 규격에 대한 최초의 제안을 간행물로 정의했다.
(버너스리와 덴 콘놀리에 의한 문법을 규정하는 SGML 문서 형식 정의(SGML DTD)가
포함된 "하이퍼텍스트 마크업 언어(HTML)" 인터넷 초안[7]) 이 초안은 6개월 후
만료된다. 하지만 NCSA 모자이크 브라우저의 인라인 이미지를 내장하는 사용자
정의 태그의 사례는 주목할 만 했고, 성공적인 프로토타입에 대한 표준을 기반한
IETF의 철학을. [8] 마찬가지로 데이브 라그렛의 경쟁 인터넷 초안인 "HTML+
(하이퍼텍스트 마크업 포맷)"은 1993년 말에 테이블과 기입양식 같은 요소들을
이미 구현하여 표준화 제안을 했다.[9] 이후 1994년 초 HTML과 HTML+ 초안은
만료되었고, IETF는 HTML 작업 그룹을 설립해 1995년에 HTML 2.0을 완성한다.
최초의 HTML의 규격은 미래에 수행될 HTML 표준을 기반으로 간주되는 경향이
있었다.[8]RFC 1996년에 HTML 2.0은 HTML과 HTML+ 초안의 아이디어가 포함됐다고
발표했다.[10] HTML 2.0 지정은 이전의 초안들로부터 새로운 버전을 구별하기
위해서였다.[11] 게다가 IETF의 후원하에 개발은 상충하는 이해 관계 때문에
지연되었다. 1996년부터 HTML 규격은 상용 소프트웨어 제작사의 투입으로 월드
와이드 웹 컨소시엄(W3C)에서 유지해 왔다.[12] 하지만 2000년부터 HTML 또한
국제 표준(ISO/IEC 15445:2000)이 되었다. 현재 W3C에 의해 발표된 최신 규격은
1999년 말에 발표된 HTML 4.01 권고안이며 2001년에 문제와 오류들이 수정되어
발표된 안이 최종 승인되었다.
</body>
</html>
단락과 개행 (PARAGRAPH, LINEBREAK)
<p>
This is first paragraph.
</p>
<p>
This is second paragraph. <br>
This is second pragraph.
</p>
- <p> 태그는 글의 단락을 나타냄
- <br> 태그는 글의 줄바꿈을 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Heading tags</title>
</head>
<body>
<h1>역사</h1>
<h2>개발</h2>
<p>
팀 버너스리<br>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀
버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의
연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는
인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는
1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그
해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께
CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로
채택 받지 못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가
사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로
두었다.
</p>
<h2>최초 규격</h2>
<p></p>
<p>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서
문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]
</p>
<p>
그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의
단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML
기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는
HTML 4 버전에서도 여전히 존재한다.[6]
</p>
<p>
HTML은 동적인 웹 페이지의 웹 브라우저를 통한 문자와 이미지 양식이다. 문자
요소의 대부분은 1988년 ISO 기술 보고서 9537 SGML을 이용한 기법에서 찾을 수
있다. 하지만 SGML 개념의 일반적인 마크업은 단지 개별 효과 보다는 요소
기반이고 또한 구조와 처리의 분리(?)(HTML은 CSS와 함께 이 방향으로
점진적으로 이동해 왔다.)
</p>
<p>
버너스리는 SGML 응용 프로그램이 되는 HTML을 고안해야 했고 그것은
공식적으로 IETF(국제 인터넷 표준화 기구)에 의하여 1993년 중반, HTML 규격에
대한 최초의 제안을 간행물로 정의했다. (버너스리와 덴 콘놀리에 의한 문법을
규정하는 SGML 문서 형식 정의(SGML DTD)가 포함된 "하이퍼텍스트 마크업
언어(HTML)" 인터넷 초안[7]) 이 초안은 6개월 후 만료된다. 하지만 NCSA
모자이크 브라우저의 인라인 이미지를 내장하는 사용자 정의 태그의 사례는
주목할 만 했고, 성공적인 프로토타입에 대한 표준을 기반한 IETF의 철학을.
[8] 마찬가지로 데이브 라그렛의 경쟁 인터넷 초안인 "HTML+ (하이퍼텍스트
마크업 포맷)"은 1993년 말에 테이블과 기입양식 같은 요소들을 이미 구현하여
표준화 제안을 했다.[9]
</p>
<p>
이후 1994년 초 HTML과 HTML+ 초안은 만료되었고, IETF는 HTML 작업 그룹을
설립해 1995년에 HTML 2.0을 완성한다. 최초의 HTML의 규격은 미래에 수행될
HTML 표준을 기반으로 간주되는 경향이 있었다.[8]RFC 1996년에 HTML 2.0은
HTML과 HTML+ 초안의 아이디어가 포함됐다고 발표했다.[10] HTML 2.0 지정은
이전의 초안들로부터 새로운 버전을 구별하기 위해서였다.[11] 게다가 IETF의
후원하에 개발은 상충하는 이해 관계 때문에 지연되었다. 1996년부터 HTML
규격은 상용 소프트웨어 제작사의 투입으로 월드 와이드 웹 컨소시엄(W3C)에서
유지해 왔다.[12] 하지만 2000년부터 HTML 또한 국제 표준(ISO/IEC
15445:2000)이 되었다. 현재 W3C에 의해 발표된 최신 규격은 1999년 말에
발표된 HTML 4.01 권고안이며 2001년에 문제와 오류들이 수정되어 발표된 안이
최종 승인되었다.
</p>
</body>
</html>
3) 텍스트를 꾸며주는 요소
<p>
<b>Lorem</b> <i>ipsum</i> dolor sit amet <br />
<u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>
- <b> : 글자를 굵게 표현 bold
- <i> : 글자를 이탤릭체로 표현 italic
- <u> : 글자에 밑줄을 표현 underline
- <s> : 글자에 중간선을 표현 strike
시멘틱 마크업
- 시멘틱 = 의미론적인
- 컴퓨터(브라우저)가 잘 이해할 수 있는 코드
<b>굵은</b> vs <strong>중요한</strong> <br />
<i>기울어진</i> vs <em>강조하는</em> <br />
<u>밑줄친</u> vs <ins>새롭게 추가된</ins> <br />
<s>중간선이 있는</s> vs <del>삭제된</del> <br />
- 의미에 맞는 요소를 사용
- 문서의 구조화
- 인간과 기계가 모두 이해할 수 있는 것이 목표
4) 앵커 요소
- HTML에서 HT(Hyper Text)는 링크를 의미하는 것으로, 링크는 클릭하기만 하면 다른 페이지로 쉽게 이동할 수 있음
- 앵커 태그는 이런 링크를 생성
- 앵커 태그를 이용해 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 수 있음
- a
- 내부 링크
앵커 (ANCHOR)
<a href="http://www.naver.com/">네이버</a>
- 다른 문서로 이동할 수 있는 링크 생성
- href: 링크의 목적지가 되는 URL을 지정
target 속성 (링크된 리소스를 어디에 표시할지 나타내는 속성)
- _self : 현재 페이지에서 바로 이동 (속성이 선언되지 않으면 기본적으로 self와 같이 동작)
- _blank : 새창 또는 새탭으로 이동
- _parent
- _top
페이지 내부 특정 요소로 이동 시에는 <a href="# id값">네이버</a>
<h1 id="top">역사</h1>
<h2>개발</h2>
.
.
.
<p>
이후 1994년 초 <a href="#top">HTML</a>과 HTML+ 초안은 만료되었고, IETF는
HTML 작업 그룹을 설립해 1995년에 HTML 2.0을 완성한다.
</p>
HTML 클릭 시, id값 있는 부분으로 이동함.
글 맨 아래에서 맨 위로 이동시키고 싶을 때, 이 방법 사용할 수 있을 듯.
<p><a href="#top">맨 위로 이동</a></p>
이런식으로!
Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
5) 의미가 없는 컨테이너 요소
- div
- span
의미없이 요소를 묶기 위한 태그(CONTAINER)
<div>
<span>Lorem</span> ipsum dolor sit.
</div>
- 별다른 의미없이 다른 목적으로 필요할 때 사용함
- <div>: block-level (한 줄을 생성해서 내용을 표현)
- <span>: inline-level (블록 레벨 요소의 한 줄 안에서 표현되는 요소
- <p>는 블록 레벨 태그
- <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그
6) 리스트 요소
- ul
- ol
- dl
UL
콩나물국 레시피
<ul>
<li>콩나물</li>
<li>파</li>
<li>국 간장</li>
</ul>
- <ul>: unordered list로 순서가 없는 리스트
OL
콩나물국 레시피
<ol>
<li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
<li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
<li>뚜껑을 넣고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
</ol>
- <ol>: ordered list로 순서가 있는 리스트
DL
<dl>
<dt>리플리 증후군</dt>
<dd>
허구의 세계를 진실이라고 믿고 거짓된 말과 행동을 상습적으로 반복하는...
반사회적
</dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대와 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
- <dl>: description list 용어를 설명하는 리스트
- <dt>: definition term 용어를 구분
- <dd>: definition description 용어의 정의를 나타냄
리스트의 중첩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>list</title>
</head>
<body>
<h1>월드컵 조 편성</h1>
<ol>
<li>
A조
<ul>
<li>러시아</li>
<li>우루과이</li>
<li>이집트</li>
<li>사우디아라비아</li>
</ul>
</li>
<li>
B조
<ul>
<li>이란</li>
<li>스페인</li>
<li>포르투갈</li>
<li>모로코</li>
</ul>
</li>
<li>
C조
<ul>
<li>프랑스</li>
<li>덴마크</li>
<li>호주</li>
<li>페루</li>
</ul>
</li>
<li>
D조
<ul>
<li>크로아티아</li>
<li>아르헨티나</li>
<li>아이슬란드</li>
<li>나이지리아</li>
</ul>
</li>
</ol>
</body>
</html>
7) 이미지 요소
이미지(IMAGE) - 빈 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>image</title>
</head>
<body>
<img src="./pizza.jpg" alt="피자" height="400" />
</body>
</html>
- 문서에 이미지를 삽입
- src: 이미지 경로 지정
- 상대 경로: ./~ ../~ (현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로)
- <img src="./images/pizza.png" alt="피자">
- 절대 경로: http://~ C:/~ (실제 그 이미지가 위치한 곳의 전체 경로)
- <img src="C:/users/document/images/pizze.png" alt="피자">
- <img src="http://www.naver.com/pizza.png" alt="피자">
- 상대 경로: ./~ ../~ (현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로)
- alt: 이미지의 대체 텍스트를 입력 (웹 접근성 측면에서 중요한 속성)
- width/heigh: 이미지의 가로/세로 크기를 지정 (자동으로 픽셀 단위로 계산)
<img src="http://placehold.it/500x250" alt="" />
<img src="http://placehold.it/500x250" alt="" width="250" />
width 속성에 값을 주면, 가로 크기가 줄어든다.
GIF vs. JPG vs. PNG
- gif: 256색으로 한적이지만 용량이 작고, 애니메이션과 투명 이미지가 가능
- jpg: 높은 압축률과 자연스러운 색상 표현이 가능하여 사진이나 일반적인 그림에 사용
- png: jpg와 비교했을 때 이미지 손실이 없고 투명과 반투명 모두 지원
다음 포스팅에 이어서 정리.
부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록
300x250
'LEARN > HTML | CSS' 카테고리의 다른 글
[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록 (0) | 2022.03.14 |
---|---|
[부스트코스] 2-2 HTML 태그 (0) | 2022.03.13 |
[부스트코스] 1 HTML 이해하기 (0) | 2022.03.10 |
[CSS] 14~15 코드의 재사용 style.css 파일 생성 실습 끝 (0) | 2022.01.28 |
[CSS] 10~13 그리드 , 미디어 쿼리 (0) | 2022.01.27 |