10분 안에 배울 수 있는 17가지 간단한 HTML 코드 예제

10분 안에 배울 수 있는 17가지 간단한 HTML 코드 예제

최신 웹 사이트는 일반적으로 사용자 친화적인 인터페이스로 구축되지만 몇 가지 기본 HTML을 아는 것이 유용합니다. 다음 17개의 HTML 예제 태그(및 몇 가지 추가 사항)를 알고 있다면 기본 웹 페이지를 처음부터 만들거나 WordPress와 같은 앱에서 만든 코드를 조정할 수 있습니다.





대부분의 태그에 대한 출력과 함께 HTML 코드 예제를 제공했습니다. 실제로 작동하는 모습을 보려면 기사 끝에 있는 샘플 HTML 파일을 다운로드하세요. 텍스트 편집기에서 사용하고 브라우저에서 로드하여 변경 사항이 무엇인지 확인할 수 있습니다.



1.

생성하는 모든 HTML 문서의 시작 부분에 이 태그가 필요합니다. 이는 브라우저가 HTML을 읽고 있으며 최신 버전인 HTML5를 기대한다는 것을 알도록 합니다.





이것은 실제로 HTML 태그가 아니지만 여전히 알아두면 좋은 태그입니다.

2.

이것은 HTML을 읽고 있음을 브라우저에 알리는 또 다른 태그입니다. 태그는 DOCTYPE 태그 바로 뒤에 오고 파일 끝에서 바로 태그로 닫습니다. 문서의 다른 모든 것은 이 태그 사이에 있습니다.



삼.

태그는 파일의 헤더 섹션을 시작합니다. 여기에 들어가는 내용은 웹페이지에 나타나지 않습니다. 대신 검색 엔진에 대한 메타데이터와 브라우저에 대한 정보가 포함되어 있습니다.

기본 페이지의 경우 태그에 제목이 포함되며 그게 전부입니다. 그러나 포함할 수 있는 몇 가지 다른 항목이 있으며 잠시 후에 살펴보겠습니다.



4.

이 태그는 페이지의 제목을 설정합니다. 다음과 같이 태그에 제목을 넣고 닫으면 됩니다(컨텍스트를 표시하기 위해 헤더 태그도 포함했습니다).


My Website

그것이 브라우저에서 열릴 때 탭 제목으로 표시될 이름입니다.



5.

제목 태그와 마찬가지로 메타데이터는 페이지의 헤더 영역에 배치됩니다. 메타데이터는 주로 검색 엔진에서 사용되며 페이지에 있는 내용에 대한 정보입니다. 다양한 메타 필드가 있지만 가장 일반적으로 사용되는 메타 필드는 다음과 같습니다.

  • 설명 : 페이지에 대한 기본 설명입니다.
  • 키워드 : 귀하의 페이지에 적용할 수 있는 키워드의 선택입니다.
  • 작가 : 페이지 작성자입니다.
  • 뷰포트 : 페이지가 모든 기기에서 보기 좋게 표시되도록 하기 위한 태그입니다.

다음은 이 페이지에 적용될 수 있는 예입니다.




'viewport' 태그는 항상 'width=device-width, initial-scale=1.0'을 콘텐츠로 포함하여 페이지가 모바일 및 데스크톱 기기에서 잘 표시되도록 해야 합니다.

6.

헤더 섹션을 닫으면 본문으로 이동합니다. 이것을 태그로 열고 태그로 닫습니다. 태그 바로 앞의 파일 끝에서 바로 이동합니다.

웹페이지의 모든 콘텐츠는 이 태그 사이에 있습니다. 그것은 들리는 것처럼 간단합니다.


Everything you want displayed on your page.

7.

약간 덜 큰 헤더


하위 헤더

결과:

보시다시피, 각 레벨에서 작아집니다.

8.

단락 태그는 새 단락을 시작합니다. 이것은 일반적으로 두 개의 줄 바꿈을 삽입합니다.

예를 들어, 이전 줄과 이 줄 사이의 구분을 보십시오. 그게 무슨

태그가 할 것입니다.

Your first paragraph.


Your second paragraph.

