오늘의 TIL HTML

수업은 주1회다. 그것도 주말...

그러면 중간에 과제외에는 별도 복습을 위한 학습요소가 없다...이것도 좀 아쉽네😥
그래서 중간중간 복습을 위해 어떤 컨텐츠를 이용할까 찾아봤는데 '부스트코스' 발견!

네이버에서 서칭을 하던 중 배너를 보고 우연히 알게 되었는데, 꽤나 괜찮은 페이지인것 같다.(물론 인프런이나 유튜브에도 좋은 콘텐츠는 넘침!)
그런데 강의스타일이 나긋나긋하고 중간중간 퀴즈도 있어서 나에게 복습용? 정도로는 적합하더라😎

강의도 HTML의 기원부터, 태그 나아가 쿼리까지 나같은 뉴비들이 복습용으로(독학하기에도)부담없이 나뉘어져 있더라.
그래서 오늘부터 부스트코스를 통해서 복습을 하고자 마음먹었다 😎😎

HTLM이란?

HyperText Markup Landuage

(HTML 코드 작성시 가독성을 위해 Whitespace/Identation 구분이 중요하다.)

각 Code의 용도 및 목적

. !DOCTYPE html : html5의 선언문, Vesion별로 차이가 있다.
(Version을 미리 선언해서 내용을 올바르게 표시할 수 있도록 한다.)

. head: head에 입력된 요소들은 화면에 표시되지 않으며 Meta data의 집합을 정의할 때 사용한다.

. title: 웹페이지의 이름을 정의할 때 사용한다. (Bar or Tab)

. !--text--: 코드 작성시 주석 입력의 용도로 사용하거나 코드를 주석처럼 변경할 때 사용한다. test로 코드 변경시 예전 코드를 훼손하지 않고 비활성화할 수 있다.(주로 주석으로 많이 사용한다고 들었다 강사님에게도)

<!-- test -->
<head> 
  <title>Study</title>
</head>

. body: html 화면을 구성할 때 사용하며 text, image, video 등의 여러가지 종류의 구성 요소들을 감싸주는 Parents element이다.

Text 작성시 사용하는 태그들

. div/span: 어떠한 기능도 의미도 없이 특정 영역을 CSS로 꾸미는 기능을 주고 싶을때 사용한다.(div는 block 속성이고 span은 inline 속성이다.)

. h1~6: heading, 기사의 헤드라인 혹은 text의 제목을 강조할 때 사용한다.

. p: paragrahp, text 형태의 정보를 입력할 때 사용한다.

. br: break, 단락을 줄바꿈할 때 사용된다. (Closing tag가 없음)

. em: emphasis, 문장을 italic로 강조할 때 사용된다.

. strong: 문장을 Bold로 강조할 때 사용된다.

<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>
  </div>
</body>

. ul: unordered list, list 앞에 글머리 기호가 붙는다.

. ol: ordered list, list 앞에 숫자형태로 기호가 붙는다.

. li: list, 내용 입력시에 사용한다.

. dt : 용어를 나타내는 태그

. dd : 용어에 대한 정의 또는 설명을 할때 사용한다.

<body>
 <div>
   <h3>Species</h3>
   <ul>
   <li>Arctos</li>
   <li>Collarus</li>
   </ul>
   <h3>Countries with Large Brown Bear Populations</h3>
   <ol>
   <li>Russia</li>
   <li>United States</li>
   </ol>
   <dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장     애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
 </div>
</body>

웹페이지 링크 연결 방법

. a: anchor, web page 간/web page 내 화면을 연결할 때 사용한다. anchor 사이의 문자는 Hyperlink의 이름이며 anchor 사이에 img code를 사용하면 text 형태가 아닌 image 형태의 hyperlink를 사용할 수 있다.

. href: hyperlink reference, anchor와 같이 사용하여 연결하고자 하는 경로를 활성화 시켜준다. url 입력시 각각의 페이지가 같은 폴더에 있다면 relative path를 대체해서 사용 가능하다. (href="./name.html)

.id: div와 함께 사용되며 구역별 정보를 제공하는 용도로 사용한다. a opening tag와 함께 사용하면 같은 화면에서 원하는 단락으로 이동할 수 있다. (href="#id")

. target: link로 연결된 웹브라우저를 어떤 형태로 열 것인지 정의한다. (새탭 혹은 새창으로 열기) *_balnk : 새창으로 열기

  <html>
    <head>
      <title>Brown Bears</title>
	</head>
    <body>
       <ul>
    <li><a href="#introduction">Introduction</a></li>
      </ul>
      <a href="./index.html" target="_blank"><img src="https://en.wikipedia.org/wiki/Brown_bear"/></a>
      <a href="./aboutme.html">About Me</a>
      <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>
        <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
    </body>
  </html>

복습한 순서대로 보면 기초적으로 텍스트 작성에 사용하는 태그와 문법(?)을 배우고 링크연결정도까지밖에 안되었지만, 수업에서 아직 배우지 못한 부분도 추가로 학습할 수 있었다(
dd, dt라거나 em, strong은 아직 안배웠는데 재밌었다). 이런거 보면 확실히 배우는 순서는 강산나름 학생나름.

오늘의 TIL...이게 TIL이 맞나 모르겠다. 끝!

Author And Source

이 문제에 관하여(오늘의 TIL HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mikey_08/오늘의-TIL-HTML

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)