HTML tag의 종류

제목 Tag --- h1~h6

이름 그대로 제목을 작성 할 때 쓰는 tag이고 웹 엔진이 가장 먼저 검색하는 tag.
Heading의 첫 글자인 h를 사용하고, <h1~6>, </h1~6>으로 사용한다.
h뒤에 붙는 숫자는 h1이 가장 커다란 제목이고, 숫자가 커질수록 웹 페이지에서 나타나지는 제목의 크기가 작아지고 소제목으로 쓰인다고 생각하면 된다. 그러므로 하나의 HTML문서에는 하나의 h1태그를 권장한다.

본문 tag --- p

본문을 뜻하는 paragragh의 첫 글자인 p를 사용한다.
이름 그대로 본문 내용을 작성 할 때 쓰는 tag이다.

줄 바꿈 tag --- br

줄을 바꿔주는 tag이고 br을 사용한다.
HTML에서는 줄을 바꿔준다고 엔터를 누르면 줄이 바뀌어지지 않으므로 br tag를 꼭 사용해야한다.

목록 tag --- ul, ol

목록tag에는 ul과ol 두 가지 종류가 있다.
ul은 unordered list로 순서가 없는 목록이다. ol은 반대로 ordered list로 순서가 있는 목록이고, 속성을 가진다. 속성으로 ol 뒤에

• type이 오면 말머리의 기호를 변경한다. (1, A, a, l, i)
• start가 오면 시작값을 변경한다.
• reversed가 오면 역순으로 시작한다.

수평 줄 tag --- hr

수평으로 된 줄을 그어주는 tag.

내용 숨김 tag --- summary, detail

tag사이에 숨기고 싶은 내용을 적어주면 숨겨주는tag 이다.
detail안에 자식 요소로 summary가 같이 와줘야 한다.

문자 꾸밈 tag

• b tag: 글자 두께를 두껍게 해주는 tag
• strong tag: 글자 두께를 두껍게 해주는 tag + Sementic한 의미를 지님
• em tag: Emphasized의 약자로 글자를 강조 시켜주는 tag; 기울여서 표시됨
• del tag: 글자에 중간줄을 그어주는 tag
• u tag: 글자에 밑줄을 그어주는 tag

이미지를 넣어주는 tag --- img

이미지를 넣을때 사용되는 tag이다.

• 사진을 불러올 때 속성으로는 src를 사용한다.
• 파일을 직접 저장해서 가져올 수도 있고, 사진의 인터넷 주소를 복사해서 가지고 오는 방법이 있다.
• 불러온 이미지의 크기를 설정해주는 속성으로는 width와 height가 있다. 둘 중 한 가지만 설정을 해주게되면, 나머지 하나는 원본크기에 비례해서 자동으로 설정이 된다.
• 이미지를 가져오다가 오류로 인해 이미지가 로드가 안될 경우 이미지에 대한 설명을 설정해주는 alt속성이 중요하다.

하이퍼링크 tag --- a

사용자가 원하는 정보를 취득 할 때 사용되는 tag.
Anchor의 약자인 a를 사용하고, 속성값으로 href와 target을 사용한다.

• href: Hypertext Reference의 약자로 이동할 페이지의 링크를 적으면 된다.
• target: 링크된 문서를 열었을 때 문서가 열릴 때 열릴 위치를 표시한다.

입력 값 받기 --- input

속성 값으로 type을 설정 할 수 있다.

• type="button": 버튼을 생성해주는 속성이고, 특정 기능을 수행 시킬 때 주로 사용한다. value라는 속성을 이용하여 버튼에 내용을 적을 수 있다.

  • input submmit이라는 속성도 버튼을 생성한다. 이 버튼은 button과는 다르게 폼을 서버에 제출 할 때 사용되는 버튼이다.
  • button이라는 tag도 존재한다. 이 button tag는 기본적으로 submmit의 성질을 가진다.
  
  

• type="text": 텍스트의 입력 값을 받는 창을 생성한다. 주로 ID를 입력하는 부분이다.
  
  

• type="password": 비밀번호 값을 받는 창을 생성한다. 입력 값을 자동으로 안보이게 처리해준다.
  
  