결과:

첫 번째 단락입니다.

두 번째 단락입니다.

당신은 또한 수 CSS 스타일 사용 단락 태그에서 다음과 같이 텍스트 크기를 변경합니다.

This is 50% larger text.

결과:

9.

줄 바꿈 태그는 단일 줄 바꿈을 삽입합니다.

The first line.

The second line (close to the first one).

결과:

비슷한 방식으로 작업하는 것은

꼬리표. 이렇게 하면 페이지에 수평선이 그려지고 텍스트 섹션을 구분하는 데 좋습니다.

10.

이 태그는 중요한 텍스트를 정의합니다. 일반적으로 그것은 대담할 것임을 의미합니다. 그러나 CSS를 사용하여 텍스트가 다르게 표시됩니다.

포도 나무에서 좋아하는 것을 보는 방법

하지만 안전하게 사용할 수 있는 굵은 글씨로.

Very important things you want to say.

결과:

당신이 말하고 싶은 매우 중요한 것들.

에 대해 잘 알고 계시다면 텍스트를 굵게 표시하는 태그는 계속 사용할 수 있습니다. HTML의 향후 버전에서 계속 작동할 것이라는 보장은 없지만 현재로서는 작동합니다.

열하나.

좋다 그리고 , 그리고 관련있다. NS 태그는 강조된 텍스트를 식별하므로 일반적으로 기울임꼴로 표시됩니다. 다시 말하지만 CSS가 강조된 텍스트를 다르게 표시할 가능성이 있습니다.

An emphasized line.

결과:

강조된 라인입니다.

NS 태그는 여전히 작동하지만 HTML의 향후 버전에서 더 이상 사용되지 않을 수 있습니다.

12.

NS 또는 앵커 태그를 사용하면 링크를 만들 수 있습니다. 간단한 링크는 다음과 같습니다.

뮤오로 이동

'href' 속성은 링크의 목적지를 식별합니다. 많은 경우에 이것은 다른 웹사이트가 될 것입니다. 이미지나 PDF와 같은 파일일 수도 있습니다.

기타 유용한 속성으로는 '대상' 및 '제목'이 있습니다. target 속성은 다음과 같이 새 탭이나 창에서 링크를 여는 데 거의 독점적으로 사용됩니다.

Go to MUO in a new tab

결과:

새 탭에서 MUO로 이동

'title' 속성은 툴팁을 생성합니다. 작동 방식을 보려면 아래 링크 위로 마우스를 가져갑니다.

Hover over this to see the tool tip

결과:

도구 설명을 보려면 이 위로 마우스를 가져갑니다.

13.

페이지에 이미지를 삽입하려면 이미지 태그를 사용해야 합니다. 일반적으로 'src' 속성과 함께 사용합니다. 다음과 같이 이미지의 소스를 지정합니다.

결과:

삼성에 싱글 테이크 란 무엇입니까

'높이', '너비' 및 '알트'와 같은 다른 속성을 사용할 수 있습니다. 다음과 같이 보일 수 있습니다.

the name of your image

예상대로 'height' 및 'width' 속성은 이미지의 높이와 너비를 설정합니다. 일반적으로 이미지 크기가 올바르게 조정되도록 둘 중 하나만 설정하는 것이 좋습니다. 둘 다 사용하면 늘어나거나 찌그러진 이미지가 될 수 있습니다.

'alt' 태그는 이미지를 표시할 수 없는 경우 표시할 텍스트를 브라우저에 알려주며 이미지와 함께 포함하는 것이 좋습니다. 누군가 연결 속도가 특히 느리거나 오래된 브라우저를 사용하는 경우에도 페이지에 무엇이 있어야 하는지 알 수 있습니다.

