웹마스터가 되어 배우고 싶다면 웹 사이트를 만드는 방법, 당신은 HTML을 이해하는 것이 상당히 어렵다는 것을 알게 될 것입니다.

그러나 귀하가 방문하는 대부분의 웹사이트 랜딩 페이지는 HTML 요소를 사용하여 작성되고 구조화되므로 이는 피할 수 없는 일입니다. 사실 HTML은 이제 알려진 모든 웹사이트의 74% 이상에서 사용됨, 또한 이 언어는 사이트 디자인부터 사이트가 제공하는 콘텐츠의 품질까지 모든 것을 향상시키는 데 도움이 됩니다.

이 가이드에서는 웹 사이트를 코딩할 때 사용하는 개별 요소의 예를 살펴보기 전에 HTML의 기본 원칙과 잠재적인 응용 프로그램을 살펴보겠습니다.

HTML이란 무엇입니까?

간단히 말해서, HTML은 표준 마크업 언어를 나타냅니다. 온라인으로 웹페이지를 만드는 데 사용됩니다. 이는 Hyper Text Markup Language의 약자이며 가장 주요한 기능은 개별 랜딩 페이지의 구조, 레이아웃 및 프리젠테이션을 설정하는 것입니다. 웹 브라우저는 HTML 언어를 직접 표시하지는 않지만 가시적이고 접근 가능하며 사용하기 쉬운 사이트를 만드는 데 중추적인 역할을 합니다.

HTML은 또한 점진적으로 웹 페이지를 구축하고 콘텐츠 표시를 구조화하며 웹 사이트에 생기를 불어넣는 다양한 개별 요소의 기반을 이루고 있습니다. 이러한 요소는 제목, 단락 및 유사한 예와 같은 대체 콘텐츠 부분을 정의하는 '태그' 내에 생성되고 포함됩니다.

아래에서 이러한 요소와 그 구성을 더 자세히 살펴보고 웹 사이트에 색상, 링크 및 다양한 타이포그래피를 도입하기 위해 개인화할 수 있는 방법도 살펴보겠습니다.

HTML은 어디에 사용되나요?

보시다시피 HTML의 가장 일반적인 응용 프로그램은 웹 사이트를 구성하는 개별 랜딩 페이지의 디자인입니다. 이것이 널리 사용되는 코딩 도구의 유일한 응용 프로그램은 아니지만, 추가 용도를 이해하면 새로운 웹마스터로서 언어를 최대한 활용하는 데 도움이 됩니다. 따라서 HTML을 적용할 수 있는 몇 가지 추가 방법은 다음과 같습니다.

• 기존 페이지 내에 사용자 정의 가능한 요소 만들기. 허용하려는 경우 블로그 게시물 댓글 또는 웹사이트에 사용자 생성 콘텐츠를 게시하는 경우 HTML 코드 조각을 사용하여 이를 활성화할 수 있습니다. 이러한 요소를 통해 사용자는 중재자로서 적용한 제한 사항에 따라 키워드를 강조하고, 링크를 삽입하고, 댓글 형식을 지정할 수 있습니다.
• 이메일용 추가 콘텐츠 만들기. 이메일은 또한 일반 텍스트만으로는 표시할 수 없는 링크, 텍스트 및 기타 다양한 요소를 특징으로 하는 서식 있는 텍스트 메시지의 언어로 HTML을 사용합니다. 따라서 이메일을 통해 귀하의 웹사이트와 관련된 전자책을 공유하려는 경우 HTML을 활용하여 메시지의 영향을 최적화할 수 있습니다.
• 컴퓨터에 설치된 오프라인 도움말 문서 이해. 흥미롭게도 HTML은 오프라인에서 액세스할 수 있는 컴퓨터 기반 도움말 문서의 형식으로 사용됩니다. 따라서 HTML에 대한 기본 지식은 하드웨어 문제를 이해하고 더 빠르게 해결하는 데 도움이 될 수 있으며, 결과적으로 웹 사이트가 오프라인 상태가 된 경우 더 빠르게 웹 사이트를 복원할 수 있습니다.

HTML 페이지 구조

HTML 페이지를 구축하기 전에 기본 사항이 필요합니다.

