HTML&&CSS

HTML 태그(1)-heading 태그 외

꽃달린감나무 2022. 5. 12. 19:19
728x90
  • 제목(heading) Tag
     
    • 문서 내 제목을 표현할 때 사용
    • <h1><h2>...<h6>( 숫자값이 높아질수록 작은 값을 나타내는 소제목을 나타낼 때 사용)
<h1>Heading</h1>
  • 단락, 개행 태그
<p>i have...</p>
이란<br>
대한민국<br>
미국
  • <p> 태그는 글의 단락을 나타낼 때 사용
  • <br> 태그는 개행을 나타내는데 사용
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>heading tags</title>
</head>
<body>
<h1 id = "history">역사</h1>
<h2>개발</h2>
<p>
<h3>팀 버너스리</h3>
<br>
1980년, 유럽 입자 물리 연구소... 두었다.</p>

결과값 :

heading tags

역사

개발

팀 버너스리


1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.

 

 

  • <i>, <b> <u>... 태그
    • <i> : 글자를 이탤릭체로 표현
    • <b> : 글자를 굵게 표현
    • <u> :  글자에 밑줄을 표현
    • <s> : 글자에 중간선을 표현
<p>
	<b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
	<u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

 

 

 

HTML elements reference - HTML: HyperText Markup Language | MDN

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

 

 

  • 앵커(ANCHOR)
<a href = "http://www.maver.com" target = "_blank">Maver</a>
  • 다른 무선로 이동할 수 있는 링크를 생성
  • herf : 링크의 목적지가 되는 URL을 지정한다.
  • target속성은 링크된 리소스를 어디에 표시할지 나타냄
    • _blank : 새 창에 나타낸다
    • _self : 현재 창에 나타낸다.(target값을 따로 설정하지 않으면, _self값이 default값으로 설정
  • 내부링크 : 내부 특정요소로 초점을 옭김
<a herf = #(속성값)>역사</a>
<h1 id = "history">역사</h1>
<h2>개발</h2>
	.
	.(생략)
	.
<ul>
	<li><a href="#history">역사</li>
</ul>

결과값 : 아래에 역사를 누를면 역사 쪽으로 초점이 오는 것을 확인하실 수 있습니다!!

heading tags

역사

개발

팀 버너스리


1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.

최초 규격

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년에 문제와 오류들이 수정되어 발표된 안이 최종 승인되었다.

피자

 

 

  • 요소를 묶기위한 태그
    • 요소들을 묶기위한 태그로 속성(id, class)값을 부여하기 위해 사용 (개인적인 의견입니다!)
    • 구역을 나누기 위하여 사용 (개인적인 의견입니다!)
    • <div>
      • block-level ( 위에서 아래로 쌓여지는 구조)
    • <span>
      • Inline-level (왼쪽에서 오른쪽으로 나열되는 구조)
	<div>
		<span id = "11">Lorem</span> ispsum dolor sit amet
	</div>

 

 

  • 리스트 태그
    • <ul> : 순서가 없는 태그
    • <ol> : 순서가 있는 태그
      • <li> : 항목을 나타냄
    • <dl>: 용어를 정의할 때 사용하는 태그
      • <dt> : 용어를 나타냄
      • <dd> : 용어의 정의를 나타냄
    •  
<h6>콩나물국 만들기</h6>
<ul>
	<li>콩나물</li>
	<li>멸치</li>
	<li>냄비</li>
</ul>
<h6>라면 끓이는 법</h6>
<ol>
	<li>냄비에 물을 붓는다</li>
	<li>물이 끓을면 면과 스프를 넣는다</li>
	<li>맛있게 먹는다</li>
</ol>
<dl>
	<dt>리플리 증후근</dt>
	<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
	<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
	<dt>피그말리온 효과</dt>
	<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
	<dt>언더독효과</dt>
	<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

결과값 :

콩나물국 만들기
  • 콩나물
  • 멸치
  • 냄비
라면 끓이는 법
  1. 냄비에 물을 붓는다
  2. 물이 끓을면 면과 스프를 넣는다
  3. 맛있게 먹는다
리플리 증후근
허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어
허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어
피그말리온 효과
타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상
언더독효과
사람들이 약자라고 믿는 주체를 응원하게 되는 현상

 

!!!!주의할 점!!!! : 

1. <ol>, <ul>의 자식 태그로는 <li>만 올 수 있습니다. 이와 반대로 <li>태그의 부모태그로는 <ul>,<ol>태그만 올수 있습니다.

2. <li>의 자식태그로는 다른 여러태그들이 올 수 있습니다! 

 

<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>
</ol>

결과값 : ( <li>의 자식태그 <ul> 태그가 온 것을 확인할 수 있습니다.)

월드컵 조 평성

  1. A조
    • 러시아
    • 우루과이
    • 이집트
    • 사우디아라비아
  2. B조
    • 이란
    • 스페인
    • 포르투칼
    • 모르코
  3. C조
    • 프랑스
    • 덴마크
    • 호주
    • 페루
728x90