7. 웹 개발 - HTML(3) - <p> 태그 & <h> 태그

저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.
물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.
친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.
이 카테고리에서는 제가 관심 있어하는 웹 개발에 대해 말해보려고 합니다.

 

 

https://that-is-all.tistory.com/entry/studying-web3

3. 웹 개발을 위한 프로그램 두 가지

 

 

오늘도 기초적인 HTML 문법을 저와 함께 공부해 봅시다~!~!

 

아래 HTML 코드는 오늘 공부할 문법이 들어있습니다.(내용은 아무 의미 없으니 신경 쓰지 마세요. 혹은, 본인의 이야기를 채우셔도 상관없습니다.)

<h1>IMAGINATION - h1</h1>

Imagination is the production of sensations, feelings and thoughts informing oneself. These experiences can be
re-creations of past experiences, such as vivid memories with imagined changes, or completely invented and possibly
fantastic scenes. Imagination helps apply knowledge to solve problems and is fundamental to integrating
experience and the learning process.

<p>
	Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem odio, magni aperiam asperiores, hic officia ut
	accusamus cumque doloremque fugiat ex. Animi accusantium similique consectetur, illum repellat nulla sint
	consequuntur. Fugit nisi iste aperiam voluptatibus soluta ab dolorem omnis ipsa expedita minima! Consectetur
	vero natus exercitationem doloribus aut nam reprehenderit repellat ab quos, laborum veniam ullam commodi, qui
	laboriosam et!
</p>

<h2>Conceptual history - h2</h2>
<p>
	Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt reiciendis, rem, consectetur ipsam pariatur
	ducimus iste recusandae corrupti magni est tenetur ullam velit voluptatem! Natus quibusdam harum voluptate
	repellendus nemo. Molestiae eius consequuntur dolor veritatis et quia quos quis iure, cupiditate necessitatibus
	porro soluta atque voluptate. Laborum dolorum non ipsum architecto! Nisi eaque vitae repellendus repellat?
	Doloremque eaque dolorem cupiditate.
</p>

<h3>Ancient - h3</h3>
<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur id accusamus quia, nihil minus ullam
	inventore itaque suscipit quasi dolores odit magni autem alias velit repellendus sequi accusantium quibusdam
	amet. Impedit sapiente, at a repellat dolores numquam hic officia quasi? Maxime, officiis temporibus. Eum, quos
	obcaecati, voluptatem blanditiis necessitatibus nemo laborum amet debitis suscipit incidunt, ipsa optio hic?
	Quaerat, at. Inventore necessitatibus explicabo accusamus aut labore quibusdam sint eligendi iure ab sit omnis
	placeat suscipit laudantium praesentium nobis doloremque ipsum voluptatem incidunt id assumenda, fugit expedita
	molestias veritatis. Quis, eveniet. Dignissimos beatae aliquam excepturi nulla vitae deleniti illum fuga
	suscipit, inventore facilis debitis exercitationem voluptates sunt vero architecto eum obcaecati quisquam quae
	rerum ex atque nemo sequi saepe et. Consectetur.
</p>

<h4>Middle Ages - h4</h4>
<p>
	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti totam architecto inventore aut, debitis
	nesciunt molestias nulla, neque eligendi, incidunt eius cupiditate quis labore! Aperiam accusantium rem
	aspernatur qui mollitia.
</p>

<h5>Modern - h5</h5>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae asperiores reiciendis necessitatibus quos ex
	fugit itaque esse amet quisquam eius nisi, accusantium quibusdam, laborum blanditiis dignissimos mollitia porro
	ipsum consectetur. Fugiat, tenetur veniam quis et fuga nisi ea sunt dignissimos odit culpa voluptas a officiis
	accusamus animi soluta dolorem consectetur! Nulla, esse tenetur cupiditate omnis commodi eius ipsa
	necessitatibus blanditiis.
</p>

<h6>Cross cultural - h6</h6>
<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere modi porro, distinctio magnam illum
	dolorum placeat expedita repellat error laudantium cupiditate quos voluptatum qui animi sapiente provident at!
	Temporibus. Nam quis earum iusto ratione esse minima voluptatibus libero natus architecto cum, illum maxime
	debitis incidunt error? Quo, minus, dolorum vel sunt excepturi, soluta asperiores obcaecati eos est at
	reprehenderit. Repudiandae quo eveniet explicabo minima ratione delectus eius illo nemo voluptates optio, ad
	quia quasi ipsum impedit numquam repellendus officia cupiditate sunt culpa ullam et non aliquid tempora saepe!
	Doloremque.
</p>

 

 

위의 HTML 코드를 실행시키면 아래와 같습니다.

 

※ 궁금해하실 분이 있으실까 봐 설명드립니다. <p> 태그와 </p> 태그 사이에 있는 'lorem ipsum dolor ~ ' 문구는 단순히 텍스트 채우기용입니다. Visual Studio Code에서는 lorem*원하는 숫자 입력 후 Tab키를 누르면 숫자의 크기에 맞추어 텍스트가 채워집니다. (자세한 설명은 아래의 Wikipedia를 참고하세요~.) ※

https://en.wikipedia.org/wiki/Lorem_ipsum

Lorem ipsum - Wikipedia

 

 

1. 단락요소 : <p>~</p>

여기서 <p>는 텍스트 단락만을 말하는 것은 아닙니다. HTML에서 단락처럼 묶고 싶은 내용이라면 어떤 것이든 <p> 태그로 묶을 수 있습니다. 이미지일 수도 있고 아직 공부하지 않은 <input> 태그나 <label> 태그일 수도 있습니다. 즉, 다양한 형태가 가능합니다.

Visual Studio Code에서 줄을 바꾼다고 단락이 나뉘는 것은 아닙니다. 대신 <p> 태그를 이용하면 독립된 단락을 만들 수 있습니다.

<p> 태그로 감싼 부분만 단락이고, <p> 태그로 감싸지 않은 부분은 단락이 아닙니다.

 

 

2. 제목요소 : <h1>~</h1>, <h2>~</h2>, <h3>~</h3>, <h4>~</h4>, <h5>~</h5>, <h6>~</h6>

<h1>부터 <h6>까지 총 6가지가 있습니다. 6가지 모두 제목을 나타냅니다.

이 태그를 글자의 크기를 조절하는데 쓰면 안 됩니다.

 

정해진 크기가 있는데 <h1>는 기준 크기보다 약간 더 크고 <h2>는 약간 더 작으며 <h3>는 그보다 더 작습니다.

 

CSS를 활용하면 글자 크기를 조정할 수 있습니다. <h1>을 아주 작게 만들 수 있고 <h6>을 아주 크게 만들 수도 있습니다. 가능은 하지만 좋은 방법은 아니라 사용하지는 않습니다.

꼭 따라야 하는 구조이자 중요한 메서드가 있는데 <h1>는 한 페이지 당 하나만 있어야 한다는 겁니다. 그리고 항상 최상위 제목이 되어야 합니다.

 

 

<h1> 태그 내부 글감 출처

https://en.wikipedia.org/wiki/Imagination

Imagination - Wikipedia

 

 

※※※ HTML 파일에는 아직 아무것도 하지 않았습니다. 그냥 텍스트지만 확장자가 HTML이라서 파일을 이렇게 볼 수 있는 겁니다. 이건 아무 데도 올리지 않았습니다. 이 파일에 담긴 컨텐츠는 어떤 웹사이트나 서버에도 공개되지 않습니다. 이 기기에서 저만 볼 수 있습니다. 온라인 콘텐츠가 아니니까요. ※※※