일반적으로 페이지는 세 가지 구조 요소로 구성됩니다.

1. 머리글: 헤더에는 사이트의 모든 페이지와 관련된 콘텐츠가 포함되어 있습니다. 로고 같은 것 또는 웹사이트 이름 및 네비게이션 시스템. 헤더는 각 페이지에 표시됩니다.
2. 본체: 이는 웹페이지에서 가장 큰 영역을 차지합니다. 여기에는 현재 보고 있는 페이지와 관련된 콘텐츠가 포함되어 있습니다.
3. 보행인: 바닥글 콘텐츠에는 일반적으로 연락처 정보, 배송 주소 또는 법적 고지가 포함됩니다. 바닥글도 머리글과 마찬가지로 모든 페이지에 표시되지만 맨 아래에 위치합니다.

이러한 기본 구조 요소가 함께 모였을 때의 모습은 다음과 같습니다.

다음은 헤더 태그와 단락 태그를 사용하여 콘텐츠를 미학적으로 구성하는 또 다른 예입니다. 또한 페이지 본문 아래 콘텐츠에 대한 바닥글 태그를 추가했습니다.

HTML 태그

모든 HTML 코드의 시작점은 모든 중요한 요소를 생성하고 웹 페이지를 구성하는 데 도움이 되는 개별 태그입니다.

아래에서는 가장 일반적인 태그를 살펴보기 전에 태그를 활용하여 페이지의 특정 요소를 생성하는 방법을 살펴보겠습니다.

제목 태그

웹 페이지를 포함한 모든 온라인 문서는 제목으로 시작됩니다. 이는 HTML 태그를 사용하여 구성되며 현재 언어에서는 추가 제목, 부제 및 강조 표시된 굵은 텍스트 줄을 사용하여 콘텐츠를 구조화할 수 있는 가변 크기 요소를 최대 1개까지 허용합니다. 제목을 시작하려면 관련 텍스트 앞에 , , , , 또는 원하는 크기에 따라 태그를 지정하세요.

그런 다음 제목 끝에 닫는 태그를 적용하여 텍스트를 캡슐화해야 하며 HTML 형식으로 다음과 같이 표시됩니다.

확인되면 웹사이트 랜딩 페이지에 다음과 같은 미학이 적용됩니다.

여기서는 브라우저가 제목 앞과 뒤에 줄을 추가한다는 사실과 마찬가지로 가변 제목의 다양한 크기를 명확하게 볼 수 있습니다. 또한 제목 텍스트 끝에 있는 닫는 태그의 미학적 특성이 약간 다르다는 점을 알 수 있지만 태그를 사용하여 특정 요소를 정의하는 방법을 알아보는 다음 장에서 이 내용을 다룰 것입니다.

단락 태그

유사한 원칙이 시작 단락 태그에 적용됩니다. . 이를 통해 콘텐츠를 구조화하고 관련 단락으로 나눌 수 있으며, 이를 통해 더 쉽고 원활한 읽기 환경을 경험할 수 있습니다. 다시 한번, 태그는 효과를 완성하기 위해 대체 닫는 태그가 끝에 적용되기 전에 관련 텍스트의 시작 부분에 배치되어야 합니다. 그러나 제목 태그와 달리 단락에 포함된 텍스트의 크기를 변경할 수 있는 숫자형 변수는 없습니다.

HTML 형식 외부에서는 완성된 웹 페이지에서 텍스트가 다음과 같이 구분됩니다.

줄 바꿈 태그

첫 번째 예는 가장 기본적인 HTML 태그를 나타내지만 다른 형식과 대체 종료 방법을 활용하는 다른 예도 있습니다. 예를 들어 줄 바꿈을 사용하면 텍스트 줄이 끊어지고 다음 줄에서 계속되는 것을 구분할 수 있습니다. HTML 분야에서 줄 바꿈과 단락 사이에는 핵심적인 차이점이 있습니다. 후자는 텍스트를 포함하는 표준 블록 요소인 반면 전자는 기존 텍스트 내에서 분리를 만듭니다. 요소.

