웹 개발 기본지식 – HTML 태그(1)

여는 글

글자 태그나 영역태그는 홈페이지 소스코드와 DOM을 이해하고, 코드가 화면에 표시되는 형태를 이해하는데 가장 주요한 역할을 한다. 크롤링할 웹페이지나 업무용 웹사이트에서 어떤 태그 아래에 있는 정보를 가져올 것인지를 지정할 때 이러한 구조를 형성하는 태그에 대해 알아야 빠르게 접근할 수 있다.

반면 Table 관련 태그의 경우, Table 태그를 이용하여 홈페이지를 만들던 시절은 지나갔고 그 부분은 시멘틱 코드가 차지하게 되었지만, 여전히 데이터를 일목요연하게 정리하여 표현하는 구조에서는 Table 관련 태그나 목록 코드가 사용된다. 또한 소스코드에서와 달리 DOM에서는 자동으로 생성된 Table 관련 태그, 목록 태그가 꽤나 많이 보이는 편이다.

따라서, 크롤링을 하거나 특정 요소를 선택할 때, 표나 목록의 어느부분을 가져올지 지정하기 위해서라도 table태그, 목록 태그 등의 구조에 대하여 알아둘 필요가 있다.

글자 태그

1. 제목태그
   • hn :h1 ~ h6까지 존재하며, 1이 가장 큰 글꼴이며, 6으로 갈수록 작아짐
2. 본문태그
   • p : 단락을 바꾸는 태그. 단순 줄바꿈은 br을 권장
   • br : 단순 줄바꿈을 위한 태그
   • hr : 수평선을 긋는 태그
   • blackquote : 인용문을 넣는 태그. cite속성으로 출처를 밝힐 수 있음
   • pre : 글자, 글꼴, 줄바꿈을 입력한 그대로 출력하는 태그(특정 글을 옮겨왔을 때, 일일이 br태그를 적용하는 등의 불편함을 줄여준다)
   • a
     • a는 Anchor를 의미한다. 서로 다른 웹 페이지 사이를 이동하거나, 페이지 내부에서 특정한 위치로 이동하기 위한 태그임
     • href 속성을 이용하여 하이퍼링크로 활용하나, 특정 id를 참조하여 페이지 내 이동기능으로도 활용가능(참고로 HTML5 이전에는 id대신 name을 활용하였음)
     • id 속성을 이용하여 추후 이동에 활용할 Anchor 설정이 가능하다(아래는 예시)

<a href = "#point1">1번 단락</a></br>
<a href = "#point2">2번 단락</a></br>
...
<p><a id = "point1">1번 단락</a></p>
<p><a id = "point2">2번 단락</a></p>

	* target 속성 : 지정된 href 주소를 보여줄 웹 브라우저의 위치를 지정. _self : 현재탭에서 열기 / _blank : 새탭에서 열기 / _top : 상단으로 이동
	* download속성 : 주소를 보여주지 않고, 파일을 즉각 다운로드 시작하는 속성

3. 글자태그
   • b : 굵게
   • i : 이탤릭
   • small : 작은 글자
   • sub : 아래로 바짝 붙는 글자
   • ins : 밑줄글자
   • del : 취소선 글자

 

목록 태그

기본 목록 태그

1. li
   • 개요
     • list item의 약어로, ul, ol 태그의 내부에서 사용되는 태그
     • 목록의 내용이 되는 실질적 태그
     • 들여쓰기, 줄바꿈 기능이 있음
   • 속성
     • type속성은 ol목록의 경우 ‘1/a/A/i/I’, ul의 경우는 'disc/square/circle’로 지정가능하다. 구버전 지원(래핑) 덕분에 사용은 가능하나, 공식적으로 HTML5는 type 속성 미지원임(이전버전 지원에 따라 활용가능하므로, 어찌되었든 에러가 나지는 않는다)
     • value속성 입력시, 목록의 번호를 해당 번호부터 시작, 증가시킨다(ol태그를 이용할 때 해당됨)
2. ul : unordered list의 약어. 번호 없이 사용하는 목록으로, type속성을 이용하여 글머리표를 사각형/원형/채워진원형으로 지정가능
3. ol : ordered list의 약어.
   • 숫자 또는 알파벳 순으로 순서를 부여하는 목록이다.
   • start, type 및 reversed 속성은 HTML5부터 사용가능
     • start : 시작 숫자 지정
     • type : '1/a/A/i/I’로 숫자의 형태 지정
     • reversed : 숫자가 감소하도록 설정
   • compact속성은 미지원
     
     

 

정의 목록 태그

