[2023 신입부원 기초 스터디] 이총명 #1주차 - HTML 입문

1 . HTML이란

HTML은 Hyper Text Markup Language의 약자로 프로그래밍 언어가 아닌 마크업 언어입니다.

HTML로 프로그래밍 한다고하면 칼 맞을수도 있대요. 모두들 조심하세요 (･ω<)☆

 

2. 글꼴 태그

제목태그  :

<h1> , <h2> 등 <h@> 제목 </h@> 형태로 태그 사이에 제목 텍스트를 넣습니다.

hr 태그 :  <hr> 

이런식으로 작성하며 수평 가로선을 만들어줍니다.

---

br 태그  :   <br> 

이런식으로 작성하며 line break의 약자로 줄바꿈을 할때 사용합니다. (종료태그X)

title 태그  : <title>타이틀</title> 

이런식으로 작성하며 브라우저 탭에서 보이는 이름을 결정합니다.

 

(그냥 중요해보이는것만 적어봤습니다...)

3. 목록 태그

ol 태그  :   <ol>은 "Ordered List"의 약자로, 순서가 있는 목록을 만들기 위해 사용되는 HTML 태그입니다.

<ol>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ol>

이런식으로 작성하고 <li> 태그는 각각의 목록 항목을 나타내며, <ol> 태그 안에 여러 개의 <li> 태그를 사용하여 목록 항목을 추가할 수 있습니다.

ul 태그    :   <ul>은 "Unordered List"의 약자로, 순서가 없는 목록을 만들기 위해 사용되는 HTML 태그입니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

이런식으로 작성하고 ol과 같이 <li>를 사용할 수 있습니다.

dl 태그  :   <dl>은 "Definition List"의 약자로, 용어를 설명하는 목록을 만들기 위해 사용되는 HTML 태그입니다. 

<dl>
  <dt>용어 1</dt>
  <dd>정의 1</dd>
  <dt>용어 2</dt>
  <dd>정의 2</dd>
</dl>

이런식으로 작성할 수 있습니다.

 

dt태그  :  <dt>는 "Definition Term"의 약자로, 정의 목록(<dl>)에서 용어(용어<dt>)를 정의하는 데                                  사용되는 HTML 태그입니다. <dt> 태그는 <dl> 태그와 함께 사용되어 용어를 나타냅니다.

dd 태그  : "Definition Description"의 약자로, 정의 목록(<dl>)에서 용어의 정의(Definition Description)를 표시하는 데 사용되는 태그입니다

4. 표 태그

table 태그  :   표를 만드는 태그이고 표 전체를 감쌉니다. 

caption 태그 :  <caption> 태그는 <table> 태그 내부에 위치하며 표의 제목이나 설명을 표시할 수 있습니다. 

 

tr 태그 : <tr>은 "Table Row"의 약자로, <table> 태그 내에 행을 구성할 때 사용됩니다. 

 

th 태그 :  <th> 표의 제목 열을 나타내는 태그이며 부모 태그인 <tr> 태그 안에 있어야 합니다.

 

td태그 :  <td>표의 일반 열을 나타내는 태그이며 부모 태그인 <tr>태그안에 있어야 합니다.

5. Semantic 태그

semantic 태그  :   Semantic 태그는 HTML에서 의미론적으로 의미를 가지는 태그로, 웹 페이지의 구조와 의미를 더 명확하게 정의하기 위해 사용되는 태그들을 말합니다. Semantic 태그를 사용하면 웹 페이지의 구조와 의미를 더 명확하게 정의할 수 있어 검색 엔진이나 스크린 리더 등이 웹 페이지를 더 잘 이해하고 접근성을 개선할 수 있습니다.

 

6. Inline VS Block Element

Inline  :   인라인 태그는 구성하는 요소에 할당된 공간만 차지하는 태그입니다. (<span>, <a>등)

Block  :   블록 태그는  전체 공간을 차지하여 블록을 만듭니다.(<div>, <p>, <h1>~<h6>등)

 

 

7. 이미지,오디오,비디오,하이퍼링크 태그

이것들은 평소에 외우고 있기보다 필요할 때 찾아보는게 나을것 같습니다.

 

8. HTML Form

 <form> 태그로 시작하여, 입력 필드와 제출 버튼 등의 요소들로 구성됩니다.

사용자의 정보를 입력받기 위해 사용됩니다.

 

 

기타

주석은 <!----> 이 안에 글자를 넣으면 됩니다.

! 입력 후 Tab키를 누르면 자동으로 HTML 기본구조를 만들어 줍니다.

vscode에서 Ctrl + D를 쓰면 인생이 편해집니다.