분류 html

초심자를 위한 HTML

컨텐츠 정보

  • 조회 521 (작성일 )

본문

HTML은 웹 페이지를 만드는 데 사용됩니다.


이 기사에서는 HTML의 기초를 배울 것입니다. 또한 실제 웹 페이지를 만드는 맥락에서 HTML을 가르치는 freeCodeCamp.org YouTube 채널에서 45분 길이의 비디오 과정을 만들었습니다.


HTML을 막 배우는 중이라면 이 기사를 읽고 비디오 과정을 시청하는 것이 좋습니다.


HTML은 Hyper Text Markup Language의 약자입니다. 인터넷의 모든 웹사이트는 HTML과 CSS를 사용합니다. 대부분은 JavaScript도 사용합니다.


웹사이트에서 HTML은 구조, CSS는 스타일, JavaScript는 기능입니다.


다음은 codeanalagies.com의 훌륭한 대화형 다이어그램입니다. 슬라이더를 앞뒤로 움직입니다.


cityBlock.png?resize=730%2C329&ssl=1 



요소를 마우스 오른쪽 버튼으로 클릭한 다음 "검사"를 선택하면 웹페이지의 모든 요소를 ​​구성하는 HTML을 실제로 볼 수 있습니다.


HTML Structure 


다음은 매우 기본적인 웹페이지를 구성하는 HTML입니다.


36266cd2d077720ed3668c30cfffe9b9_1629791718_1645.png
 

 더 분해해보자.


Elements 


HTML은 HTML 요소로 구성됩니다. 요소는 HTML의 개별 구성 요소입니다.


다음은 위 코드의 HTML 요소입니다.


<p>This is an amazing website!</p>

Tags 


HTML 태그는 요소의 시작과 끝을 표시하며 요소의 일부로 간주됩니다. 태그는 컨테이너입니다. 그들은 여는 태그와 닫는 태그 사이의 내용에 대해 알려줍니다.


위 요소에서 태그는 <p>(여는 태그)와 </p>(닫는 태그)입니다. 닫는 태그에 /가 있음을 알 수 있습니다. 이 특정 태그는 단락 태그입니다. HTML 문서의 단락을 지정합니다. 여는 태그와 닫는 태그 사이의 단어는 단락입니다.


html-tag-attributes.png 


요소의 종류 


요소는 컨테이너 요소(컨텐츠를 보유함)이거나 자체 폐쇄 요소라고도 하는 독립 실행형 요소일 수 있습니다.


단락 요소는 컨테이너입니다. <p>안녕하세요. 콘텐츠가 포함되어 있습니다.</p>


이미지 요소는 독립 실행형입니다. <img src="beau.jpg" />


독립형 img 요소에는 닫는 태그가 없지만 마지막 꺾쇠 괄호 앞에 /가 있습니다.


Attributes 


속성은 HTML 요소에 대한 추가 정보를 제공합니다. 속성 태그에는 class, id, style, lang 및 src(소스)가 포함됩니다.


다음은 속성 태그 ID가 있는 HTML 요소의 예입니다.


<p id="info">This is an amazing website!</p>

속성에 대해 주의할 사항:

  • 속성은 오른쪽 대괄호 앞에 있는 여는 태그 내부에 위치합니다.
  • 속성은 값과 쌍을 이룹니다(이 예에서 값은 정보임).
  • 키/값 쌍은 프로그래밍에서 중요한 개념입니다.
  • 속성은 요소에 따라 미리 정의된 가능한 속성 집합에서 선택됩니다.
  • 값은 속성에 할당되며 따옴표 안에 포함되어야 합니다.

다음은 속성이 있는 요소의 또 다른 예입니다.

<div class="container">
   A bunch of stuff!
</div>

Nesting 


HTML 요소는 서로 '중첩'됩니다. 먼저 열리는 요소가 마지막에 닫힙니다.


요소를 중첩할 때 중첩 수준을 표시하기 위해 공백과 탭이 자주 사용됩니다. 그러나 간격은 필수 사항이 아니며 HTML을 사람이 더 쉽게 읽을 수 있도록 하기 위해서만 사용됩니다.


다음은 몇 가지 수준의 중첩 요소가 있는 일부 HTML의 예입니다.


36266cd2d077720ed3668c30cfffe9b9_1629792018_7571.png
 

일반적인 HTML 태그 


다음은 거의 모든 HTML 문서에 있는 몇 가지 공통 태그입니다.


doctype: 모든 HTML 페이지의 첫 번째 요소입니다. 브라우저에 HTML과 사용할 버전을 알려줍니다. 최신 버전의 HTML의 경우 요소는 다음과 같아야 합니다. <!doctype html>


html: doctype 뒤의 모든 페이지 내용은 <html> 태그에 포함되어야 합니다.


head: 이 요소는 페이지 제목과 메타데이터를 포함합니다.


body: 이 요소는 페이지에서 볼 수 있는 모든 콘텐츠를 포함합니다.


title: 이 선택적 요소는 페이지 이름입니다. 항상 head 태그에 중첩됩니다.


div: 이 태그는 가장 많이 사용되는 태그 중 하나입니다. 다른 HTML이나 콘텐츠의 기본 컨테이너를 만드는 데 사용됩니다.


p: 본문 사본의 단락 또는 섹션.


h1-h6: 서로 다른 수준의 표제 또는 제목을 지정합니다.


ol: 순서가 지정된(번호가 매겨진) 목록을 만듭니다.


ul: 정렬되지 않은 목록을 만듭니다.


li: 목록 요소입니다.


Links 


앵커 요소( <a></a>)는 웹이나 프로젝트 내에서 다른 사이트로 연결하는 데 사용됩니다.


이 요소는 다른 웹사이트로 연결됩니다.


<a href="https://freecodecamp.com">freeCodeCamp</a> 


이 요소는 웹사이트의 다른 페이지로 연결됩니다.


<a href="about.html">About Me</a> 


<link> 요소는 다른 유형의 링크입니다. 앵커 요소와 달리 현재 문서와 외부 리소스 간의 관계를 지정합니다.


외부 CSS 파일을 사용하여 HTML의 스타일을 지정하도록 CSS 파일을 HTML 파일과 연결하는 데 자주 사용됩니다.


다음은 예입니다.


<link src="main.css" rel='stylesheet' /> 


Comments 


다른 좋은 코딩 언어와 마찬가지로 HTML은 주석을 제공합니다. 다른 언어의 주석처럼 작동합니다. 브라우저 엔진에서 무시됩니다.


<!-- Hello, I am a comment. --> 


Tables 


표는 복잡한 정보를 그리드 형식으로 표현하는 방법입니다. 행과 열로 구성됩니다.


테이블은 여러 요소로 구성된 복합 요소(목록과 유사)입니다.


table: Table element.


tr: Table row.


td: Table cell.


th: Table header cell (optional).


다음은 테이블의 예입니다. 먼저 HTML이 표시됩니다. 그러면 HTML이 어떻게 표시되는지 알 수 있습니다.


36266cd2d077720ed3668c30cfffe9b9_1629792347_0445.png
 

결론 


이제 HTML 구문의 기본 사항을 배웠습니다.


다음으로 간단한 웹 페이지를 구축하는 맥락에서 HTML을 가르치는 이 HTML 단기 집중 과정을 시청해야 합니다.



HTML을 배운 후에는 CSS와 JavaScript를 배워야 합니다. 나는 또한 그 주제에 대한 과정을 만들었습니다. 다음에서 시청할 수 있습니다.





출처 : https://www.freecodecamp.org/news/html-crash-course/