HTML Tags

  • HTML 태그 정보 (MDN)
  • 브라우저 호환 여부 확인 (Can I use)
  • 태그 타당성 확인 (W3C Markup Validation)

    • <h1~6></h1~6>

  • h1의 h는 heading의 약자
  • 제목이기 때문에 자동 줄 바꿈이 된다.
  • 하나의 HTML 문서에는 하나의 h1 태그를 권장한다.
  • 웹 검색 엔진이 제일 먼저 검색하는 태그이다.
  • block 성질

    • <p></p>

  • 본문을 뜻하는 paragraph의 약자
  • 본문을 적기 위한 태그

    • <br />

  • 줄바꿈을 위한 태그

    • <pre></pre>

  • 이 태그 안에서는 엔터가 <br />태그 없이도 에디터에 쓴대로 그대로 표현됨.
  • 들여쓰기까지도 표현됨.

    • <a></a>

  • <a>는 Anchor의 약자로, 웹페이지나 이메일 등으로 연결하는 하이퍼링크를 만든다.
  • href 속성에 url을 입력하면 해당 페이지로 이동한다.
  • href 에는 전화 또는 메일 주소 등도 지정할 수 있다.
  • target 속성에는 _blank(새로운 탭), _self(본인 탭이 변경됨) 등을 입력할 수 있고 이는 링크를 열었을 때 문서가 열릴 위치이다. 속성이 생략되면 기본값은 _self

    • <input />

  • 이것은 type에 따라 버튼이나 텍스트박스 등을 생성할 수 있다.
  • <input>의 type에는 button, checkbox, color, date, password, text, file, radio(동그란 체크박스) 등이 있다.
  • text type은 placeholder라는 속성을 갖는다. 이곳에 텍스트를 입력하면 text가 빈칸일 때 해당 텍스트가 표시된다.
  • checkbox는 name과 value, checked 속성을 갖는다.
  • radio는 같은 name을 가지는 것들 중 하나만 선택 할 수 있다.
  • radio와 checkbox는 radio가 여러 선택지 중 하나만 선택할 수 있다는 점에서 다르다.
  • date는 특정 날짜를 선택할 수 있다.
  • datetime-local은 시간까지 선택할 수 있다. (OS시간 기준으로 작동)
  • e.g.

    • <button></button>

  • <button>은 버튼 모양을 만든다.
  • <input type=”button” /> 과 같다.

    • <img />

  • 이미지를 삽입할 때 사용한다.
  • 기본적으로 inline 속성을 가지고 있다.
  • src 속성을 이용하여 이미지 경로를 입력해준다.
  • alt 속성으로 이미지의 이름을 정해줄 수 있다. → 시각 장애인분들이 청각적으로 웹페이지를 들을 때 alt태그 속성을 듣게 됨.
  • e.g. <img src=”./cat.jpg” alt=”고양이” />
  • ./ 는 현재 내가 위치한 폴더를 의미한다.
  • ../ 는 한 단계 상위 폴더로 가게 된다.
  • ../../ 는 두 단계 상위 폴더로 가게 된다. 이러한 경로를 상대경로라고 한다.
  • 예시)
  • src 속성에 인터넷 url로도 이미지 경로를 지정해줄 수 있다. (이미지 주소 복사)
  • width와 height 속성 존재

    • <table></table>

  • 표를 만들 때 사용한다.
  • <table>은 표를 감싸는 태그이다.
  • <tr>은 표 내부의 행이다.
  • <th>는 표 내부의 제목 칸 (맨 위칸)
  • <td> 행 내부의 일반 칸

    • <header>, <nav>, <aside>, <footer> 등

  • window안에 문서 영역에서 각각의 위치를 말한다. header는 상단, footer는 하단 등이다.

    • <div></div>와 <span></span> (컨테이너 태그)

  • 이러한 태그로 묶은 영역을 css등을 이용하여 스타일의 변화를 줄 수 있다.
  • 이것은 내용물을 덩어리로 만드는 박스와 같다.
  • <div>는 block 성질을 가지고 있어 줄바꿈을 만들고,
  • <span>은 inline 성질을 가지고 있어 같은 줄에 다른 내용도 같이 들어갈 수 있다.

    • <ol></ol>과 <ul></ul> (목록 태그)

  • 이들은 리스트를 만들때 사용하는 태그들이다.
  • ol은 자동으로 숫자가 번호로 붙고, ul은 번호가 없는 리스트를 만든다.
  • <ol>또는 <ul>안에는 각각의 리스트를 <li>태그로 감싼다.
  • 편하게 사용하는 방법 : 예를 들어 ul>li*3이라고 입력하면 <ul>태그로 감싸진 <li>태그가 3개 만들어진다. (emmet)
  • <ol>에 type 속성을 입력하면 로마자나 알파벳 등으로도 바꿀 수도 있다.
  • <ol>에 start 속성을 입력하면 특정 숫자부터 시작할 수 있다.
  • <ol>에 reversed 속성을 주면 순서가 거꾸로 붙는다.
  • 이 태그들은 중첩도 가능하다.

    • <hr />

  • 수평선 긋는 태그.

    • 문자를 꾸미는 태그

  • <b> : 두껍게
  • <strong> : 두껍게 + Semantic 한 의미를 지님
  • <i> : 이탤릭
  • <em> : Emphasized, 강조
  • <del> : 중간 줄
  • <u> : 밑 줄

    • <select></select>

  • 몇 가지 option중 선택할 수 있게 하는 select 폼을 생성한다.
  • <option> 태그로 select 폼의 옵션 값을 생성한다.
  • <optgroup>태그로 option들의 그룹을 만든다.
  • 백엔드에는 value값이 전달된다.
  • selected 속성을 주면 해당 option이 선택되어 있는 상태가 된다.
  • disabled 속성을 주면 해당 option은 선택이 불가능하다.

    • <form></form>

  • 사용자가 HTML 문서에서 작성한 내용을 보내기 위해서 사용하는 태그
  • <input type=”submit” />으로 버튼을 만들고 이 버튼이 클릭되면 form태그에 감싸진 input 요소들의 데이터가 서버로 전송되도록 할 수 있다.
  • action과 method 속성이 존재한다.

    • 태그의 전역 속성

  • 모든 HTML 태그에 공통으로 사용할 수 있는 속성
  • id
  • class
  • style