HTML 기초 문법(2)

 

HTML 요소의 두 형태

화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉨

• Block 태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지. 레이아웃 영역을 지정할 때 주로 사용
• Inline 태그의 내용에 맞춰서 너비가 결정. 레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용

 

태그(Tag)와 요소(Element)

태그는 HTML의 문법적 규칙이자 코드

요소는 실제 웹 페이지 화면에 그려지는 구성 요소

 

 

Block 요소

화면의 레이아웃, 구성을 나눌 때 사용

• div : block 요소의 대표적인 태그, 아무 의미를 담지 않는 블록 요소
• section : 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소
• article : 동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소
• header : 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소
• footer : 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소

 

 Inline 요소

화면의 레이아웃에 영향을 미치지 않고 특정 내용을 강조하거나 구분하고 싶을 때 사용

• span : 아무 의미도 내포하지 않음. CSS스타일과 함께 특정 내용을 강조하거나 구분할 때 사용

 

하이퍼미디어

웹 페이지 내 미디어를 통해 연관 정보로 넘어갈 수 있게 하는 연결고리. 링크를 의미

 

 

 a(anchor) 태그

특정 내용에 링크를 생성할 때 사용. href(hyper reference) 속성으로 이동할 리소스를 지정

 

 

img(image) 태그

이미지를 삽입할 때 사용. src(source) 속성으로 홀태그 형식

 

 

 embed 태그

외부 콘텐츠(mp3, mov.. 등)를 삽입할 때 사용

 

 

 표 작성하기

table : 표의 시작과 끝
tr : 표 하나의 행
th, td : 표의 열

<table>
<tr>
    <th></th>
    <th></th>
    <th></th>
</tr>
<tr>
    <td></td>
</tr>
<table>

 

 행 합치기

rowspan : 합칠 행의 순

<table>
<tr>
    <td rowspan=”2”></td>
    <td></td>
    <td></td>
</tr>
<tr>
     <td></td>
	   <td></td>
</tr>
</table>

열 합치기

colspan : 합칠 열의 순

<table>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
     <td></td>
		 <td colspan=”2”></td>
</tr>
</table>