이 때문에 줄 바꿈은 HTML에서 빈 요소를 나타내므로 여는 태그나 닫는 태그로 정의되지 않습니다. 대신에 그들은 다음과 같이 묘사됩니다. 기존 태그에 삽입할 수 있는 태그 텍스트를 분할하고 잠재적으로 중요한 정보를 강조하는 요소입니다. 문자 사이의 단일 공백 슬래시가 중요합니다. 그렇지 않으면 HTML 형식에서 태그를 인식할 수 없습니다.

적용하고 나면 텍스트가 다음과 같이 나뉩니다.

보시다시피, 가치를 더하고 정보를 더 쉽게 소화할 수 있게 만드는 한, 기존 단락 요소 내에서 원하는 만큼 자주 줄 바꿈을 적용할 수 있습니다. 또한 열기 및 닫기 단락 태그는 변경되지 않고 그대로 유지되며 줄 바꿈 태그는 포함된 텍스트의 레이아웃을 수정하는 데 사용됩니다.

이는 HTML 태그를 사용하여 웹 페이지와 콘텐츠의 시각적 레이아웃을 정의하는 데 중요한 역할을 하는 기존 요소를 변경하는 방법에 대한 예 중 하나입니다.

수평선

마찬가지로, 요소를 사용하거나 웹페이지의 텍스트 본문을 추가로 분리할 수 있습니다. 가장 널리 사용되는 것 중 하나는 온라인 문서의 대체 섹션 사이에 시각적인 수평선을 그리는 빈 요소를 만드는 데 도움이 되는 태그입니다. 예를 들어 독자의 관심을 다시 끌거나 단순히 새로운 시각적 요소를 소개하기 위해 두 텍스트 본문 사이에 줄을 배치할 수 있습니다. HTML에서 이러한 중단을 만드는 방법은 다음과 같습니다.

여기서 hr 문자와 슬래시 사이의 분리는 빈 요소의 구성을 강조하는 반면, 다시 한번 효과를 완료하는 데 필요한 닫는 태그가 없습니다. 그러면 다음과 같은 시각적 개체가 생성됩니다.

이미지 태그

이미지 태그는 HTML의 빈 요소를 나타내기도 합니다. 이는 다시 한 번 닫는 태그가 없다는 것을 의미합니다. 여기에는 사이트에 삽입하는 이미지의 URL과 관련된 속성만 포함되어 있으므로 다음과 같이 간단히 정의됩니다. 요소의 시작 부분에 태그를 지정합니다. 문단이나 제목과 같은 기존 요소에 포함시키는 것은 드물지만 웹사이트 어디든 배치할 수 있습니다. 일반적인 HTML 이미지 태그가 표시되는 방식은 다음과 같습니다.

또한 이미지에 대한 대체 텍스트를 제공해야 합니다. 이는 로딩 시간이 느리거나 스크린 리더를 사용할 경우 사람들이 이미지를 보는 데 도움이 됩니다. 이렇게 하면 브라우저가 이미지를 찾을 수 없는 경우 뷰어에게 대체 속성 값이 표시됩니다. 이번에도 이미지 태그를 사용하지만 다른 속성 세트를 포함합니다.

HTML 요소

이전에는 HTML 태그를 사용하여 페이지 요소를 정의하는 방법을 살펴봤고, 이미지 및 줄 바꿈 태그가 포함된 빈 요소를 사용하여 추가로 사용자 정의할 수 있는 방법도 살펴보았습니다. 이는 태그와 요소 사이에 존재하는 관계와 태그를 사용하여 서로 다른 요소를 정의하는 방법을 이해하는 데 도움이 됩니다. 웹사이트의 콘텐츠 유형.

예를 들어 HTML 언어의 모든 측면은 태그로 표시되지만 콘텐츠를 포함하는 정의된 요소에는 시작 태그와 닫는 태그가 모두 있어야 합니다. 따라서 제목과 단락은 시작 태그와 닫는 태그를 사용하여 관련 텍스트를 캡슐화하고 확대하므로 HTML 요소입니다. 대조적으로, 빈 요소는 속성을 포함하거나 내용이 전혀 없기 때문에 닫는 태그 없이도 기존 요소 내에서 사용할 수 있습니다.

HTML 요소 정의

