안녕하세요.
Hynn 입니다.
이 글에서는 이전 포스팅에서 설명한 Block과 Inline의 개념을 바탕으로 둔 각각의 Element 를 정리하고,
Element 별 주로 사용되는 형태에 대해서 설명하도록 하겠습니다.
Block Element
이전 포스팅에서 설명했듯이 한 줄 영역 전체를 차지하는 Block 형태의 Element를 먼저 정리하도록 하겠습니다.
이 Porperty 유형 별의 Element 를 이해하지 않고 사용한다면 HTML로 구현하는 웹 사이트의 영역 정리가 불가할 수 밖에 없기 때문에
사용자는 이를 반드시 인지하고 작성을 해야 올바른 웹 페이지를 구현할 수 있습니다.
Block 속성을 가진 HTML Element 는 이후에 다루게 될 CSS에서 Width(넓이), Height(높이) 를 설정할 수 있습니다. 당연하게도 이 속성을 가진 HTML Element 뒤에 작성되는 컨텐츠는 항상 줄이 바뀌어 입력될 것입니다.
**이 포스팅에 작성된 Element 외에도 많은 Element 가 있기 때문에, 혹시라도 설명이 필요한 Element 가 있다면 댓글로 남겨주시면 감사하겠습니다.
======================================================================================
1) H1~H6
H1~H6 는 숫자별로 중요도 순서의 "제목" 이라고 생각하면 이해하기 쉽습니다.
대다수의 웹 사이트는 이를 통해 중요도를 나타내는 "제목" 영역이라고 생각하면 되는데, 대표적으로 H1 은 주로 홈페이지의 자사 로고를 H1 으로 감싸고, 중제목, 소제목, 카테고리 주제명을 H2~H6로 감싸는 형태가 되겠습니다.
만약 대표적으로 Naver나 구글에서 로고를 설정할때는 아래와 같은 형태로 H1 Element 안에, Image 를 넣는 형태로 로고를 추가하게 되며, 아래에 추가로 사용된 Img Element 는 별도로 설명하도록 하겠습니다.
HTML 작성 예시
<Body>
<h1>
<img scr="naver로고">
</h1>2) <Div>
Div는 가장 많이 사용하는 영역 설정 Element 입니다.
이 Element 는 앞선 포스팅에서 설명드린 것 처럼 Block 성질을 가지고 있는 대표적인 Element 이고, 이 Div를 이용하여 웹 페이지를 설정 시 영역을 설정하는 가장 대표적인 HTML Element 입니다. 우리가 잘 아는 Web Site 역시 대부분이 이 Div 를 이용하여 영역을 설정합니다.
*실제 네이버의 화면 구성도에서 사용된 Div
옆 이미지를 보시다시피,
HTML 페이지를 검사해보면, 3개의 div Element 를 사용하여, 페이지를 구성한 것을 알 수 있습니다.
실제 가장 많이 쓰이는 Element 이기도 하오니, 잘 숙지하면 도움이 될 것입니다.
*작성 예시
<body>
<div>
이 안에 컨텐츠 작성
</div>
3) <Header>, <Footer>, <Main>, <Article>, <Section> , <aside>, <nav>, <address>
DIV와 마찬가지로 이 두가지 모두 Block 이라는 특성을 가진 Element 이지만, 용도가 대다수 정해져있습니다.
이 기능들은 사실 DIV와 동일한 특성을 가지고 있지만, 콘텐츠의 구분을 짓기 위해 사용합니다. 모든 영역을 DIV로만 지정한다면, 컨텐츠의 영역이나, 구분이 쉽지 않을 것입니다.
- Header 의 경우, HTML 파일에서 "로고, 제목, 검색창" 등을 입력하는 문서의 윗 부분을 작성할때 사용되는 영역 설정 Element 입니다.
- Footer의 경우 문서의 "작성자,저작권,회사정보" 등의 항목을 나타내는 영역 설정 Element 입니다.
- Main의 경우 문서의 "주요 콘텐츠"를 작성하는 곳에서 쓰이지만, IE에서 지원이 불가합니다.
- Article의 경우, 독립적으로 구분되거나, 재사용 가능한 영역을 설정합니다. 대표적으로 뉴스,블로그 등에 적용하며, H1~H6를 포함하여 식별하고, 작성일자와 시간을 <TIME>이라는 Element 를 포함합니다.
- Section 의 경우, 문서의 일반적인 영역을 설정합니다. 하지만 요소의 콘텐츠를 외부와 구분해서 단독으로 묶는것이 낫다면 Article을 사용하기도 합니다.
- Aside 의 경우 문서의 별도 컨텐츠를 설정하고, 보통 웹 페이지에서 광고나 기타 링크 들을 설정합니다.
- Nav 의 경우 다른 페이지 링크를 제공하는 영역을 설정합니다.
- Address의 경우 Footer 내에서 연락처 정보를 제공하기 위해 사용하는 Element 입니다.
예시를 들어 네이버를 기준으로 설명시 Header와 Footer 의 영역을 표기해보겠습니다.
*네이버 웹 사이트의 Header 영역
*네이버 웹 사이트의 Footer 영역
*작성예시
<body>
<Header>
이 안에 로고를 비롯한 문서 상단의 영역이 들어갈 컨텐츠를 작성합니다.
</header>
<Footer>
이 안에 Copyright 같은 저작권정보, 회사정보 및 약관등을 작성합니다.
</Footer>
</body4) <UL>, <OL>, <LI>
이 세가지 Element 를 묶어서 설명하는 것에는 아래와 같은 이유가 있습니다.
UL과 LI의 Element 는 정렬된 목록을 나타냅니다. 주로 웹 사이트에서 메뉴를 정렬할때 사용하며, 대표적으로 네이버에서는 아래의 메뉴를 실질적으로 UL을 사용하여 작성합니다.
하지만 UL과 OL은 동일한 형태로 사용되는 Element 입니다. 하지만 대다수의 웹 페이지는 UL을 사용합니다.
UL과 OL은 사용시 반드시 하위 Element 에 LI라는 속성이 들어갑니다.
작성 예시를 보면, 구분점이 표시가 되는 것이 UL, 숫자목록이 표시되는 것이 OL입니다.
물론 이후에 작성될 CSS 기능을 이용하면 구분점,숫자목록을 제거하고 표시할 수 있기때문에, 작성예시와 실제 출력되는 화면도 예시로 확인해보도록 하겠습니다.
*작성 예시
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>위 HTML 작성시 실제 출력되는 화면
왼쪽 화면과 같이 UL 내의 LI 항목은 구분점 표시가 되어 1,2,3이 구현되어 있습니다.
즉, 각 UL에 포함된 1개의 LI Element 는 한개의 구분점을 사용합니다.
마찬가지로, OL에 포함된 LI Element 는 1부터 시작하는 숫자로 구분됩니다.
다만 OL과 , LI 는 특정한 "속성"을 설정할 수 있는데, 속성에 대한 설명은 다음 포스팅에서 자세하게 다루어 보도록 하겠습니다.
- OL의 속성Start - 항목에 매겨지는 번호의 시작 값Type - 항목에 매겨지는 번호의 유형 (Ex. a, A, i, I , 1..)
- LI의 속성
- value 항목의 순서를 설정합니다.
*작성예시 및 출력 화면
<body>
<ol type="A">
<li value="2">1</li>
<li value="1">2</li>
<li>3</li>
</ol>
<body>
5) <DL>, <DT>, <DD>
이 3개의 Element 는 항상 세트로 사용되는 항목들입니다.
각각 Desciription List, Definition Term, Definition Detail 이라는 이름의 약자이며, DL의 Element 안에 DT,DD가 포함되어야 합니다. 대표적으로 DL로 감싼 DT는 제목 형태로 표기되고, DD에서는 설명이 표시됩니다. 실제 작성 예시와 출력되는 화면을 본다면 아래의 그림과 같다고 생각하시면 되겠습니다.
*작성예시 및 출력 화면
<dl>
<dt>이 영역은 DT입니다.</dt>
<dd>이곳에 설명이 표기됩니다.</dd>
</dl>
5) <P>
이후에 다루게 될 <a> 와 함께 많이 사용되는 Element 입니다.
주로 하나의 문단을 나타내고, 문단 하나가 Block 속성을 갖게 됩니다. 이 Element 는 특정 Element 를 병행하여 사용하면, 별도로 </p>의 입력이 없이도 자동으로 닫힙니다. 태그 생략항목의 예시와 같이 참고하여 작성예시를 보도록 하겠습니다.
*작성예시 및 출력 화면
<p>안녕하세요. 저는 p 라고 합니다.</p>
하지만, 위에 언급된 것 처럼, <p> 요소의 바로 뒤에 <address>, <article>, <aside>, <div>, <dl>, <footer>와 같이 위에 설명된 요소가 위치하는 경우, p는 별도의 닫힘 태그를 생략할 수 있습니다.
<p>안녕하세요 저는 p라고 합니다.
<aside> 별도의 명령없이 닫힙니다.</asdie>
=========================================================
많이 적지 않은 것 같지만, 대표적으로 사용되는 Element 를 정리하였습니다.
다음 포스팅에서는 In-LINE 특성을 가진 Element 를 가지고 찾아뵙도록 하겠습니다.
'개발공부일지 > HTML' 카테고리의 다른 글
| HTML/CSS - Table 을 사용하여 표 만들기 (0) | 2022.11.21 |
|---|---|
| HTML/CSS - Display Flex 에 관하여 (0) | 2022.10.28 |
| HTML HTML 기본 개념 정리 및 가이드 - Inline Element (0) | 2022.10.21 |
| HTML 기본 개념 정리 및 가이드 - Block, Inline 알아보기 (0) | 2022.10.20 |
| HTML 기본 개념 정리 및 가이드 - 기초 (0) | 2022.10.20 |
댓글