Written

HTML이란 본문

Front-end/HTML & CSS

HTML이란

steeringhead 2022. 12. 8. 17:31
웹페이지 생성을 위한 도구


HTML , CSS , Javascripts 이 세가지를 통해 우리가 사용하는 웹페이지를 만들 수 있습니다.

사람으로 비유를 하면 HTML은 골격 CSS는 옷과피부 Javascripts는  뇌,근육,신경등 움직임을 담당한다고 비유합니다.

구조를 HTML로 형성하고 CSS로 살을 붙이고 Javascripts를 통해 동력을 불어 넣어준다고 이해하면 좋을 것 같습니다.

 

 

 

 

HTML

 

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, HTML 요소는 태그를 사용해서 다른 텍스트와 구분합니다. < 태그이름 >을 통해 웹 페이지의 골격을 만들어 냅니다. HTML은 결국 < "Tag name" >으로 모든 골격을 세운다고 생각하셔도 될 것 같습니다.

 

태그의 내용이 끝나는 지점을 알리기 위해 닫는 태그( < / 태그이름 > ) ' / '를 사용하여 여는태그 - 내용 - 닫는태그의 형식으로 사용하고 빈 요소와 같은 경우에는 닫는태그 없이 태그를 사용할 수 있습니다.

 

● HTML elements (Tag)

 

<head>

HTML <head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목 , 스크립트 , 스타일 시트 등이 있고 <head>태그의 주 목적은 기계가 어떤 처리를 하기 위한 정보를 담는 것 입니다. 최상위 제목 , 작성자 목록 등 사람에게 보여야 할 정보는 <header>태그를 사용합니다.

 

Example)

<!doctype html>
<html>
  <head>
    <title>문서 제목</title>
  </head>
</html>

 

<body>

HTML <body> 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <body> 요소만 존재할 수 있습니다. 

우리가 웹페이지 화면상에서 볼 수 있는 내용들이 <body>태그 안에 들어가 있는 태그들의 집합으로 인해 만들어 진다고

생각하시면 됩니다. 즉, 화면에 보이는 내용들을 사용자가 볼 수 있게 찍어낼 수 있는 태그입니다.

 

Example)

<html>
  <head>
    <title>문서 제목</title>
  </head>
  <body>
    <p>문단입니다</p>
  </body>
</html>

 

HTML 문서의 큰 틀을 담당하는 head태그와 body태그에 대해서 알아보았습니다. 웹페이지를 구성하게 도와주는 수 많은 태그를 내가 만들고자 하는 용도에 맞게끔 적절하게 사용하면 , 유익한 웹 컨텐츠를 만들 수 있습니다. 태그가 정말 많기 때문에 여기서 다 다루는 것은 효율적이지 않고 , 필요할 때마다 구글링을 통해 공부하며 사용하며 자연스럽게 익히는 것이 좋은 것 같습니다. https://developer.mozilla.org MDN 사이트를 이용하면 세부적인 내용까지 자세히 공부 할 수 있고 , 또한 여기서 모르는 것을 구글링을 통해 공부하면 HTML을 익히는데 큰 도움이 될 것 입니다 !

 

 

 

 

 

  • Global Attributes ( 전역 속성 )

전역 속성은 모든 태그에서 사용 가능한 특성입니다. 말 그대로 특별한 성질을 갖게하는 키워드라고 생각하시면 됩니다.

어떤 태그에서도 사용가능합니다. 하지만 일부 요소에서는 아무런 효과가 없을 수도 있습니다. 

 

Example)

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

<p>태그 안에서 id라는 이름의 전역속성이 사용되었습니다. id는 문서 전체에서 유일한 고유식별자를 정의합니다.

고유식별자의 목적은 특정 요소를 가리키고 싶거나, 스크립트 및 스타일 적용시에 특정 요소를 식별하기 위함입니다.

 

  • Attributes

Attributes(속성)는 전역 속성과는 다르게 특정 태그에서만 사용할 수 있으며 속성의 이름을 보면 우리가 그 속성이 어떤

역할을 하게될지 어느정도 유추 할 수 있습니다. (전역 속성 역시 이름을 통해 어느정도 역할을 유추할 수 있습니다) 

 

Example) 

<form>
  <div class="group">
    <input type="text" />
    <label>Normal</label>
  </div>
  <div class="group">
    <input type="text" required="required" />
    <label>Required</label>
  </div>
  <input type="submit" />
</form>

required라는 이름의 속성이 <input>태그 안에서 사용되고 있습니다. 우리가 웹페이지에서 어떠한 정보를 제출할 때(우리가 제출하는 정보는 보통 서버로 전송되어 서버에서 관리하게 됩니다), required 특성이 적용된 항목에는 반드시 내용이 담겨져 있어야만 정상적으로 제출이 됩니다. 

 

@Global Attributes와 Attributes는 일반 프로그래밍 언어에서 전역 변수와 지역 변수의 차이와 비슷하다고 생각 하시면

도움이 될 것 같습니다. 전역 변수는 말그래도 어디에서나 사용가능한 반면 , 지역 변수는 scope를 벗어나면 사용 할 수

없는 것과 비슷한 맥락으로 생각해봐도 좋을 것 같습니다.

 

Example) 출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required

저작자표시

'Front-end > HTML & CSS' 카테고리의 다른 글

HTML / CSS 프로젝트 과제  (0) 2023.01.08
'Front-end/HTML & CSS' Related Articles more
Comments