제목, 단락 등의 예를 사용할 때는 시작 태그와 닫기 태그를 올바르게 적용하는 것이 중요합니다. 이는 시작 태그입니다(예: 또는 )는 문제의 요소를 정의하는 반면, 닫는 태그는 이 요소가 웹페이지의 나머지 부분에서 계속되지 않도록 합니다. 마감을 사용하지 않은 경우 예를 들어, 원하는 단락 끝에 태그를 추가하면 텍스트가 보기 흉하고 읽기 매우 어려운 단일 블록으로 나타납니다.

모든 닫는 태그는 관련 문자 앞에 슬래시가 있다는 점을 제외하면 시작 태그와 동일합니다. 그래서 어떤 경우에는 제목, 닫는 태그는 다음과 같습니다. , 단락의 경우 항상 사용합니다. 텍스트 나누기를 정의합니다. 이를 위해서는 코딩하는 동안 세부 사항에 주의가 필요하며, 사용하는 숫자(예: h1 또는 h1)가 시작 태그와 닫는 태그 모두에 적용된다는 제목을 프로그래밍할 때 주의하는 것이 중요합니다.

중첩된 HTML 요소 사용

이 단계에서는 HTML 문서와 웹 페이지가 자산 배열의 구성 요소 역할을 하는 다양한 요소 트리로 구성된다는 것이 분명해집니다. 또한 이러한 요소가 어떻게 형성되고 온라인 콘텐츠를 구성하는 데 사용되는지 살펴보았으며 이제 중첩된 HTML 요소를 살펴보며 계속하겠습니다.

