인터넷이 시작된 이래 HTML은 월드 와이드 웹이 작동하고 원하는 방식으로 표시되도록 하는 데 중요했습니다. HTML이 무엇이며 어떻게 매일 보는 페이지로 바뀌는지 살펴보겠습니다.
인터넷의 중추
HTML은 “하이퍼텍스트 마크업 언어”를 나타냅니다. 웹 브라우저가 표시할 수 있는 페이지를 만드는 데 사용되는 코딩 언어입니다. 지금 이 기사를 읽고 있는 페이지를 포함하여 인터넷에서 찾은 대부분의 웹 페이지는 HTML 파일로 저장됩니다. 웹사이트는 서버 어딘가에 저장된 관련 HTML 페이지의 묶음입니다. 그렇기 때문에 언어를 종종 “인터넷의 중추”라고 부릅니다.
인터넷의 페이지로 이동할 때마다 본질적으로 서버에 저장된 HTML 파일을 요청하는 것입니다. 그런 다음 Chrome 또는 Firefox와 같이 사용 중인 브라우저에서 HTML을 구문 분석하여 의도한 방식으로 표시합니다.
HTML의 보편성과 다양성으로 인해 HTML은 세계에서 가장 인기 있는 단일 마크업 언어가 되었습니다. 대부분의 프론트엔드 웹 개발자는 HTML로 코딩하는 방법을 배우는 것으로 시작합니다. 끌어서 놓기 도구와 WYSIWYG 편집기는 브라우저가 구문 분석할 수 있도록 결국 HTML로 변환됩니다.
관련된: 마크업 언어란 무엇입니까?
HTML 작동 방식
모든 프로그래밍 언어와 마찬가지로 HTML은 전면 비주얼로 바뀌기 전에 많은 명령과 텍스트 블록처럼 보입니다. 이 특정 페이지의 HTML이 어떻게 보이는지 궁금하고 데스크탑이나 노트북을 사용 중이라면 이 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 “페이지 소스 보기”를 선택하십시오(옵션은 브라우저에 따라 다를 수 있음 ). 그것은 당신을 거대한 코드 벽으로 데려갈 것입니다.
대부분의 HTML은 페이지에서 서로 다른 요소를 구분하는 HTML 코드 스니펫인 “요소 블록”을 사용하여 작성됩니다. 예를 들어, 이 기사의 본문은 메뉴, 아래 권장 사항 및 페이지 바닥글과 마찬가지로 요소 블록입니다. 이러한 요소는 다르게 작동할 수 있으므로 고유한 방식으로 코딩됩니다.
HTML 페이지 작성의 중요한 부분은 CSS(Cascading Style Sheets)를 사용하는 것입니다. 이것은 페이지의 특정 요소가 어떻게 생겼는지 정의하는 문서입니다. 예를 들어 이미지가 얼마나 커야 하는지, 페이지에 어떤 글꼴이 표시되어야 하는지, 웹 페이지가 크기가 조정되거나 늘어날 때 어떻게 반응해야 하는지 등입니다. 이것들은 모두 매력적이고 응집력 있고 세련된 웹 사이트를 만드는 데 중요합니다. 지난 10년 동안 웹 사이트가 더 좋아지기 시작했다는 것을 알게 된다면 CSS 사용이 증가하는 것이 가장 큰 이유입니다. CSS에 대한 자세한 내용은 여기에서 읽을 수 있습니다.
HTML의 가장 좋은 점 중 하나는 JavaScript 또는 JS를 통해 동적 스크립트를 실행할 수 있다는 것입니다. 이러한 스크립트는 동적 요소를 생성할 수 있습니다. 예를 들어, 특정 웹사이트에서 이미지를 가리키면 확대할 수 있습니다. JavaScript 요소에서 코딩하여 이 효과를 만들 수 있습니다.
관련된: Chrome에서 JavaScript를 비활성화(및 활성화)하는 방법
HTML 기초
HTML은 다양한 태그와 블록이 있는 상당히 복잡한 언어이지만 웹을 탐색할 때 유용할 수 있는 몇 가지 HTML 코드가 있습니다. 다음은 접할 수 있는 몇 가지 기본 HTML 태그입니다.
<a href="https://www.howtogeek.com">How-to Geek</a>
How-To 괴짜
당신은 사용 <a> 링크를 생성하는 명령입니다. URL은 링크가 가리키는 곳이고 “How-to Geek”이라는 텍스트는 최종 사용자에게 어떻게 보일지입니다.
<b>bold</b> <i>italic</i> <u>underline</u>
굵게 이탤릭체 밑줄
당신은 사용할 수 있습니다 <b>, <i>, 그리고 <u> 굵게, 기울임꼴 및 밑줄 텍스트와 같은 표준 텍스트 서식 옵션을 적용합니다.
<img src="https://www.howtogeek.com/752587/what-is-html/picture.jpg">
NS <img> 태그는 페이지에 이미지를 삽입하는 데 사용됩니다. 동일한 도메인에서 이미지를 가져오거나 외부 도메인을 가리킬 수 있습니다. 크기 조정 및 대체 텍스트와 같은 몇 가지 추가 속성을 사용하여 사용자 정의할 수도 있습니다.
<h1>heading 1</h1> <p>paragraph</p>
위는 머리글 및 단락 태그입니다. Microsoft Word에서 텍스트를 머리글과 본문 텍스트로 정렬하는 방법과 유사하게 HTML은 기본 머리글 및 단락 옵션을 기반으로 텍스트 서식을 지정할 수도 있습니다. 이러한 형식은 CSS 스타일시트를 사용하여 정의됩니다.
<p style="color:edr;">red paragraph</p>
당신은 또한 사용할 수 있습니다 "style" 속성을 사용하여 텍스트 색상, 배경 색상 및 글꼴 크기와 같은 다양한 스타일 설정으로 텍스트를 사용자 정의합니다.
더 많은 HTML 형식 지정 옵션에 관심이 있다면 W3Schools의 무료 리소스를 확인하십시오. 웹 페이지 구축을 시작하는 데 사용할 수 있는 HTML 태그의 전체 목록을 찾을 수 있습니다.
관련된: “반응형 디자인”이란 무엇이며 어떻게 사용합니까?
