HTML 주요 tag

모든 태그는 소문자로 사용

📌 Body tags

📍 <a>

하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의할 때 사용

a 태그의 가장 중요한 속성은 링크의 목적지를 가리키는 href 속성

• 아직 방문하지 않은 링크 : 밑줄 + 파란색
• 방문했던 링크 : 밑줄 + 보라색
• 활성화된 링크 (현재 마우스가 클릭하고 있는 링크) : 밑줄 + 빨간색

<a href="http://www.tcpschool.com">티씨피스쿨 사이트로 이동!</a>

📍 <br>과 <p>

<br>

shift + enter 역할 즉, 줄바꿈을 하는 태그
br 태그는 닫힌 태그를 사용하지 않으며, br 태그를 쓴 갯수만큼 줄바꿈을 하게 된다.

안녕하세요. <br>
br 태그입니다. <br>

<p>

enter 역할 즉, 문단을 나누는 태그

<p>안녕하세요. p태그입니다.</p>

📍 Escaping

 

웹페이지에서 공백을 표시하기 위해 사용되는 특수 문자
nbsp = Non-breaking Space

웹 브라우저는 중간에 여러 개의 공백이 있는 경우 1개만 남겨두고 모두 제거한다. 따라서 웹 페이지에 여러 개의 공백을 넣어야 한다면  를 반복 입력하면 된다.

< >

웹 페이지에서 "<"와 ">"를 표시하기 위해 사용되는 특수 문자
lt = Less than sign
gt = Greater than sign

& "

웹 페이지에서 "&"와 " ""(쌍따옴표) "를 표시하기 위해 사용되는 특수 문자

📍 <img>

이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정한다.
이미지 파일이 src 속성에서 지정한 경로에 없을 시, 이미지는 출력되지 않거나 엑스박스가 뜬다.

• src : 이미지 경로
• width : 이미지 가로 크기
• height : 이미지 세로 크기

📍 <ul> <ol> <li> <dl>

목록을 만들기 위해 사용하는 태그

<ul>

unordered list의 약자로, 순서가 필요없는 목록을 만든다.

<ol>

ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는데 사용한다.

<li>

list item의 약자로, <ol>과 <ul>의 각 항목들을 나열할 때 <li> 태그를 사용한다.

<dl>

definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.

<ul>
  <li>영어</li>
  <li>수학</li>
  <li>국어</li>
</ul>

📍 Table

<table>

테이블을 만든다.

<tr>

테이블의 행(가로 한줄)을 만든다.

<td>

테이블의 열을 만든다.

<th>

테이블의 헤드 부분 (자동 가운데 정렬, 굵게 적용)

<caption>

테이블 이름 표시

<thead>

테이블의 헤더 영역 지정

<hbody>

테이블의 바디 영역 지정

<table
            border="1"
            width="50%"
            height="200"
            cellspacing="5">
            <caption>표 제목</caption>
            <thead>
                <tr align="center" bgcolor="white">
                    <td></td>
                    <th>김씨</th>
                    <th>이씨</th>
                    <th>박씨</th>
                </tr>
            </thead>

            <tbody>
                <tr align="center" bgcolor="white">
                    <th>월급</th>
                    <td>100원</td>
                    <td>200원</td>
                    <td>400원</td>
                </tr>
                <tr align="center" bgcolor="white">
                  <td>월급</td>
                  <td>100원</td>
                  <td>200원</td>
                  <td>400원</td>
                </tr>
            </tbody>
</table>

📌 Head tags

📍 <title>

웹 페이지의 제목을 나타내는 태그
유저에게 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이다.

📍 <script>

자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용

<참고 : http://www.tcpschool.com/html-tags/a
https://dahanweb.tistory.com/14
https://ofcourse.kr/html-course/img-%ED%83%9C%EA%B7%B8
https://aboooks.tistory.com/210
https://godog.tistory.com/entry/html-%ED%85%8C%EC%9D%B4%EB%B8%94table-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 >