반응형
[코딩 독학 일기/HTML] 1. Codecademy - Itroduction to HTML
오늘부터 코딩 독학을 시작할 것이다.
비전공자이기 때문에 하나하나 처음부터 배워야하는 만큼 기초부터 열심히 해보려고 한다.
조코딩이라는 유튜버를 통해 진입장벽이 낮고 초보자도 재밌게 할 수 있는 html과 css를 먼저 학습해보라는 내용을 듣고 Codecademy라는 사이트를 추천받았다.
이곳은 코딩의 기초에 대해 쉽게 배울수 있는 사이트였다.
사이트링크: www.codecademy.com/
Learn to Code - for Free | Codecademy
Learn the technical skills you need for the job you want. As leaders in online education and learning to code, we’ve taught over 50 million people using a tested curriculum and an interactive learning environment. Start with HTML, CSS, JavaScript, SQL, P
www.codecademy.com
전부 영어로 되어있지만 크롬의 번역기능을 통해 무리없이 지식을 습득할 수 있었다.
배운 내용을 요약하고 예제의 정답을 정리해 보았다.
1~2. HTML 소개
html은 웹사이트를 제작하기 위한 필수도구이다.
주로 웹사이트에 들어가는 내용들을 입력하고 편집하기 위해 사용된다.
지금 내가 글을 작성 중인 티스토리 블로그도 HTML을 통한 내용 편집이 가능하다.
예를 들면 다음과 같다.
<P>Hello World!</p>
이런 내용을 작성하면 웹사이트에 Hello World!라는 글자가 생긴다.
위 내용은 다음과 같이 구성되어 있다.
- html tag: <>안에 묶여있는 요소를 의미한다.
- opening tag: html을 시작하기 위한 요소이다. 위 내용에서는 <p>가 opening tag이다.
- closing tag: html을 끝내는 요소이다. 위 내용에서는 </p>가 closing tag이다.
- content: 화면에 보이고 싶은 내용이다. 각 teg사이에 작성한다.
3. The Body
body는 html에서 굉장히 중요한 요소이다.
이 body 사이에 입력한 내용만이 화면에 보여진다.
<body>
<p>What's up, doc?</p>
</body>
4. HTML의 구조(HTML Structure)
html의 구성은 마치 가계도와 같다.
<body>
<p>This paragraph is a child of the body</p>
</body>다음과 같은 코드가 있다고 치면 <p>는 <body>안에 하위 요소로 속해 있는 것을 볼 수 있다.
여기서 <body>는 부모tag라고 하고, <p>는 자식tag라고한다.
다음 예제를 보자.
<body>
<h1>Hello World</h1>
<p>This paragraph is a child of the body element</p>
<div>
<p>This paragraph is a child of the div element and a grandchild of the body element</P>
</div>
</body>여기서 <body>의 자식teg로 <h1>, <p>, <div>가 있다.
그리고 <div>의 자식teg로 <p>가 추가되며, 이 <p>는 <body>의 손자쯤으로 볼 수 있다.
5. 제목(Headings)
html에서 제목을 쓸때 <h1>~<h6>까지 총 6가지의 종류의 teg를 사용하며, 주요 제목에는 보통 <h1>을 사용한다.
<body>
<h1>The Brown Bear</h1>
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations.</h3>
<h3>Countries with Large Brown Bear Populations.</h3>
<h2>Media</h2>
</body>
6. Divs
<div>은 division의 줄임말이다.
이는 보통 html의 요소들을 그룹화하는데 주로 사용한다.
이것만 사용했을 때는 시각적으로 특별한 효과가 생기지는 않지만 css를 활용하여 폰트나 색깔 등을 수정할 때 <div>안에 있는 요소들을 나눠서 편집하는 것이 가능하기 때문에 앞으로 매우 유용하게 쓰인다.
앞서 작성한 내용에 <div>를 추가하면 다음과 같은 형태가 된다.
<body>
<h1>The Brown Bear</h1>
<div>
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div>
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Large Brown Bear Populations</h3>
</div>
<div>
<h2>Media</h2>
</div>
</body>
7. 속성(Attributes)
속성은 요소를 확장하는데 사용하며, 이름과 값으로 구성되어 있다.
가장 자주 사용되는 속성은 id이며, 다음과 같이 사용된다.
예시에서 보이는 것처럼 보통 <div>안에 넣어서 사용한다.
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>
8. 텍스트 표시(Displaying Text)
html은 단락(paragraph) 또는 범위(span)로 표시할 수 있다.
- 단락: <p>를 사용, 일반적인 텍스트 블록을 표시한다.
- 범위: <span>을 사용, <p>안의 요소들을 작은 요소로 나눈다.
<div>
<h1>Technology</h1>
</div>
<div>
<p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>
</div>여기서 <p>안의 긴 문장중에서 <span>을 이용하여 Self-driving cars를 분리해냈다.
다음은 기존 예제에 <p>를 사용하여 내용을 추가한 것이다.
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>“The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently Least Concern. There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.”</p>
<h3>Species</h3>
<h3>Features</h3>
<p>“Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.”</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<p>“Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.”</p>
<h3>Countries with Small Brown Bear Populations</h3>
</div>
<div id= "media">
<h2>Media</h2>
</div>
</body>
9. 텍스트 스타일링(Styling Text)
html은 텍스트를 스타일링 할 수 있다.
- 기울임: <em>사용
- 굵은글씨: <strong> 사용
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p><em>The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America.</em> Its conservation status is currently <strong>Least Concern</strong>. There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>여기서 The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America.는 <em>을 통해 기울임체로 변경하였고, Least Concern는 <strong>을 통해 굵은 글씨체로 변경하였다.
10. 줄 바꿈(Line Breaks)
html에서 <br>을 통해 텍스트의 줄을 바꿀 수 있다.
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br><br> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>Least Concern뒤에 <br>을 두번 사용하여 두줄 바꿈을 했다.
11. 정렬되지 않은 목록(Unordered Lists)
<ul>을 통해 list를 생성하고 그 하위 요소에 <li>를 사용함으로써 하위 항목들을 정렬할 수 있다.
ex)
· 사과
· 바나나
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>. <br><br> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni(extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>
<ul>안에 <li>를 활용하여 Arctos, Collarus등의 하위 요소들을 정렬하였다.
12. 정렬된 목록(Ordered Lists)
<ol>을 활용하여 list를 작성하는 것이다.
<ul>과의 차이점은 번호가 매겨진다는 것이다.
ex)
1. 사과
2. 바나나
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>
13. 사진(Images)
지금까지는 텍스트를 입력하는 법을 배웠다면 이번에는 이미지다.
이미지는 자동으로 닫히는 tag를 활용하며 용법은 다음과 같다.
<img src="image-location.jpg" /><img>라는 tag안에 src 속성을 활용하여 이미지의 URL을 등록하면 된다.
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/>
</div>
</body>
14. 이미지 대체(Image Alts)
<alt>를 활용하여 이미지를 다른 이름으로 정의할 수 있다.
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="#" alt="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/>
</div>
</body>여기서는 해당 이미지를 #으로 정의하였다.
15. 동영상(Videos)
다음과 같은 형태로 활용되며, 높이와 너비를 조절할 수 있고, 이미지와 마찬가지로 tag 사이에 src를 활용하여 URL을 작성하면 된다.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>- width: 영상의 너비를 조절
- height: 영상의 높이를 조절
- cotrols: 영상에 일시정지, 재생 등의 기능을 추가
- Video not supported: 브라우저가 비디오를 로드할 수 없는 경우 사용
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" />
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
video not supported
</video>
</div>
</body>
마무리
동영상까지 삽입한 예제를 실행하면 다음과 같은 웹사이트가 실행된다.
이제 막 html의 기본적인 기능을 익혀보았다.
생각보다 어렵지 않고 재밌었다.
그만큼 Codecademy는 친절하게 잘 설명되어 있다.
오랜만에 정말 재밌게 공부한 것 같아서 기분이 좋다.
반응형
'코딩 독학 일기 > HTML' 카테고리의 다른 글
| [코딩 독학 일기/HTML] 2. Codecademy - HTML Document Standards (0) | 2021.02.25 |
|---|