빈 요소와 독립형 태그(예: 정의된 HTML 요소에 통합될 수 있으며 소위 중첩 요소가 제목 및 단락과 같은 콘텐츠 내에 포함될 수도 있습니다. 여기에는 굵은 기울임꼴 문자, 밑줄 친 텍스트 등의 예가 포함되며 콘텐츠에 개성을 더하고 특정 관심 지점으로 독자의 시선을 끌기 위해 적용할 수 있습니다.

HTML의 굵게, 기울임꼴 및 취소선 텍스트

기존 단락 요소 내의 단어를 강조표시한다고 가정해 보겠습니다. 표준 내에서 간단한 태그를 사용하여 굵게 표시하면 이를 달성할 수 있습니다. 요소. HTML을 사용하여 다음과 같이 프로그래밍합니다.

여기서 중첩된 요소에는 시작 태그와 닫는 태그가 모두 있으며, 각 태그는 제목 및 단락과 관련된 형식과 유사한 형식을 따릅니다. 기존 요소 내에서 원활하게 사용할 수 있으며 이 경우 다음과 같은 결과가 생성됩니다.

이제 이 단어의 서체도 기울임꼴로 변경하고 싶다고 가정해 보겠습니다. 이는 다음과 같이 코딩되어야 하는 또 다른 중첩 요소를 추가하여 간단히 달성할 수 있습니다.

보시다시피, 시작 및 닫는 이탤릭체 태그가 단순히 요소. 이제 요소 내의 콘텐츠가 다음과 같이 표시되도록 변환됩니다.  

물론 이 단어를 다른 방식으로 강조 표시하기로 결정할 수도 있습니다. 따라서 취소선( 및 태그로 표시됨)과 같은 대체 중첩 요소를 사용할 수 있습니다. 이러한 태그는 요소는 HTML에서 다음과 같이 표시됩니다.

이 경우 문서 또는 랜딩 페이지에 텍스트가 다음과 같이 표시됩니다.  

이를 통해 태그로 구성될 수 있는 요소에 대한 통찰력을 얻을 수 있으며, 태그는 웹 페이지의 구조와 해당 콘텐츠를 정의합니다. 뿐만 아니라 비어 있고 중첩된 요소를 사용하여 콘텐츠를 추가로 정의할 수도 있습니다.

HTML 속성

태그가 요소를 구성하고 정의하는 빌딩 블록인 경우 HTML 속성을 사용하여 특성(예: 스타일, 색상, 언어 등)을 사용자 정의할 수 있습니다. 모든 HTML 요소에는 핵심 정보를 제공하고 항상 stat 태그 내에 지정되는 핵심 속성이 있습니다. . 쌍으로 오는 경향이 있으므로 다음 형식으로 나타나는 경우가 많습니다: name="value."

간단히 말해서 이름은 설정하려는 속성을 나타내고 값은 통합하려는 특정 기준과 관련됩니다.

HTML 요소에 적용할 수 있는 속성은 매우 많지만, 초보 웹마스터에게 가장 적합한 속성은 다음과 같습니다.

'lang' 속성

가장 기본적인 단일 속성은 문서와 해당 요소의 언어를 정의합니다. 이는 'lang' 속성을 사용하여 선언되며 쉽게 간과되지만 화면 판독기와 검색 엔진에서 콘텐츠에 더 쉽게 접근할 수 있도록 하는 이점이 있습니다. 일반적으로 문서 시작 부분에 다음 형식으로 표시됩니다.

lang 속성 다음의 처음 두 글자는 언어(이 경우 영어)를 지정합니다. 하이픈 뒤의 다음 두 문자는 방언을 설정하지만 모든 언어에 해당되는 것은 아닙니다. 청중에게 성공적으로 다가가려면 이 속성을 올바르게 얻는 것이 중요합니다.

'정렬' 속성

우리는 이미 HTML 속성(이름=”값”)의 형식을 다루었으며, 요소 내의 콘텐츠를 정렬하려고 할 때 가장 좋은 구현이 발생합니다. 예를 들어, 설정하려는 속성을 정렬로 사용하여 특정 페이지의 모든 단락을 중앙에 배치하도록 결정할 수 있습니다. 결과적으로 'center'는 속성 값이지만 텍스트를 왼쪽이나 오른쪽으로 정렬할 수 있습니다.

그러면 요소를 페이지 중앙에 배치하고 웹 사이트의 특정 특성에 맞게 통일된 레이아웃을 만듭니다(아래 참조).

'href' 속성

눈에 띄는 웹사이트를 구축하려면 인바운드 링크와 아웃바운드 링크를 모두 통합하는 것이 중요합니다. 내부 랜딩 페이지에 대한 백링크를 포함하는 링크 포트폴리오를 구축하는 것도 실행 가능한 전략이므로 이를 HTML로 코딩하는 방법을 배워야 합니다.

HTML 링크 는 URL을 수용할 관련 앵커 텍스트와 함께 대상 링크를 포함하는 태그로 정의됩니다. 사이트 주소를 지정하는 것은 'href' 속성이지만 이는 시작 태그의 일부로 통합됩니다. HTML로 다음과 같이 코딩됩니다.

이렇게 하면 시작 태그와 닫는 태그의 차이가 명확하게 강조되며 방문 페이지에서 다음과 같이 번역됩니다.

'색상' 속성

이는 또 다른 중요한 특성입니다. 색상을 사용하면 웹사이트에 생기를 불어넣는 동시에 중요한 대비와 강력한 디자인 미학을 만드는 데 도움이 되기 때문입니다. HTML에서는 이름을 사용하여 색상을 지정할 수 있지만 이 목적을 달성하기 위해 RGB 또는 HEX 값을 활용하는 것도 가능합니다. 전자 옵션이 가장 따르기 쉽지만 페이지의 제목, 단락 및 기타 요소에도 적용할 수 있습니다.

이것은 설정하려는 값을 나타내는 색상을 선택하는 스타일 속성입니다. 예를 들어 빨간색을 기본 제목에 적용하면 다음과 같습니다.

적용되면 이 요소는 웹사이트에 다음과 같이 표시됩니다.

다시 한번 강조하지만, 요소를 정의하는 시작 태그와 닫는 태그 사이에는 명확한 차이가 있습니다. 이는 HTML에 적용하기 가장 쉬운 속성 중 하나입니다. 또한 HTML 속성의 name=”value 형식을 더욱 강조하여 학습 과정을 만들고 이를 웹사이트 전체에 훨씬 쉽게 적용할 수 있습니다.

직접 테스트

HTML과 개별 요소에 대한 기본적인 이해를 바탕으로 다음 단계는 몇 가지 간단한 프로젝트를 수행하고 이론적 지식을 적용하여 실제 문제를 해결하는 것입니다.  

아래에 자세히 설명된 연습에서는 텍스트를 제외하고 HTML을 사용하여 다양한 측면의 형식을 지정하도록 요청했습니다. 자신만의 웹 사이트 코딩을 준비하면서 가이드와 지금까지 배운 모든 내용을 활용하여 과제를 완료하세요.

질문 :

1. 올바른 닫는 태그로 헤더 요소를 완성하세요.
2. 헤더를 굵게 만듭니다.
3. 헤더 아래에 수평선을 삽입합니다.
4. 색상 속성을 사용하고 '방문해 주셔서 감사합니다'를 녹색으로 음영 처리합니다.
5. 다음 하이퍼링크를 삽입하세요(https://www.w3schools.com/html/)을 앵커 텍스트 '자세히 알아보기'에 넣습니다.
6. 페이지 상단에서 name=”value” 형식을 사용하여 단락을 왼쪽 정렬합니다.

HTML 언어 통계 및 사실

1. HTML, 헤드 및 본문 요소는 1990년대 중반부터 HTML 사양의 일부였으며 몇 년 전까지만 해도 HTML 문서에 구조를 제공하는 데 사용되는 기본 요소였습니다. 그러나 HTML5가 HTML 문서의 구조에 풍부한 의미론적 의미를 추가하는 데 사용할 수 있는 수많은 새로운 태그를 추가함에 따라 지난 몇 년 동안 상황이 극적으로 변했습니다.
2. HTML 문서는 문서 유형 선언(비공식적으로 "doctype")으로 시작해야 합니다. 브라우저에서 doctype은 렌더링 모드를 정의하는 데 도움이 됩니다. HTML5는 DTD를 정의하지 않습니다. 따라서 HTML5에서는 doctype 선언이 더 간단하고 짧습니다.
3. 모바일 브라우저는 HTML5를 완전히 채택했기 때문에 모바일 지원 프로젝트를 만드는 것은 작은 터치 스크린 디스플레이에 맞게 디자인하고 구성하는 것만큼 쉽습니다. 따라서 반응형 디자인이 인기를 얻고 있습니다. 모바일에 최적화할 수 있는 몇 가지 훌륭한 메타 태그가 있습니다.  
4. 콘텐츠 개발자의 78%는 이 구조가 모바일 앱 제작에 적합하다는 데 동의하고, 68%는 모든 종류의 앱을 디자인하는 데 적합하다고 말합니다.
5. HTML5에는 더 나은 사용자 경험과 더 강력하고 동적인 웹 애플리케이션을 구축할 수 있는 수많은 훌륭한 API도 함께 제공됩니다. 다음은 기본 API의 빠른 목록입니다.
   • 드래그 앤 드롭(DnD)
   • 오프라인 스토리지 데이터베이스
   • 브라우저 기록 관리
   • 문서 편집
   • 시간 제한 미디어 재생
6. HTML5는 한 회사에 의해 통제되지 않습니다. 가장 뛰어난 특징 중 하나는 개방형 표준이라는 점입니다. 개발자는 창의력을 마음껏 발휘하고 가능한 한 많은 기능을 추가할 수 있습니다.
7. 다른 브라우저와 비교할 때 모든 Google Chrome 업데이트에는 HTML5 지원이 포함되어 있습니다. 또한 YouTube의 기본 플레이어는 이제 HTML5이며 Google의 플래시 광고는 이제 HTML5로 변환되고 있습니다.
8. 개발자의 HTML5 사용(지역별):
   • 북미 및 라틴 아메리카 – 70%
   • 남미 – 61%
   • ASPAC – 60%
   • 호주 – 60 %
   • 유럽 ​​- 59%
   • 아프리카 – 50%

결론

HTML은 1991년에야 만들어졌지만(1995년에 코딩 언어의 첫 번째 버전이 출시됨) 기능적이고 시각적으로 매력적인 웹 사이트를 디자인하는 데 있어 중요한 도구가 되었습니다. HTML의 영향력 수준도 계속 진화하고 있으며, 전 세계적으로 점점 더 많은 웹사이트에서 최신 버전(HTML5)을 채택하고 있습니다.

이러한 측면에서 HTML의 기본 요소와 이를 적용하는 방법을 배우는 것은 성공적이고 가시적이며 궁극적으로 경쟁력 있는 웹사이트를 구축하는 데 있어 가장 중요한 단계입니다.