기본 HTML 태그에 대한 이해는 워드프레스와 같은 사용자 친화적인 웹사이트 빌더를 사용하더라도 웹 페이지를 만들고 사용자 정의하는 데 매우 중요합니다. 17개의 필수 태그와 몇 가지 추가 태그를 통해 사용자는 기본 웹페이지를 처음부터 구성하거나 앞서 언급한 애플리케이션에서 생성된 코드를 수정할 수 있습니다.
HTML 태그의 활용에 대한 포괄적인 데모가 해당 출력과 함께 제공됩니다. 코드를 직접 실험해보고 싶은 분들을 위해 바로 사용 가능한 샘플이 포함되어 있으므로 충분한 기회가 제공됩니다. 제공된 HTML 코드를 개인의 개인 파일에 붙여넣은 후 웹 브라우저에 로드하면 수정 효과를 쉽게 관찰할 수 있습니다. 이 시점에서 사용자가 탐색을 시작할 것을 권장합니다.
오프닝 태그는 문서의 콘텐츠 유형을 HTML로 선언하여 웹 브라우저가 이를 인식하고 처리할 수 있도록 하는 역할을 합니다. HTML 코딩의 필수 요소인 이 태그는 태그가 없는 상태와 상관없이 인식하는 것이 기본입니다.
태그는 웹 브라우저에 현재 HTML 문서를 처리 중임을 알리는 역할을 합니다. 이 태그는 DOCTYPE 선언 바로 뒤에 파일 내의 다른 모든 콘텐츠 앞에 와야 하며, 문서 마지막에 태그로 닫아야 합니다. 이 태그에 포함된 모든 요소는 HTML 문서의 일부로 간주됩니다.
태그는 문서의 헤더 부분을 시작합니다. 이 태그 내의 콘텐츠는 웹사이트에 표시되지 않고 검색 엔진 크롤러를 위한 메타데이터로 사용되며 브라우저에 정보를 제공합니다. 또한 사이트에 광고를 삽입하려는 경우 이 섹션 내에 Google 애드센스 코드가 삽입됩니다.
태그는 웹페이지의 헤더 역할을 하며 일반적으로 “title” 속성으로 지정된 페이지 제목으로만 구성됩니다. 그러나 섹션에는 몇 가지 추가 요소가 포함될 수 있으며, 이에 대해서는 나중에 설명합니다.
메타데이터 태그는 웹페이지의 제목 역할을 하므로 태그 안에 원하는 레이블을 삽입하고 끝내기만 하면 됩니다. 또한 웹 페이지와의 관련성을 보여주기 위한 헤더 태그도 포함됩니다.
<head>
<title>My Website</title>
</head>
지정된 문자열이 이 탭의 식별자 역할을 하며, 액세스 시 브라우징 인터페이스에 제목으로 표시됩니다.
메타데이터는 다양한 웹 크롤러, 특히 검색 엔진 로봇에게 콘텐츠에 관한 세부 정보를 제공하는 웹사이트의 한 측면입니다. 일반적으로 웹페이지의 헤더 부분에 위치하며 다양한 메타 필드로 구성되며, 이 중 일부 메타 필드는 자주 활용됩니다.
이 페이지는 [여기에 주제 삽입]에 대한 소개 페이지로, 해당 주제에 대한 일반적인 개요와 기본적인 이해를 제공합니다. 이 페이지는 해당 주제를 처음 접하거나 더 복잡한 자료를 더 깊이 파고들기 전에 간단한 설명을 원하는 독자를 위한 것입니다.
검색 엔진 인덱싱에 대한 중요성은 줄어들고 있지만 웹페이지의 콘텐츠를 설명하는 데 활용할 수 있는 용어 집합입니다.
이 콘텐츠의 작성자 또는 원본 작성자를 작성자라고 합니다.
‘뷰포트’는 스마트폰, 태블릿 등 다양한 전자 기기에서 웹페이지를 최적으로 시각적으로 표시하는 데 사용되는 HTML 요소입니다.
이 웹사이트의 내용을 요약해 주시겠습니까?
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="All Things N">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
‘뷰포트’ 태그의 활용은 스마트폰, 데스크톱 등 다양한 기기에서 웹페이지를 최적으로 표시하는 데 매우 중요합니다. 이를 위해서는 해당 태그에 “width=디바이스 너비, 초기 배율=1.0” 속성을 포함해야 합니다.
헤더 섹션이 끝나면 본문으로 이동합니다. 본문 시작 부분은
태그로 표시되고, 본문 끝 부분은 태그로 표시됩니다. 이 세그먼트는 문서 파일이 끝날 때 태그 바로 앞에 위치해야 합니다.웹 페이지의 HTML 코드에는 일반적으로 제목, 단락, 이미지 및 링크와 같은 여러 요소가 포함되며, 이러한 요소는 모두 본문 태그 안에 묶여 있습니다. 본문 태그는 이러한 모든 요소가 표시되는 웹페이지의 주요 콘텐츠 영역을 정의합니다.
<body>
Everything you want displayed on your page.
</body>
(및 기타 헤더 태그)
태그는 웹페이지의 기본 제목을 나타내는 데 사용되며 일반적으로 해당 페이지의 제목으로 사용됩니다. 이 수준에서는 각 페이지에 이러한 제목을 하나만 포함하는 것이 좋습니다.
본 표제는 문서 내에서 2단계 표제(예: 섹션 제목)부터 6단계 표제(예: 하위 섹션 제목)에 이르기까지 다양한 수준의 표제를 구분하는 역할을 합니다. 예를 들어, 이 글의 각 제목에 대한 레이블은 레벨 2 헤더로 간주됩니다.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
이 실험의 결과는 긍정적이었습니다.
각 계층 수준에서 결과물인 마이크로 콘텐츠는 더욱 작아지고 상대적 중요도에 따라 검색 엔진에 의해 순위가 매겨집니다.
새 단락은 일반적으로 두 줄 바꿈이 연속적으로 생성되는 단락 태그를 통해 도입됩니다.
현재 줄과 이전 줄을 구분하는 문장 부호를 생각해 보세요. 다음은 HTML에서
태그가 어떻게 작동하는지 보여주는 예시입니다.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
이 연구에 따르면 2년 이내에 승진한 직원 수가 크게 증가했으며, 교육 프로그램에 참여한 직원과 경력 발전 간에 긍정적인 상관관계가 있는 것으로 나타났습니다.
이 텍스트의 초반부는 현실의 본질과 인간 인식에 대한 일련의 철학적 사유를 제시하며, 우리의 이해가 우리의 감각과 언어의 구조에 의해 제한된다는 것을 시사합니다. 저자는 가장 진보된 과학적 도구로도 여전히 알려지지 않은 변수가 작용하기 때문에 존재의 복잡성을 완전히 파악할 수 없다고 지적합니다.
이 연구 결과는 빈곤의 복잡하고 역동적인 본질을 더 깊이 이해하는 데 기여하며, 빈곤을 효과적으로 완화하기 위해서는 여러 차원을 동시에 다루는 다차원적 접근이 필요하다는 점을 강조합니다.
문단 태그 내에서 CSS(Cascading Style Sheet)를 활용하는 것은 텍스트 크기를 수정한 본 예시에서 볼 수 있듯이 글꼴 스타일의 크기를 변경할 수 있는 실행 가능한 옵션입니다.
<p style="font-size: 150%;">This is 50% larger text.</p>
이 연구에 따르면 참가자의 상당수가 치료에 대한 반응이 미미했으며, 증상의 개선이 미미하게 관찰되었습니다.
HTML 태그는 추가 공백 없이 텍스트 내에 줄 바꿈을 만드는 데 사용됩니다.
<p>The first line.
The second line (close to the first one).</p>
특정 의료 정책의 시행이 환자 안전 및 치료의 질 향상과 관련이 있다는 연구 결과가 발표되었습니다.
태그는 웹 페이지에 가로줄을 렌더링하여 텍스트 섹션을 구분하는 유사한 기능을 합니다.
<강함>
태그는 중요한 텍스트를 나타내며 일반적으로 굵은 글꼴로 표시됩니다. 그러나 CSS를 사용하여 기본 서식에서 벗어나 <강함> 요소의 시각적 모양을 수정할 수 있습니다.
관례에 따라 텍스트를 굵은 글꼴 스타일로 렌더링하기 위한 목적으로 HTML 태그를 사용하는 것은 허용되며, 부정적인 결과를 초래할 위험은 없습니다.
<strong>Very important things you want to say.</strong>
이 실험의 결과는 판매 수익이 눈에 띄게 증가했으며, 이는 우리가 제안한 마케팅 전략의 실행이 비즈니스 성과에 긍정적인 영향을 미쳤음을 나타냅니다.
큰 의미를 지닌 몇 가지 진술을 하고 싶습니다.
굵은 글꼴로 텍스트를 렌더링하기 위해 `` 태그를 사용하는 것은 이제 권장되지 않지만 여전히 유효합니다. 대신 `` 태그를 사용하는 것이 좋습니다.
태그 은 강조된 텍스트를 나타내는 데 사용되며, 일반적으로 이탤릭체를 적용하는 특징이 있습니다. 마찬가지로 태그 은 굵게 표시된 텍스트에 사용됩니다. 두 태그의 용도는 비슷하지만 구현 방식은 CSS(Cascading Style Sheet)에 명시된 사양에 따라 다를 수 있습니다.
<em>An emphasized line.</em>
이 연구 결과에 따르면 …
어떤 식으로든 강조되는 눈에 띄는 기능 또는 문장으로, 중요하거나 중요한 것에 주의를 끌기 위해 자주 사용됩니다.
`` 태그는 여전히 기능적이지만 사용을 권장하지 않으며, 향후 HTML 반복에서 더 이상 사용되지 않을 가능성이 있습니다.
태그는 하이퍼링크를 만드는 데 사용됩니다. 하이퍼링크의 기본 형식은 다음과 같습니다:
<a href="https://www.muo.com/>Go to All Things N</a>
이 연구는 온도가 반응 동역학에 미치는 영향을 조사하고 근본적인 메커니즘을 탐구하는 것을 목표로 했습니다.
“href” 속성은 하이퍼링크가 연결되는 위치를 지정하는 역할을 합니다. 일반적으로 이 속성은 사용자를 다른 웹사이트로 연결합니다. 그러나 이미지나 PDF와 같은 파일을 가리킬 수도 있습니다.
대체 탭이나 창에서 하이퍼링크를 열기 위해 “대상” 속성을 사용하는 것은 웹 개발자들 사이에서 매우 일반적인 관행입니다.
<a href="https://www.muo.com/" target="_blank">Go to All Things N in a new tab</a>
이 실험의 결과는 결정적이지 않았습니다.
‘제목’ 속성은 아래에 표시된 하이퍼링크 위로 마우스를 가져가면 볼 수 있는 툴팁을 만드는 데 사용됩니다.
<a href="https://www.muo.com/" title="This is a tooltip">Hover over this to see the tooltip</a>
주어진 정보를 바탕으로 다음을 유추할 수 있습니다.
태그는 웹 페이지 내에 시각적 콘텐츠를 통합하는 데 필요합니다. 해당 태그는 이미지의 출처를 지정하는 “src” 속성과 함께 사용해야 합니다.구현의 일반적인 예는 다음과 같습니다:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
읽기 기술 교육에 새로운 접근 방식을 적용한 결과 학생들의 성적이 크게 향상되었다는 연구 결과가 발표되었습니다.
대체 속성에는 ‘높이’, ‘너비’, ‘alt’가 포함됩니다. 앞서 언급한 예는 이 양식을 보여줍니다.
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
“높이” 및 “너비” 속성은 각각 묘사의 높이와 넓이를 결정하는 데 사용됩니다. 일반적으로 이러한 속성 중 하나만 지정하여 비율 측면에서 표현이 왜곡되지 않도록 하는 것이 현명합니다. 둘 다 지정하면 이미지가 길어지거나 압축될 수 있습니다.
“alt” 태그는 이미지를 렌더링할 수 없는 경우를 대비한 비상 계획으로, 브라우저에 대신 표시할 대체 텍스트에 대한 지침을 제공합니다. 이 속성은 화면 리더가 ‘alt’ 태그의 내용을 음성으로 읽어주기 때문에 접근성을 보장하는 데 매우 중요합니다.
HTML로 반응형 이미지를 만드는 방법에 대한 가이드는 웹사이트의 기능과 사용자 경험을 향상시키는 데 유용한 리소스입니다.
주어진 문장을 영어로 더 세련되게 렌더링할 수 있도록 허용해 주세요. “정렬된 목록” 태그는 본질적으로 숫자 목록을 생성하는 데 사용됩니다. 목록 내의 각 구성 요소는 적절한 “목록 항목” 태그
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>
야생동물 개체군에 미치는 영향에 대한 연구는 기후 변화의 영향을 이해하는 데 매우 중요합니다.
첫 번째 고려 사항은
두 번째 고려 사항은
세 번째 의제 항목은
HTML5에서
- 요소를 활용하면 “반전” 키워드를 사용하는 규칙을 사용하여 숫자 순서를 재배열할 수 있습니다. 또한 “start” 속성을 통합하여 시퀀스의 시작 지점을 지정할 수 있습니다.
“type” 속성은 숫자, 알파벳 및 로마 숫자 지정을 포함하여 목록 항목에 대해 브라우저에서 사용할 기호의 종류를 지정하는 데 사용됩니다. 이는 “1”, “A”, “a”, “I” 또는 “i”의 값을 할당하여 설정할 수 있습니다. 따라서 목록은 아래와 같이 지정된 기호를 표시해야 합니다:
<ol type="A">
불릿 포인트 목록이라고도 하는 정렬되지 않은 목록은 정렬된 목록을 단순화한 것으로, 항목을 숫자 또는 알파벳 순서로 계층 구조로 표시합니다.정렬된 목록과 달리 정렬되지 않은 목록은 구성 요소에 특정 순서를 적용하지 않고 글머리 기호를 사용하여 간단하게 표시합니다. 따라서 정렬되지 않은 목록은 정렬된 목록에 비해 간결하고 읽기 쉬우므로 캐주얼한 환경에서 정보를 표시하는 데 널리 사용됩니다.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
이 연구는 X와 Y 사이에 양의 상관관계가 있음을 보여주었습니다.
첫 번째로 논의할 요점은 …
두 번째로 고려해야 할 점은
세 번째로 고려해야 할 점은 …
‘원’, ‘원’ 또는 ‘정사각형’.
<표>
표는 데이터를 구조적으로 구성하고 표시하는 효과적인 수단입니다. 서식 지정 목적으로 표를 사용하는 것은 권장하지 않지만 행과 열을 사용하여 정보를 세그먼트로 나누는 데는 사용할 수 있습니다. 표가 제대로 작동하려면 여러 HTML 태그를 사용해야 합니다. 다음은 필수 마크업의 예입니다:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>
은 테이블 요소의 종료를 나타냅니다.
태그는 표의 전체 내용을 포함합니다.표의 모든 행은 `
이 연구는 기후 변화가 생물 다양성과 생태계에 미치는 영향과 그 영향을 완화하기 위한 잠재적 해결책을 조사하는 것을 목표로 했습니다.
나는 말하기, 쓰기, 서명, 기타 비언어적 의사소통 등 다양한 방법으로 이해하고 의사소통할 수 있다.
고양이가 큰 소리로 야옹거리며 주의를 요구했다.
고양이가 쥐를 쫓았지만 잡는 데 실패했습니다.
고양이 한 마리가 사용하도록 지정된 평평한 바닥에 쉬었습니다.
복잡한 아이디어를 명확하고 간결하게 이해하고 표현할 수 있습니다.
| 1열 | 2열 |
|---|---|
| 행 1, 열 1 | 행 1, 열 2 |
| 행 2, 열 1 | 행 2, 열 2 |
<
따옴표와 나머지 텍스트를 구분하려면 `
` 태그를 사용합니다. 유일한 요구 사항은 시작 및 끝 `
` 태그 안에 인용을 포함해야 한다는 것입니다.
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>연구 결과에 따르면 직무 만족도와 이직 의향 사이에는 양의 상관관계가 있으며, 직무 만족도가 높은 직원이 조직을 떠날 가능성이 낮다는 것을 알 수 있습니다.
제가 웹을 구상했을 때 웹의 진정한 잠재력은 아직 실현되지 않았습니다. 웹의 미래는 과거에 비해 훨씬 더 방대합니다.
HTML 태그의 활용도는 사용 중인 웹 브라우저나 웹사이트의 CSS에 따라 달라질 수 있지만 태그 자체는 변하지 않습니다.
이 HTML 코드 샘플 및 예제 마스터하기
제공된 17개의 HTML 코드 샘플을 활용하여 기본적인 웹 페이지를 구성할 수 있는 능력을 갖추어야 합니다. 해당 개인은 인터넷 텍스트 편집기 내에서 해당 코드를 즉시 실험하여 익숙해 질 수 있습니다.
HTML 프로그래밍에 대한 기본적인 숙련도를 습득하면 웹 페이지의 기본 기능을 넘어 웹 페이지의 모양을 향상시킬 수있는 다양한 가능성을 탐색 할 수 있습니다.
By 박준영
업계에서 7년간 경력을 쌓은 숙련된 iOS 개발자인 박준영님은 원활하고 매끄러운 사용자 경험을 만드는 데 전념하고 있습니다. 애플(Apple) 생태계에 능숙한 준영님은 획기적인 솔루션을 통해 지속적으로 기술 혁신의 한계를 뛰어넘고 있습니다. 소프트웨어 엔지니어링에 대한 탄탄한 지식과 세심한 접근 방식은 독자에게 실용적이면서도 세련된 콘텐츠를 제공하는 데 기여합니다.