HTML의 개념
HTML
HTML(HyperText MarkupLanguage)
웹을 이루는 가장 기초적인 구성요소이다.
HTMl은 웹 페이지의 내용을 서술하고 정의하는데 사용된다.
(HTML은 태그라는 문법적 특성이 있고 웹화면의 요소를 표현한다.)
HTML의 특징
HTML의 기본 구조
html, head, body
글의 내용을 정의하는 태그들
글의 성격이나 구성을 위해 사용되는 태그들이다.
Heading 태그
제목을 구상할때 사용되는 태그 이며 단걔는 h1 부터 h6 까지 나누어진다.
<h1></h1> // 최상위 주제
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> // 하위 주제Paragraph 태그
하나의 문단을 지정할 때 사용된다. 이 태그로 지정된 문장은 하나의 문단으로 묶여 화면에 보여진다.
<p>테스트 문서 입니다. p태그를 이용하면 띄어쓰기
줄 바꿈등이 하나의 문단으로 묶입니다.</p>Break 태그
HTML에서는 코드 상에서 줄바꿈을 해도 웹 페이지 상에서는 줄바꿈이 되지 않는다. 줄바꿈을 하려면 break태그를 사용해야한다. br 태그는 한 쌍으로 이루어지지 않고 하나로만 이루어지는 홀태그이다.
테스트 문장입니다.<br>
다음줄로 줄바꿈 되었습니다.Italic 태그
태그 내부의 글자를 기울임체를 적용할때 사용한다.
이 문장에서 <i>이부분</i>은 기울임체가 적용되어 있습니다.Strong, Bold 태그
특정 글자들을 강조하고 싶을 때 사용한다. (굵게 보인다.)
이 문장에서 <strong>이부분은</strong> 강조되었습니다.
이 문장에서 <b>이부분은<b> 강조되었습니다.Horizontal rule 태그
문서 내에 가로선을 넣고 싶을 때 사용한다. 이 태그도 홀태그 형태이다.
이부분의 아래에는 가로선이 있습니다.
<hr>
이부분의 위에는 가로선이 있습니다.리스트를 나열하는 태그
Ordered list 태그
순서대로 나열하는 태그이다.
<ol>
<li>T</li>
<li>A</li>
<li>B</li>
</ol>결과 :
- T
- A
- B
Unordered list 태그
순서가 정해지지 않은 항목을 나열할 때 사용한다.
<ul>
<li>T</li>
<li>A</li>
<li>B</li>
</ul>결과 :
- T
- A
- B
HTML 요소의 두 형태
화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉜다.
Block
태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지한다. 레이아웃 영역을 지정할 때 주로 사용된다.
Inline
태그의 내용에 맞춰서 너비가 결정된다. 레이아웃에 영향을 주지 않고 일부 내용에서만 스타일이나 내용의 구분을 주고 싶을 때 사용한다.
Block 요소
화면의 레이아웃, 얼개를 짜거나 구성을 나눌 때 자주 사용. 이 요소에 css 스타일을 적용해서 화면의 레이아웃을 완성함
div: block요소의 대표적인 태그로 아무 의미를 담지 않는 블록 요소로 아래의 블록 요소들의 상위 개념 section : 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록요소 article : 동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소 header : 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소 footer : 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소
Inline 요소
화면의 레이아웃에 영향을 미치지 않고 특정 내용을 강조하거나 구분하고 싶을 때 사욯나다. 우리가 앞에서 배운 b, i등의 요소가 이에 속하고 대표적인 태그로 span이 있다.
span : 아무 의미도 내포하지 않은 대표적인 inline 요소. css 스타일과 함께 특정 내용을 강조 하거나 구분하고 싶을 때 사용한다.
Inline 요소
section, header등의 레이아웃 구성을 위한 태그들은 전부 div로 대체해서 사용은 가능하지만 스크린리더 등의 Accessibility를 고려해서 가능하면 의미를 내표하고 있는 태그를 사용할 것을 권장함
css의 스타일 중 display 속성을 이용하면 div 등의 기존 block요소를 위한 태그도 inline요소로 바꿔서 보여지게 할 수 있고 span 등의 inline 요소도 block요소로 표현 하는것도 가능함
하지만 가능하면 기본형텡 맞게 사용하는 걸 권장함
