Chat 상우

[Front] Html 구조 및 개념과 마크업의 특징 본문

Front

[Front] Html 구조 및 개념과 마크업의 특징

chat-rilla 2023. 10. 11. 17:51

Html(Hypertext Markup Language)

Html은 프로그래밍 언어라기 보다는 우리가 보는 웹페이지가 어떻게 구조화 되어있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. html은 elements로 구성되어 있으며 이들을 활용하여 컨텐츠의 여러부분을 감싸고 마크업 하는 언어라고 생각하면 된다.

 

Html 구조

html구조 이미지

  1. 여는 태그(Opening tag) : 이것은 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성된다.
  2. 닫는 태그(Closing tag) : 이것은 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그(opening tag)와 같으며 이것은 요소의 끝에 위치한다. 닫는 태그를 닫지 않아도 문제가 없을 수 있으나 이것은 유지보수 성을 저하시키며 이후 spa 프레임워크와 같은 곳에서 많은 에러를 발생시킨다.
  3. 내용(Content) : 요소의 내용이며, 이 경우 단순한 텍스트이다.
  4. 요소(element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 한다.

모든 html이 위와 같은 속성을 지니는 것은 아니며 태그에서 속성으로만 이루어 진 태그도 존재한다. 이와 함께 속성이 없이 사용할 수 있는 태그도 존재한다. 이러한 태그도 닫는 것을 의미하는 /를 추가해주어야 나중에 문제가 없다.

 

element 특징

Html에는 두가지 종류의 Element가 존재하며 블럭 요소와 인라인 요소가 있다.

블럭요소의 색상을 입혀 화면의 크기를 캡쳐하였다
블럭 요소의 배경색을 지정하고 화면에서 캡처한 모습

블럭 레벨 요소(Block-level elements)  & 블럭태그(Block Tag)

블록 레벨요소는 앞뒤 요소 사이에 새로운 줄(line)을 만들고 나타내며 즉, 블록 레벨 요소 이전과 이후 요소의 줄을 바꾸는 역할을 하게되어 단락 네비게이션 메뉴 등과 같이 화면의 레이아웃을 구성할 수 있다. 블럭 요소의 경우 높이는 요소의 크기를 따라가게 되지만 넓이는 화면의 전체를 차지하게 되며 이는 css 속성으로 조절하여 크기를 맞추는 것이 가능하다. 레이아웃을 구성하는 태그는 여러가지가 존재하는데 이는 각각의 시멘틱을 가지고 있어 레이아웃을 구성하고자 하는 경우 대표적인 div 만을 사용하는 것이 아닌 다른 시멘틱 태그를 사용하는 것이 좋다.

인라인 요소의 크기를 확인하기 위한 캡쳐모습
인라인 태그를 캡쳐하고 배경을 지정하였다

인라인 레벨 요소(Inline-level elements) & 인라인태그(Inine Tag)

인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어와 같은 작은 부분에 대해서만 적용을 할 수 있다. 인라인 요소의 경우 새로운 줄을 만들지 않고 크기와 넓이가 콘텐츠가 가진 크기 만큼 차지를 하게된다. 인라인 요소는 글자를 표현하기 위해서 만들어졌다고 생각을 해도 무방하며 이러한 특징으로 인해 크기와 넓이 같은 사이즈 조절은 불가능하다. 또한 인라인 요소는 블럭 요소를 포함할 수 없다는 것을 주의하자.

빈태그의 구조를 이미지로 표현
빈태그의 사용법

빈태그(Empty tag)

모든 요소가 위에 언급된 내용과 같이 여는 태그, content, 닫는 태그와 같은 패턴으로 구성이 되어 있지 않다. 주로 문서에 무엇을 추가 하거나 첨부하기 위해 단일 태그(Single Tag)를 사용하는 요소도 많다. 대표적인 것이 <img> 이며 해당 요소는 위치에 이미지를 삽입하기 위한 용도로 사용하는 태그이다.

 

속성(Atttibutes)

태그에 속성을 넣는방법

Elements는 수많은 속성을 갖고 있으며 이를 통해 다양한 기능을 하게된다. 그렇기 때문에 우리는 모든 속성을 외우려고 하기 보다 그냥 어떠한 기능이 있는지 파악하고 사용법을 익혀가는 것이 좋다.

요소는 이미지와 같은 형식으로 여는 태그 내부에 속성을 추가하는 것이 가능하며 class는 class이름을 지정해주는 곳이다. 이는 나중에 css에서 클래스의 이름에 디자인 작업 시 사용하게 된다.

 

속성의 규칙

  1. 여는 태그 내부에 추가를 해야한다.
  2. 속성 이름 다음엔 등호(=)로 값을 지정해야 한다.
  3. 속성의 값은 “” ←로 쌍따옴표로 열고 값을 넣고 닫아야한다.

boolean 속성

참과 거짓의 데이터 자료형을 나타내는 단위인 boolean을 의미하는 것이다. 일반적으로 속성의 이름과 동일한 하나의 값만을 가질 수 있으며 요소에 할당하면 사용자가 데이터를 입력할 수 없도록 비활성화를 할 수 있는 disabled 속성이 있다. 해당 속성은 input 태그와 같이 값을 입력하는 태그에서만 사용이 가능한 속성이다.

 

html 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
		<style>
		    div{
		        background-color: bisque;
		    }
		    span{
		        background-color: blue;
		    }
		</style>
</head>
<body>
    <input type="text" value="disabled" disabled/> <br>
    <input type="text" value="Not disabled " />
</body>
</html>

Html은 다음과 같은 구조를 갖게되며 각 요소의 내용은 다음과 같다.

  1. <!DOCTYPE html> : 문서의 형식을 나타낸다. 이는 1991시 html 페이지의 작동 오류 검사와 같은 기능을 추가하기 위해 해당 페이지의 다른 외부 링크 주소를 첨부하였다.
  2. <html></html> : <html> 전체 페이지의 콘텐츠를 포함하며 기본 요소로 사용된다.
  3. <head></head> : 해당 요소는 홈페이지 이용자에게는 보이지 않으나 검색 결과에 노출될 키워드, 홈페이지 설명, css 스타일, 인코딩 설정 등 html 페이지의 모든 내용을 담고 있다.
  4. <meta charset=”utf-8”/> : 해당 요소는 html 문서의 문자 인코딩 설정을 UTF-8로 설정한 것이며 UTF-8은 전세계에서 사용되는 언어의 대한 대부분의 문자가 포함된 언어이다.
  5. <title></title> : 페이지의 제목을 설정할 때 사용하는 속성으로 로드되는 브라우저의 탭에 표시되는 제목으로 사용된다.
  6. <body></body> : 사용자에게 직접 보여질 화면을 의미하며 해당 부분은 컨텐츠를 담게 된다. 대표적으로 텍스트, 이미지, 비디오와 같은 우리의 서비스를 제공하는 곳이다.
저작자표시 비영리 변경금지

'Front' 카테고리의 다른 글

[Front]시멘틱 태그와 웹 접근성의 대하여  (0) 2023.10.14
React Class Component lifeCycle  (0) 2023.08.24
React 컴포넌트 분리 State 배열 값 추가 및 삭제 방법  (1) 2023.08.22
웹 브라우저 구조와 동작 개념  (0) 2023.08.21
'Front' Related Articles more