14.

    정렬된 목록 태그를 사용하면 정렬된 목록을 만들 수 있습니다. 일반적으로 이는 번호가 매겨진 목록을 얻게 된다는 것을 의미합니다. 목록의 각 항목에는 목록 항목 태그(

  1. ) 목록이 다음과 같이 표시됩니다.


    1. First thing

    2. Second thing

    3. Third thing

    결과:

    1. 제일 먼저
    2. 두 번째 것
    3. 세 번째 것

    HTML5에서는 다음을 사용할 수 있습니다.

      숫자의 순서를 반대로 합니다. 그리고 start 속성으로 시작 값을 설정할 수 있습니다.

      'type' 속성을 사용하면 목록 항목에 사용할 기호 유형을 브라우저에 알릴 수 있습니다. '1', 'A', 'a', 'I' 또는 'i'로 설정할 수 있으며 다음과 같이 표시된 기호와 함께 표시되도록 목록을 설정할 수 있습니다.

        열 다섯.

          정렬되지 않은 목록은 정렬된 목록보다 훨씬 간단합니다. 단순히 글머리 기호 목록입니다.


          • First item

          • Second item

          • Third item

          결과:

          • 첫 번째 항목
          • 두 번째 항목
          • 세 번째 항목

          정렬되지 않은 목록에는 '유형' 속성도 있으며 '디스크', '원' 또는 '사각형'으로 설정할 수 있습니다.

          16.

          서식 지정을 위해 표를 사용하는 것은 눈살을 찌푸리게 하지만 페이지의 정보를 분할하기 위해 행과 열을 사용하고 싶을 때가 많습니다. 테이블이 작동하려면 여러 태그가 필요합니다. 다음은 샘플 HTML 코드입니다.














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          NS

          그리고
          태그는 테이블의 시작과 끝을 지정합니다. NS태그는 모든 테이블 내용을 포함합니다.

          테이블의 각 행은꼬리표. 각 행 내의 각 셀은 다음 중 하나로 래핑됩니다.열 머리글에 대한 태그 또는열 데이터에 대한 태그. 각 행의 각 열에 대해 이 중 하나가 필요합니다.

          결과:

          첫 번째 열두 번째 열
          행 1, 열 11행, 2열
          2행, 1열행 2, 열 2

          17.

          다른 웹사이트나 사람을 인용할 때 인용문을 문서의 나머지 부분과 구분하려면 blockquote 태그를 사용하세요. 당신이 해야 할 일은 blockquote 태그를 열고 닫을 때 인용문을 묶는 것입니다:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          결과:

          내가 상상했던 웹은 아직 보지 못했습니다. 미래는 여전히 과거보다 훨씬 더 큽니다.

          사용되는 정확한 형식은 사용 중인 브라우저나 사이트의 CSS에 따라 다를 수 있습니다. 그러나 태그는 동일하게 유지됩니다.

          HTML 코드 샘플

          이 17개의 HTML 예제를 사용하면 간단한 웹사이트를 만들 수 있습니다. 지금 바로 온라인 텍스트 편집기에서 테스트하여 작동 방식에 대한 느낌을 얻을 수 있습니다.

          HTML에 대한 더 간단한 강의를 보려면 코딩을 위한 몇 가지 마이크로러닝 앱을 사용해 보십시오. 그들은 당신이 빠른 시간 안에 당신을 도울 것입니다.

          공유하다 공유하다 트위터 이메일 기본 코딩을 배우고 싶으십니까? 여가 시간에 5가지 크기의 코딩 앱 사용해 보기

          기본적인 코딩을 배우고 싶지만 시간이 없으신가요? 이 한입 크기의 코딩 앱은 바쁜 하루 중 단 몇 분 정도만 사용할 수 있습니다.

          다음 읽기           관련 항목
          • 프로그램 작성
          • 워드프레스
          • HTML
          • 웹 개발
          • 코딩 튜토리얼
          저자 소개 앤디 베츠(221건의 기사 게재)

          Andy는 15년 동안 기술에 관해 글을 써온 전직 인쇄 기자이자 잡지 편집자입니다. 그 동안 그는 수많은 출판물에 기여했으며 대형 기술 회사를 위한 카피라이팅 작업을 제작했습니다. 그는 또한 미디어에 전문가의 논평을 제공하고 업계 행사에서 패널을 주최했습니다.

          앤디 베츠가 참여한 작품 더보기

          뉴스레터 구독

          뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

          구독하려면 여기를 클릭하세요.