• type="checkbox":여러 선택지 중에 중복 선택이 가능한 체크박스 생성. 속성으로 체크박스의 이름을 설정 할 수 있는 Name이 있고, 화면 최초 로딩시 체크 박스가 선택 된 상태로 로딩이 되게 해주는 checked가 있다.
  
  

• type="radio": 여러 선택지 중에 하나만 선택 할 수 있는 radio 버튼을 생성한다. 속성으로는 checkbox와 같다. 단, 같은 name을 가지는 radio 버튼은 하나만 선택이 가능하고 하나를 선택하면 다른 선택 값은 취소 된다.
  
  

• type="date": 특정 날짜를 선택할 수 있는 박스 생성. 속성으로는 name이 있고, 날짜 선택 박스의 이름을 설정한다. date뒤에 time-local을 붙여서 type="detetime-local 이라고 적으면 시간 까지 선택이 가능하다.
  
  

• select tag: 드롭 다운의 형태로 선택 메뉴를 만들어주는 tag 이다.

  • 자식요소로 option이 올 수가 있다. select와 세트로 온다.
  • optgroup은 각각의 option들을 그룹으로 묶어준다.
  
  

• label tag: input의 속성에서 이름과 폼을 그룹화 할 때 사용 할 수 있다.

  • label tag를 사용 할 때에는 input의 id와 label의 for 속성을 동일하게 해주면 그룹화가 된다.
  • for 속성과 id 속성을 사용하지 않고도 그룹화 시킬 수 있는 방법은 label tag안에 input이 자식요소로 들어가면 된다.
    
    

• placeholder 속성: 입력 폼에 예시를 적을 때 사용 할 수 있다. 아무말이나 적어도 상관 없다.

• disabled 속성: 옵션은 보이지만 선택을 못하게 할 때 사용한다.

위의 폼 외에도 name, range, color, file, number, ..등등 간단한 폼들이 있다.

table tag

table, 즉 표를 만들 때 사용되는 tag.
div tag를 사용하여 만들어준다.
먼저 행을 쓰고, 행의 자식요소로 칸을 넣어주는 것이 기본이다.

• tr tag: 표의 내부행
• th tag: 표 내부의 제목 칸
• td tag: 행 내부의 일반 칸
  • td의 속성으로 colspan, rowspan이 있다.
    colspan: 해당 칸이 점유하는 열의 수 지정.
    rowspan: 해당 칸이 점유하는 행의 수 지정.

table의 속성

• border: 테두리의 두께
• cellspacing: 테두리의 간격 사이의 너비
• cellpadding: 셀 내부의 간격
• align: 테이블 정렬 속성
• width와 height: 테이블의 너비와 높이
• bgcolor와 bordercolor: 테이블 배경색과 테두리 색

Semactic

HTML의 요소는 Sementic하게 작성 되어야 한다. (웹 페이지를 이루는 요소에 의미와 맞게 태그를 사용.)

Semactic의 tag

• header: 로고, 메뉴 아이템등이 온다.
• nav: 네비게이션 (다른 곳으로 이동 가능한 링크들)
• footer: 하단 영역
• aside: 콘텐츠와 직접 연관이 없는 옆에 있는 부분 (ex.ad)
• main: 본문, 콘텐츠 영역임을 표시함. 한 HTML 페이지당 한 번만 사용하는것이 좋음.
• article: 하나의 의미있는 요소 (ex. 기사리스트 중에서는 기사 하나)
• h1~h6: 제목
• section: article을 포함 (그룹화 목적)

Semactic을 사용하는 이유

사실 Semactic의 tag들은 div와 같은 공간을 차지하는 역할을 할 수있다.
그럼에도 사용하는 Semactic tag를 사용하는 이유는 나중에 서버관리에 용이하게 하기 위한 것이다.

• 검색을 최적화 하기 위해서 (SEO: Search Engine Optimization)
• 유지보수성: 페이지를 구성할 때 div tag만을 사용해서 만들 수는 있지만, 그렇게 되면 나중에 요소들을 구분하기가 매우 힘듦.