TIL - HTML

Seob·2020년 6월 20일
1

TIL

목록 보기
1/36
post-thumbnail

What is HTML? 🤷🏻‍♂️

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.


  • 프로그래밍 언어는 아니고 브라우저가 웹 페이지의 구조를 알 수 있게 해주는 마크업 언어이다.
  • elements로 구성되어 있다.

요소(element)는 웹 페이지를 구성한다. XML과 HTML에서, 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있다. 일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성됩니다.

Basic form

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is a title</title>
    </head>
    <body>
    </body>
</html>

HTML 문서는 문서 형식 선언 (비공식적으로, "doctype")으로 시작해야 한다. 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있다.
doctype의 원래의 목적은 문서 형식 정의 (DTD)에 기반한 SGML 도구를 통하여 HTML 문서의 파싱과 유효 여부 확인을 가능하게 하려는 것이었다. DOCTYPE에 대한 DTD는 DTD에 순응하는 문서를 가진 허용 또는 금지된 내용을 지정하고 기계가 읽을 수 있는 문법을 포함하도록 지시한다. 반면 브라우저는 HTML을 SGML의 애플리케이션으로 수행하지 않으며, 결과적으로 DTD를 읽지 않는다. HTML 5는 기술적인 제한으로 인해 DTD를 정의하지 않는다. 그래서 HTML5에서 doctype 선언 는 DTD를 참조하지 않는다.

tags🏷

태그는 보통 클로징 태그가 꼭 필요하다.

<body>
<!--화면에 보여질 내용-->
<h1>heading</h1>
<p>paragraph</p>
</body>

페이지 상에 보이는 부분은 위와 같이 <body></body> 태그 사이에 들어가야 한다.

텍스트 강조하기 💪🏼

<b>boldface</b>
<i>Italic</i>
<strong>strong text</strong>
<em>emphasized text</em>

위의 결과물은 다음과 같다.

boldface
Italic
strong text
emphasized text

<b><em> 둘 다 폰트에 기울임 효과를 준다. 하지만, 둘 사이에는 웹 접근성에 기여하는 분명한 차이점이 존재한다.

스크린 리더(Screen Reader)를 사용하는 경우 음성 합성(Speech Synthersizer)도구가 페이지를 읽고 해석할 때 억양을 강조해서 읽어준다.

즉, 화면에서만 강조하고 싶다면 <b><i>를 사용하면 되고 스크린 리더에 영향을 주게 실질적으로 강조를 하려면 <strong><em>를 사용하면 된다.

(Velog에서는 왜인지 <b>는 기능을 안하는것 같다..?!)

<a href="URL">'a' stands for anchor and 'href' stands for hyper-reference</a>

URL 부분에는 웹 주소 말고도 id 속성을 추가하여 내부에서 이동이 가능하게 링크를 걸어줄 수도 있다.

<h1 id="firstheading">What is HTML</h1>
<a href="#firstheading">Click to Go!</a>

Click to Go!
위 링크를 클릭하면 첫번째 헤딩으로 이동한다.

<a><!--링크 대상--></a> 에서, <!--링크 대상-->은 텍스트가 될 수도, 이미지가 될 수도, 백그라운드 화면 전체가 될 수도 있다.

<a target="_blank" href="https://en.wikipedia.org/wiki/HTML"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1920px-HTML5_logo_and_wordmark.svg.png" width="100" alt="HTML logo" align="right"></a>

Image 🖼

🗝Key points

  • 이미지를 클릭하면 HTML위키피디아로 새창이 열린다.
  • target="_blank" 부분이 새창으로 열리게 해준다.
  • img = image
  • src = source
  • width(height) = 이미지의 가로(세로) 크기 - 둘 다 사용하게 되면 가로 세로 비율이 안맞을 수 있고 의도적으로 이미지를 늘려야 하는게 아니라면 하나만 사용하는 것이 좋다.
  • alt = alternative text - it describes the image 시각장애인의 경우 소리로 웹의 내용을 듣게 되는데 이미지의 경우 alt에 적힌 내용을 읽어준다.
  • align 문자 그대로 이미지의 위치를 지정해줄 수 있는데 left, right, top, middle, bottom 등 여러가지를 지정해줄 수 있다.
  • vspace, hspace - vertical, horizontal space 이미지 상하, 좌우 여백을 준다.
  • 위의 상당 부분이 벨로그내에서는 적용이 안되는것 같다..😔

Table

<table>
  <thead>	<!--Table header area-->
  	<tr>	<!--Table Row-->
      <th>Name</th>	<!--Table Heading - header cells (columns)-->
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>	<!--Table body area-->
  	<tr>
   	  <td>Ddeokbokki</td>	<!--tabular data-->
      <td>14</td>
      <td>Male</td>
    </tr>
    <tr>
   	  <td>Samgyupsal</td>
      <td>76</td>
      <td>Femal</td>
    </tr>
  </tbody>
</table>
Name Age Gender
Ddeokbokki 14 Male
Samgyupsal 76 Femal

색깔, 테두리 등은 CSS에서 다뤄보자!

profile
Hello, world!

0개의 댓글