1. dl : defenition list. 목록을 만드는데 사용
2. dt : defenition term. 용어의 제목을 나타내는 태그. 줄 바꿈 기능을 가짐.
3. dd : 용어에 대한 설명을 나타내는 태그
   
   

 

테이블 태그

1. table
   • 기능 : 표 선언. 과거, 테이블태그는 HTML 문서의 틀을 잡는데 사용되었으나, 현재는 오로지 표를 만드는데만 사용하고 있다.
   • 속성 : 미지원(구버전 래핑에 의해 사용은 가능함), CSS에서 지정권장
     • align : 셀 내부 텍스트 정렬
     • bgcolor : 배경색상 지정
     • border : 경계선 여부 지정
     • cellpadding : 셀 내부 여백 지정
     • cellspacing : 셀간 간격 지정
2. caption : 표의 제목을 생성
3. tr, th, td
   • 태그
     • tr : table row. 행을 생성
     • th : table header. 행의 타이틀 열을 생성 (tr태그 내부에서 사용함. 별도의 폰트를 사용할 셀을 지정하는데 그 의미가 있다.)
     • td : table data. 열을 생성 (tr태그 내부에서 사용함)
   • 속성
     • rowspan : 행방향으로 합칠(확장할) 셀의 수를 지정. 0 입력시 추후의 모든 셀을 합침
     • colspan : 행방향으로 합칠(확장할) 셀의 수를 지정. 0 입력시 추후의 모든 셀을 합침
4. colgroup : 표의 서식 지정을 위하여 하나 이상의 열을 그룹화
5. thead : 표의 머리글 내용을 그룹화
6. tfoot : 표의 꼬리말 내용을 그룹화
7. tbody : 표의 본문 내용을 그룹화
   
   

 

영역태그

개요

1. 과거에는 Table태그를 사용하였으나, Table태그는 정보를 담기위한 태그인만큼 수정에 오랜시간이 걸리는 단점이 있었음
2. 웹페이지 레이아웃의 구성을 위하여 별도의 영역태그를 활용함으로써, CSS와의 연동 및 빠른 작성에 시너지 효과를 발휘
3. 특히, 영역태그를 이용해 ‘의미를 부여하여 공간을 분할하는 기능’을 활용하고 있음

div

HTML문서에서 부분 혹은 섹션을 정의한다. CSS스타일을 지정하거나, 자바스크립트로 특정 작업을 수행하기 위해 다른 HTML요소의 컨테이너로 사용되는 편이며, CSS와 함께 웹 페이지를 레이아웃할 때 자주 사용된다.

span

문서의 ‘인라인 요소’를 그룹화 하는 태그다. 인라인 요소란 한 줄에 여러 가지 요소가 들어오는 상태를 의미한다. 따라서 줄글이 끊기고 변경되는 div와 달리, 줄글이 이어지는 상태가 변경되지 않으면서도, 텍스트의 일부 혹은 문서의 일부에 스타일을 추가하기 위한 방법을 제공한다(레이아웃계의 id)

 

시멘틱 구조 태그 개요

1. 시멘틱 웹
   • 어떤 개념인가? : 의미론적인 웹이라는 뜻이다. 여러 가지 기능을 활용하여 컴퓨터가 정보를 이해하고 다양한 정보 간 관계를 연결하여 지능적 판단을 하여 추출, 가공하는 처리방식을 의미한다. 위키에서는 현재의 인터넷과 같은 분산환경에서 각종 파일, 문서상의 정보를 기계가 처리할 수 있는 코드(온톨로지)로 표현하고, 이를 컴퓨터가 처리할 수 있도록 지원하는 기술/프레임워크라고 설명하고 있다.
   • 시맨틱 구조는 웹에 어떤 변화를 주는가? : 컴퓨터가 웹문서를 읽어 들일 수 있는 방법에 맞춰 작성하기 때문에 틀이 정형화/표준화 된다. 아래 기본구조와 같이 특정 부분을 나타내는 태그를 사용하고, 메타데이터를 표기하는 것이 이러한 작업의 일부로 볼 수 있다.
2. 기본구조

시멘틱 코드가 지칭하는 위치

 

• header : 서론, 섹션의 목차, 검색, 로고 등이 삽입되는 부분
• nav : 페이지 이동을 이한 메뉴들이 모여 있는 곳
• aside : 사이드에 위치하는 공간을 의미. 보조메뉴나 광고등이 위치함
• section : 여러 중심내용을 감싸는 공간
• article : 글자가 많이 들어가는 부분을 의미, 콘텐츠의 내용이 들어가는 부분
• footer : 웹페이지의 바닥글