요소와 속성을 정의하고 중요한 용어들을 살펴본다. HTML 요소를 구조화하는 방법, 언어의 중요한 기본 특징을 설명한다.
사전 지식 | |
목표 | HTML언어에 대해 익숙해지고, HTML을 이용하여 실습해봅니다. |
HTML이란?
HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고 웹페이지의 구조를 브라우저가 알 수 있도록 하는 마크업 언어다.
HTML은 elements로 구성되어 각 컨텐츠의 부분들을 감싸고 마크업한다.
tags는 웹 상의 다른 페이지로 이동하게 하는 하이퍼 링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 한다.
“My cat is very grumy”
다음의 문장을 그 자체로 표시하고 싶다면, <p> 태그로 감싸 엘리먼트를 문단으로 명시할 수 있다.
<p>My cat is very grumpy</p>
JavaScript
복사
참고 : HTML 요소는 대소문자를 구분하지 않는다. 하지만 가독성 문제로 소문자로 작성한다.
1.
여는 태그(Opening tag): 이것은 요소의 “이름”과(이 경우 “p”), “열고 닫는 꺽쇠 괄호”로 구성된다.
요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작한다.
효과?
2.
닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치한다.
3.
내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
4.
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.
요소 안에 다른 요소가 들어갈 수 있다.
<p>My cat is <strong>very</strong> grumpy.</p>
JavaScript
복사
아래와 같은 문장은 중첩(重疊 : 서로 포개어(overlap 또는 stacking) 지거나, 엇갈려 겹쳐짐)되었으므로 잘못된 문장이다.
<p>My cat is <strong>very grumpy.</p></strong> ❌
JavaScript
복사
잘못 된 내포에도 불구하고 어떤 브라우저에서 이상없이 보일 수도 있다. 하지만 그저 그 브라우저가 문법에 흐물흐물(permittable)해서 웬만한 오류는 자체 수정해서 브라우저 창에 렌더링해주기 때문이다. '웬만한 오류는 알아서 처리해 준다.' 는 부분에서 초보자는 특히 주의해야 한다.
•
블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소이다.
블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타납니다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꾼다.
블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus), 꼬리말(Footers) 등을 표현할 수 있다.
블록 레벨 요소는 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있다.
[예시]
<em>first</em>
<em>second</em>
<em>third</em>
<p>fourth</p>
<p>fifth</p>
<p>sixth</p>
JavaScript
복사
first second third
fourth
fifth
sixth
JavaScript
복사
참고: HTML5에서 요소 분류를 재정의했다: Element content categories. 이러한 정의는 이전의 정의보다 더 정확하고 덜 모호하지만, "블록"과 "인라인"보다 이해하기 훨씬 더 복잡하기 때문에, 이 주제 내내 이 정의들을 고수한다.
참고: 이 주제에서 사용되는 "블럭(block)"과 "인라인(inline)"의 뜻은 the types of CSS boxes (en-US)에서 사용하고 있는 같은 단어와 혼돈하면 안된다. 기본적으로는 상관관계가 있지만 CSS 표시 유형을 변경해도 요소의 범주는 변경되지 않으며 요소가 포함할 수 있는 요소와 요소가 포함될 수 있는 요소에는 영향을 주지 않는다. HTML5가 이러한 용어들을 삭제했던 이유 중 하나는 이러한 다소 흔한 혼란을 막기 위해서였다.
모든 요소가 위에 언급된 여는 태그, 내용, 닫는 태그 패턴을 따르는 것은 아닙니다. 주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있습니다. 예를 들어 <img> 요소는 해당 위치에 이미지를 삽입하기 위한 요소입니다:
“단일 태그”를 사용하는 <img> 같은 요소는 Empty elements다.
참고: 빈 요소는 가끔 Void 요소로 불리기도 한다.
속성을 사용할 때에는 아래 내용을 지켜야 한다:
1.
요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
2.
속성 이름 다음엔 등호(=)가 붙습니다.
3.
속성 값은 열고 닫는 따옴표로 감싸야 합니다.
