이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

웹사이트를 만드는 방법은 알고 싶지만 어떤 HTML 코드를 사용해야 할지 모르십니까? 이 튜토리얼을 따라 소스 코드 예제와 함께 HTML로 첫 번째 기본 웹사이트를 만드세요!

3가지 사항에 대해 알아보겠습니다.

HTML이란 무엇인가
몇 가지 기본 HTML 구문
컴퓨터에서 로컬 웹사이트를 만드는 방법

참고로 이 게시물은 이전에 HTML을 사용해 본 적이 없는 완전한 초보자를 대상으로 합니다.

CSS나 JavaScript가 관련되지 않으므로 우리가 만들 이 웹페이지는 그다지 아름답지 않다는 점을 명심하십시오. HTML과 기본 기능을 보여주는 데 중점을 둡니다.

HTML이란 무엇입니까?

이제 HTML이란 무엇입니까? HTML은 하이퍼텍스트 마크업 언어를 나타냅니다.

브라우저에서 웹 페이지에 정보를 표시하는 방법입니다.

한 가지 기억해야 할 점은 HTML 자체가 프로그래밍 언어가 아니라는 것입니다. 마크업 언어입니다. PHP 또는 Java와 같은 프로그래밍 언어는 논리 및 조건과 같은 것을 사용하여 콘텐츠를 제어합니다.

HTML은 그런 일을 하지 않지만 여전히 매우 중요합니다. 결국 존재하는 모든 단일 웹사이트를 구성합니다!

브라우저에서 HTML 파일 로드

실제로 컴퓨터에서 HTML 파일을 만들고 브라우저에서 로드할 수 있습니다. 인터넷에 표시되지 않으므로 로컬 컴퓨터에서만 볼 수 있습니다.

누구나 인터넷에서 접근할 수 있는 실제 웹사이트의 경우 HTML 파일은 서버라는 컴퓨터에 저장됩니다. 그러나 기본 프로세스는 매우 유사합니다.

HTML 파일을 만들려면:

데스크톱이나 파일을 넣고 싶은 곳으로 이동합니다.
그런 다음 마우스 오른쪽 버튼을 클릭하고 "새로 만들기" 및 "텍스트 문서"를 선택합니다. 파일 이름이 "index.html"이고 ".txt"로 끝나지 않는지 확인하십시오.
(어떤 이유로 파일 확장자가 보이지 않으면 "보기" 탭을 클릭하고 "파일 이름 확장명" 확인란이 선택되어 있는지 확인합니다.)
파일이 모두 설정되면 브라우저에서 열고 싶을 것입니다.
왼쪽에 Chrome 또는 기타 브라우저 아이콘이 있으면 두 번 클릭하여 자동으로 열 수 있음을 의미합니다. 그렇지 않은 경우 마우스 오른쪽 버튼을 클릭한 다음 "연결 프로그램"을 선택하고 즐겨 사용하는 브라우저를 선택하십시오.
브라우저에서는 모든 것이 비어 있는 것처럼 보이지만 파일에 아직 아무 것도 포함되어 있지 않기 때문에 문제가 없습니다.

파일 편집

이제 파일 설정이 완료되었으므로 코딩을 시작할 준비가 된 것입니다!

HTML 파일을 편집하려면 코드 편집기에서 열어야 합니다. 파일을 마우스 오른쪽 버튼으로 클릭하고 "연결 프로그램"과 편집기를 선택하십시오. 그렇지 않으면 일부 편집자는 메뉴에서 빠른 링크를 갖게 됩니다.

저는 Visual Studio Code를 사용하고 있지만 다음과 같은 다른 프로그램을 사용할 수 있습니다.

메모장++
숭고함
아톰
대괄호

이제 브라우저와 편집기 모두에서 색인 파일을 열었으므로 코드 작성을 시작하겠습니다!

HTML 태그

HTML의 몇 가지 기본 기능을 살펴보겠습니다.

HTML은 태그로 구성됩니다.

태그는 웹페이지의 일부를 마크업하거나 구별하는 데 사용하는 특수 텍스트입니다. 따라서 하이퍼텍스트 "마크업" 언어입니다.

이 태그는 브라우저가 태그 내부에 있는 내용을 특정 방식으로 표시하도록 지시합니다.

다음은 실행 중인 태그의 한 예입니다.

This is my very first website and I’m <b>extremely excited!!!!!</b>

이 <b>에 '매우 흥분됨'이라는 단어가 있음을 알 수 있습니다. 태그 – "b"는 굵게 표시됩니다.

이제 파일을 저장하고 브라우저를 다시 로드해 보겠습니다. 텍스트는 다음과 같아야 합니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

괜찮아! 방금 HTML을 작성했습니다. 아직 흥분을 느끼십니까? 🙂

HTML 태그 분석

태그를 다시 살펴보겠습니다.

구 앞의 태그를 여는 태그 —라고 합니다. <b>

그리고 문구 뒤의 태그는 닫는 태그 — </b> . 닫는 태그에 "b" 앞에 슬래시가 있는 것을 볼 수 있습니다.

함께, 이 두 태그는 브라우저에 그들 사이에 있는 모든 텍스트를 굵게 표시하도록 지시합니다. 바로 그 일이 일어났습니다.

이제 이것은 분명하지만 브라우저가 HTML을 로드할 때 태그 자체는 보이지 않으며 페이지에 표시되지 않습니다.

꽤 멋지죠? 제가 웹사이트를 만드는 것을 좋아하는 한 가지 이유는 브라우저에 무언가를 표시할 수 있는 마법과도 같습니다.

HTML 문서의 기본 구조

이제 브라우저에서 인식할 수 있는 HTML 파일로 파일을 저장했기 때문에 우리가 작성한 텍스트 줄이 작동합니다.

그러나 인터넷상의 실제 HTML의 경우 모든 것이 제대로 작동하려면 파일에 몇 가지 태그를 더 추가해야 합니다.

Doctype 및 HTML 태그

가장 먼저 필요한 태그는 doctype 태그입니다. 정확히 HTML 태그는 아니지만 브라우저에 이것이 HTML5 문서임을 알려줍니다.

다음과 같이 표시됩니다. <!DOCTYPE html>

이 태그는 닫는 태그가 필요하지 않습니다. 텍스트를 둘러싸고 있지 않기 때문입니다. 단지 이것이 HTML임을 선언하는 것일 뿐입니다.

과거에 사용된 다른 doctype은 HTML 4 또는 XHTML입니다. 그러나 현재 HTML 5는 실제로 사용되는 유일한 doctype입니다.

doctype 뒤에 HTML 태그가 있습니다. 이것은 웹 브라우저에 내부의 모든 것이 HTML임을 알려줍니다.

<!DOCTYPE html>
<html>
 
</html>

이미 HTML doctype 태그를 사용했기 때문에 약간 중복된 것 같습니다. 그러나 이 태그는 그 안에 있는 모든 것이 HTML의 일부 필수 특성을 상속하도록 합니다.

머리 부분과 몸통 부분

기본 HTML 태그 내에서 콘텐츠는 일반적으로 Head와 Body의 두 섹션으로 분리됩니다.

코드에서 다음과 같이 표시됩니다.

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

   </body>
</html>

head 태그에는 웹사이트에 대한 정보가 포함되어 있으며 CSS 및 JavaScript 파일을 로드하는 위치이기도 합니다. 오늘은 다루지 않겠지만 참고만 하세요.

본문 태그 웹 페이지의 주요 내용입니다. 페이지에 표시되는 모든 것은 일반적으로 body 태그에 있습니다. 따라서 처음에 만든 문장을 본문으로 옮겨야 합니다.

다음과 같이 표시됩니다.

<body>
   This is my very first website and I'm <b>extremely excited!!!!!!</b>
</body>

브라우저에서 페이지를 새로고침하면 모든 것이 이전과 완전히 같아야 합니다.

이제 머리와 몸에서 일반적으로 사용되는 몇 가지 기본 태그에 대해 알아보겠습니다.

100개가 넘는 태그가 있기 때문에 존재하는 가능한 모든 단일 태그를 살펴보지는 않겠습니다. 그리고 그것은 영원히 걸릴 것입니다.

HTML 페이지가 어떻게 구성되어 있는지 더 잘 이해할 수 있도록 가장 자주 사용되는 것만 살펴보겠습니다.

기본 헤드 태그

메타 태그

머리에 있어야 하는 첫 번째 태그는 이 메타 태그입니다. 이것은 문자 인코딩을 설정합니다.

<meta charset="utf-8">

UTF-8은 전 세계의 거의 모든 웹사이트에서 사용되는 유니코드 인코딩 유형입니다. 우리가 사용하는 문자, 숫자, 기호를 컴퓨터에서 사용하는 바이트로 변환해야 하기 때문에 인코딩이 필요합니다.

인간의 언어를 컴퓨터 언어로 번역하는 일종의 사전으로 생각할 수 있습니다.

모든 웹사이트에 있어야 하는 다음 메타 태그는 이 뷰포트 태그입니다.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

이것은 반응형 웹사이트에 중요합니다. 반응형이란 웹사이트가 컴퓨터, 태블릿, 휴대전화 등 모든 기기에서 제대로 표시될 수 있음을 의미합니다.

이 태그의 콘텐츠는 웹사이트의 너비를 보고 있는 기기와 동일한 너비로 만들어야 한다고 말합니다.

예를 들어, 휴대 전화는 랩톱 컴퓨터보다 훨씬 작은 화면 해상도 또는 크기를 가지고 있습니다. 이렇게 하면 사용자가 사용하는 것에 따라 웹사이트 크기가 자동으로 조정됩니다.

초기 배율은 웹사이트의 확대/축소를 설정합니다. 요즘 브라우저에서는 확대/축소하여 웹사이트를 더 크게 또는 더 작게 보이게 할 수 있습니다. 기본적으로 1로 설정되어 확대 또는 축소되지 않기를 바랍니다.

제목 태그

메타 태그 외에 가장 중요한 태그 중 하나는 제목 태그입니다.

<title>My First Website</title>

짐작할 수 있듯이 이것은 웹 페이지의 제목을 설정합니다. 웹사이트에 다른 페이지가 있는 경우 각 페이지에 고유한 제목이 있을 수 있습니다.

이러한 모든 태그를 코드에 추가하면 head 태그가 다음과 같이 표시되어야 합니다.

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>My First Website</title>
</head>

그리고 브라우저에서 제목 태그에 입력한 내용이 탭에 표시되는 것을 볼 수 있습니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

기본 바디 태그

이제 재미있는 내용을 살펴보겠습니다. 본문 태그는 실제로 보게 되는 콘텐츠를 제어합니다.

대부분의 기본 본문 태그는 Word 문서에서 수행할 수 있는 작업을 기반으로 합니다. 헤드라인, 굵은 텍스트, 목록, 표까지 만들 수 있습니다.

CSS 이전에는 이러한 태그를 사용하여 독자가 더 쉽게 이해할 수 있도록 콘텐츠를 구성하고 스타일화하는 데 도움이 되었습니다.

이러한 모든 태그가 여전히 예전만큼 많이 사용되는 것은 아닙니다. 일부는 이제 CSS를 사용하여 동일한 스타일을 얻을 수 있기 때문에 더 이상 필요하지 않습니다.

하지만 이러한 기본 태그가 무엇인지 아는 것은 여전히 도움이 된다고 생각합니다.

헤더 태그

먼저 H 문자로 지정된 헤드라인 또는 헤더 태그를 살펴보겠습니다. 각 H 태그에도 H 뒤에 숫자가 있습니다. 범위는 <h1>입니다. <h6>로 .

<h1> 태그가 우선 순위가 가장 높습니다. 일반적으로 페이지의 제목으로 사용됩니다.

<h1>를 추가하겠습니다. 우리 웹 페이지에 태그. 태그 안에 웹페이지의 제목인 My First Website를 입력합니다.

또한 <h2>를 사용하여 자막을 추가합니다. 콘텐츠가 포함된 태그:"HTML Playground."

그리고 간단히 <h6>까지 H 태그의 나머지 부분을 추가해 보겠습니다. .

따라서 body 태그는 다음과 같이 보일 것입니다.

<body>
   <h1>My First Website</h1>
   <h2>An HTML Playground</h2>
   <h3>An HTML Playground</h3>
   <h4>An HTML Playground</h4>
   <h5>An HTML Playground</h5>
   <h6>An HTML Playground</h6>
</body>

웹페이지를 저장하고 새로고침하면 다음과 같이 표시됩니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

<h1>에서 글꼴 크기가 점차 작아지는 것을 볼 수 있습니다. <h6>로 .

대부분의 웹사이트는 모든 H 태그를 사용하지 않습니다. 일반적으로 <h1>를 사용합니다. 제목의 경우 <h2> 자막 및 <h3> 때때로 섹션 제목을 위해. <h4>를 사용하는 경우는 매우 드뭅니다. <h6>를 통해 .

단락

다음으로 살펴볼 태그는 단락 또는 <p>입니다. 꼬리표. Word에서와 마찬가지로 단락을 사용하여 콘텐츠를 블록으로 분리할 수 있습니다. 콘텐츠를 <p>로 둘러싸서 단락을 만들 수 있습니다. 태그.

자리 표시자 텍스트로 단락을 만들 것입니다.

자리 표시자 텍스트를 찾는 가장 쉬운 방법 중 하나는 "lorem ipsum . ” 제가 꽤 자주 이용하는 사이트입니다.

로렘 입숨 text는 레이아웃 작업을 위해 텍스트를 채우기 위해 출판 및 디자인에 사용되는 의미없는 라틴어 단어입니다.

따라서 여기에서 이 단락을 복사하여 <p> 내부의 코드에 넣습니다. 꼬리표. 두 번째 단락도 만들어 보겠습니다. 텍스트를 더 복사하여 두 번째 <p>에 넣겠습니다. 태그.

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nullam facilisis arcu vel mollis finibus. Nunc facilisis 
   vel nisl lacinia cursus. Cras suscipit augue sed volutpat 
   tincidunt. Aenean dictum tincidunt urna, quis eleifend 
   quam mattis eu. Integer sollicitudin, nisl faucibus aliquam 
   ullamcorper, metus sapien scelerisque lorem, at ornare dui 
   orci non orci. Integer tempus consectetur metus, vitae 
   blandit nibh aliquam nec. Pellentesque vestibulum arcu eget 
   ante sollicitudin, id accumsan dui molestie. Suspendisse 
   vehicula semper dui id congue. Suspendisse sed velit sit 
   amet velit luctus varius. Ut condimentum tincidunt consequat. 
   Sed eu ligula non magna scelerisque auctor.
</p>

<p>
   Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque 
   nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, 
   sit amet semper tortor. Nunc rhoncus non arcu in scelerisque. 
   Donec magna mauris, congue ac dignissim rutrum, tincidunt 
   quis leo. Maecenas dictum orci in magna iaculis, in elementum 
   felis viverra. Aenean sit amet sapien odio. Donec molestie 
   est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt 
   lorem et, facilisis enim. Praesent id felis sit amet quam 
   dignissim volutpat. Nam nec cursus mi, quis tincidunt justo.
</p>

브라우저에서는 다음과 같이 표시됩니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

그리고 거기에 있습니다. 브라우저는 단락과 다른 콘텐츠 사이에 자동으로 약간의 공백을 추가합니다.

줄 바꿈

이제 콘텐츠를 여러 줄로 분리하고 싶지만 단락과 함께 공백을 사용하지 않으려면 줄 바꿈 또는 <br> 태그.

좀 더 lorem ipsum 합시다 텍스트를 작성하여 편집기에 넣습니다.

이제 HTML에 대해 주의해야 할 점은 자동으로 줄을 나누지 않는다는 것입니다.

콘텐츠에서 Enter 키를 몇 번 누르면 페이지에서 아무 일도 일어나지 않습니다. 스페이스바를 여러 번 눌러도 마찬가지입니다.

브라우저는 한 공간만 제공하면 됩니다. 줄 바꿈을 만들려면 <br>를 추가해야 합니다. 태그.

여러 줄 바꿈을 추가하여 콘텐츠에 더 많은 공간을 추가할 수도 있습니다.

Fusce sit amet rutrum lacus.<br><br><br><br><br/>
Sed efficitur laoreet nisl,ac faucibus velit hendrerit sit amet. 
Phasellus ac orci eget nisi porta accumsan a eget ex. Nam lacinia 
dolor at mi tristique rhoncus.Maecenas nisl est, rhoncus id cursus 
non, tempor a neque.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

Void 요소에는 닫는 태그가 필요하지 않습니다.

닫는 <br>가 없음을 알 수 있습니다. 태그 — 텍스트를 둘러싸는 데 사용되지 않기 때문에 닫는 태그가 필요하지 않습니다.

닫는 태그가 없는 이러한 유형의 태그를 무효 요소라고 합니다. 내용이 없기 때문에 비어 있음을 의미합니다.

이에 대한 또 다른 참고 사항은 때때로 <br/>로 작성된 줄 바꿈이 표시될 수 있다는 것입니다. 닫는 슬래시와 함께. 이것은 XHTML의 요구 사항이었지만 HTML 5에서는 슬래시가 필요하지 않습니다.

브라우저는 여전히 태그를 올바르게 읽지만 슬래시 없이 void 요소를 작성하는 것이 좋습니다.

스타일 태그

다음으로 살펴볼 태그 세트는 스타일 태그입니다. 이 태그는 텍스트에 스타일을 추가합니다.

맨 처음에 했던 것처럼 굵게 표시할 수도 있고 기울임꼴, 밑줄, 강조 및 강한 태그도 있습니다.

이전에 말했듯이 이러한 스타일 태그는 이제 CSS를 사용하여 모든 스타일을 지정할 수 있기 때문에 많이 사용되지 않습니다.

각 스타일 태그를 살펴보겠습니다.

<b> 태그는 텍스트를 굵게 만듭니다. .
<i> 태그는 텍스트를 기울임꼴으로 만듭니다. .
<u> 태그는 텍스트에 밑줄을 그어줍니다.
<em> (강조된) 태그는 일반적으로 기울임꼴으로 해석됩니다. 브라우저에서.
그리고 <strong> 태그는 일반적으로 굵게 표시됩니다. 텍스트.

다음은 각각의 모양에 대한 데모 코드입니다.

<b>Sed efficitur laoreet nisl,</b><br> 
 <i>ac faucibus velit hendrerit sit amet.</i><br> 
 <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br>
 <em>Nam lacinia dolor at mi tristique rhoncus.</em><br>
 <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

다음은 해당 코드가 브라우저에 표시되는 방식입니다.

수평 규칙

수평선 태그는 웹페이지에 전체를 가로지르는 수평선을 만듭니다.

다음과 같이 작성합니다. <hr>

줄 바꿈 태그와 마찬가지로 수평선은 void 요소이며 닫는 태그 없이 단일 태그만 있으면 됩니다.

...
<strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>
<hr>
Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. 
Donec eget lacinia elit. Suspendisse commodo justo at lorem molestie, vitae 
tempus enim laoreet.
...

<hr> 앞의 콘텐츠 태그는 줄 위에 있고 그 아래의 내용은 다음과 같이 줄 아래에 있습니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

앵커 링크

링크는 우리가 인터넷을 이용하는 주요 방법 중 하나입니다.

링크 태그는 <a>로 작성됩니다. 꼬리표. A는 "닻"을 의미합니다. 링크는 보트가 정박 중인 모든 것에 보트를 연결하는 보트 닻처럼 두 웹사이트를 연결하기 때문입니다.

링크를 만들려면 먼저 <a> 클릭할 수 있는 링크 텍스트 주위에 태그를 지정합니다.

태그 자체 외에도 <a> 태그에는 속성이 필요합니다. 이는 여는 태그 내부에 추가 정보를 의미합니다.

속성

사용하는 속성은 href입니다. 기인하다. 하이퍼텍스트 참조의 줄임말입니다. . 그리고 값은 대상 웹사이트의 URL입니다.

예를 들어, Google 홈페이지로 연결하려는 경우 URL https://www.google.com/을 사용합니다.

URL은 Universal Resource Locator를 나타냅니다. , 로드하려는 웹페이지나 파일의 위치를 알려주는 주소 역할을 합니다.

<a>에서 자주 사용되는 또 다른 속성 태그는 "대상"입니다. 클릭한 링크가 같은 페이지에서 열릴지, 아니면 브라우저의 새 페이지나 탭에서 열릴지 제어합니다.

기본적으로 동일한 페이지에서 링크가 열립니다. 링크를 새 페이지에서 열려면 대상을 "_blank"로 설정하세요.

다음은 앵커 링크의 데모입니다.

<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>

이미지

다음으로 살펴볼 것은 이미지입니다. 웹 페이지에 이미지를 삽입하려면 <img>로 작성된 이미지 태그를 사용할 수 있습니다. .

이미지 태그는 닫는 태그가 필요하지 않은 또 다른 void 요소입니다.

링크 태그와 마찬가지로 이미지 태그에도 URL이 필요합니다. 링크 사용과 같은 href 대신 이미지 태그에는 src 속성이 있습니다. , 이미지의 출처를 의미합니다.

이 예에 사용할 이미지를 인터넷에서 찾아보겠습니다. 테스트 이미지를 위해 제가 가는 정말 유용한 곳 중 하나는 https://placeholder.com/입니다.

Placeholder.com에서 이미지의 URL을 가져와 우리가 만들고 있는 이미지의 이미지 소스에 넣습니다.

<img src="https://via.placeholder.com/600x300.jpg">

또는 이미지 자체를 다운로드하여 index.html 파일과 동일한 폴더에 넣고 다음과 같이 참조할 수 있습니다.

<img src="600x300.jpg">

하나의 속성은 <img> 태그 사용은 테두리입니다. , 픽셀 수로 설정할 수 있습니다.

<img src="https://via.placeholder.com/600x300.jpg" border="10">

다음과 같을 것입니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

다음으로 살펴볼 것은 목록입니다. HTML은 글머리 기호 또는 번호 목록을 매우 쉽게 만들 수 있습니다.

글머리 기호 목록을 순서 없음이라고 합니다. 순서와 대조되는 목록 숫자를 사용하는 목록입니다.

목록을 만들려면 목록 태그를 사용합니다. <ol> 또는 <ul> 순서가 있는 목록을 만드는지 순서가 없는 목록을 만드는지에 따라 다릅니다.

다양한 종류의 과일을 정렬되지 않은 목록으로 만들 것입니다.

<ul> 목록에 대한 태그입니다.

목록 태그 안에 목록 항목을 넣습니다. 각 항목은 <li>로 작성된 자체 목록 항목 태그 내부로 이동합니다. .

사과, 오렌지, 파인애플, 망고, 드래곤프루트를 추가할 예정입니다.

<ul>
   <li>apples</li>
   <li>oranges</li>
   <li>pineapples</li>
   <li>mangoes</li>
   <li>dragonfruit</li>
</ul>

다음은 그 모습입니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

이제 <ol>를 사용하여 목록을 정렬된 목록으로 변경하면 태그는 다음과 같습니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

중첩 목록

목록을 서로 중첩할 수도 있습니다. 사과 아래에 다양한 종류의 사과를 추가하고 싶다고 가정해 보겠습니다. 문제의 목록 항목 내부에 자체 목록 항목과 함께 새 목록 태그를 생성합니다.

따라서 사과 <li> 내에서 태그에 새 <ul>를 추가하겠습니다. "apple" 텍스트 아래에 태그를 지정합니다.

그런 다음 다양한 종류의 사과를 넣겠습니다. 골든 딜리셔스, 갈라, 그래니 스미스 등입니다.

<ul>
   <li>apples
      <ul>
         <li>golden delicious</li>
         <li>granny smith</li>
         <li>gala</li>
      </ul>
   </li>
   <li>oranges</li>
   <li>pineapples</li>
   <li>mangoes</li>
   <li>dragonfruit</li>
</ul>

페이지를 새로고침하면 사과 유형의 중첩 목록이 기본 목록보다 들여쓰기가 더 많이 된 것을 볼 수 있습니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

중첩 및 들여쓰기

이것은 좋은 HTML을 작성하는 중요한 측면을 알려줍니다. HTML 태그를 다른 태그 안에 넣으면 중첩이라고 합니다.

하위 및 상위 요소

다른 요소 내부의 요소를 하위 요소라고 합니다. , 외부 요소를 상위 요소라고 합니다. .

부모 및 자식 요소를 구성하기 위해 자식 요소를 들여씁니다. 이것은 부모와 구별하는 데 도움이 됩니다.

과일 목록과 함께 주요 목록 항목(사과, 오렌지, 망고)을 들여쓴 것을 볼 수 있습니다. 그리고 사과 종류의 경우 더 들여쓰기를 했습니다.

사람이 코드를 읽을 수 있도록 들여쓰기

이렇게 하면 코드를 깨끗하게 유지하는 데 도움이 됩니다. 당신과 다른 사람들은 그것이 하는 일을 빨리 이해할 수 있습니다.

모든 HTML 요소가 들여쓰기되지 않고 동일한 수준에 있다면 상황이 더 혼란스러워 보일 것입니다. 단지 하나의 요소가 아니라 매우 많은 다른 요소와 태그가 서로 중첩되어 있다고 상상해 보십시오. 코드가 말하는 내용을 구문 분석하려면 영원히 걸릴 것입니다.

이러한 들여쓰기 방식은 HTML뿐만 아니라 CSS, JavaScript 및 기본적으로 존재하는 프로그래밍 언어에서도 좋은 방식으로 간주됩니다.

컴퓨터에는 필요하지 않지만 사람이 코드를 읽는 것은 필요합니다. 첫 직장에서 들여쓰기는 훈련 중에 가장 먼저 배운 것입니다.

꽤 중요합니다. 다른 사람의 코드를 작업하고 완전히 엉망이 되는 것보다 더 나쁜 것은 없습니다. 따라서 들여쓰기는 다른 사람들(그리고 자신도)이 돌아가서 읽을 수 있는 코드를 작성하고 있는지 확인하는 쉬운 방법입니다.

표

들여쓰기 및 중첩 요소에 대해 이야기하면 마지막 HTML 태그에서 이를 많이 사용합니다. 테이블입니다.

테이블은 원래 데이터를 행과 열로 구성하는 효율적인 방법으로 사용되었습니다. 이를 설명하기 위해 가정의 월예산에 대한 표를 만들어 보겠습니다.

테이블 만들기

시작하려면 먼저 <table>이 필요합니다. 꼬리표. 테이블의 다른 모든 항목은 이 태그 안에 있습니다.

테이블 내부에는 테이블 행, 테이블 셀 및 열 헤더에 대한 테이블 헤더가 있습니다.

그런 다음 <tr>를 사용하여 첫 번째 테이블 행에 추가합니다. 태그.

<table>
   <tr></tr>
</table>

이 행 안에 열 머리글을 넣을 것입니다. <th>를 사용하여 이를 수행할 수 있습니다. — 테이블 헤더 — 태그. 기본적으로 표 머리글은 굵은 텍스트이며 셀 중앙에 있습니다.

그런 다음 여기에 몇 가지 예산 범주를 추가하여 이 표를 작성합니다. 월부터 시작하여 임대료, 공과금, 식료품, 외식 및 엔터테인먼트를 제공합니다. 제가 잊어버린 다른 카테고리가 있을 거라 생각하지만 여기서는 간단하게 설명하겠습니다.

<table>
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
</table>

그런 다음 다음 행에서 8월의 데이터를 추가합니다. 헤더가 아니므로 <td>를 사용합니다. 태그, 테이블 데이터용.

괜찮아. 매월 임대료가 $1500라고 가정해 보겠습니다. 그런 다음 유틸리티 비용으로 $150, 식료품 비용 $350, 외식 비용 $100, 오락 비용 $50를 받았습니다.

<table>
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$150</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

이것이 어떻게 보이는지 봅시다. 다음은 테이블입니다:

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

테이블 스타일 지정

아주 기본적인 모습이죠? 내장된 테이블 속성을 사용하여 테이블의 스타일을 약간 지정할 수 있습니다.

먼저 테두리를 설정하여 테이블에 선을 추가할 수 있습니다. 속성을 테이블 태그에 지정합니다. 테두리를 1픽셀 두께로 설정합니다. 더 큰 숫자를 사용하면 테이블 주변의 테두리가 넓어집니다. 그러나 표 셀 사이의 테두리는 기본적으로 항상 1픽셀 너비입니다.

셀패딩을 사용할 수도 있습니다. , 텍스트에서 테두리까지 각 셀 내부의 추가 공간을 제어합니다. 따라서 셀 패딩을 10으로 설정해 보겠습니다. 그러면 숨을 쉴 수 있는 공간이 조금 더 생겨 비좁은 것처럼 보이지 않습니다.

변경할 수 있는 다른 속성은 셀 간격입니다. . 이것은 셀 사이의 공간을 제어합니다. 개인적으로 셀 사이에 공간이 없는 것을 좋아하므로 0으로 유지하겠습니다.

<table border="1" cellpadding="10" cellspacing="0">

다음은 이러한 스타일 속성이 있는 표의 모습입니다.

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

표 권장사항

HTML 테이블을 작성할 때 한 가지 확인해야 할 사항은 테이블의 모든 행에 동일한 수의 열이 있어야 한다는 것입니다.

그렇지 않으면 일이 엉망이 될 것입니다. 식료품 셀을 삭제하면 어떻게 보이는지 보여드릴 수 있습니다.

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <!-- Groceries removed-->
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$150</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

브라우저에서 표를 보면 이제 머리글이 한 위로 이동하고 표 셀이 없기 때문에 끝에 이상한 공백이 있는 것을 볼 수 있습니다. 다시 되돌려 보겠습니다.

표 셀은 여러 열/행에 걸쳐 있을 수 있음

그러나 표 셀을 여러 열에 걸쳐 만들 수 있습니다. 유틸리티를 분리하여 두 가지 유형의 데이터, 즉 물과 전기에 대한 데이터를 갖고 싶다고 가정해 보겠습니다. 따라서 전기는 $100, 수도는 $50입니다.

이를 위해 실제로 데이터에 추가 셀을 만들고 유틸리티 양을 조정합니다. 전기는 $100, 수도는 $50입니다.

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$100</td><!-- $150 changed to $100-->
      <td>$50</td><!-- extra cell added for $50 -->
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

이 시점에서 테이블을 로드하면 두 번째 행의 추가 셀로 인해 테이블이 다시 엉망이 된 것처럼 보입니다. 이 다음 속성이 문제를 해결합니다.

Colspan 속성

Utilities 헤더 셀이 $100 및 $50 셀 모두 위에 있기를 원합니다.

이를 위해 colspan이라는 속성을 추가합니다. , 즉 열 범위를 유틸리티 헤더 셀에 연결합니다. 그리고 2로 설정합니다.

<th colspan="2">Utilities</th>

이렇게 하면 유틸리티 셀이 하나가 아닌 2개의 열에 걸쳐 있게 됩니다.

그리고 여기 있습니다! 굉장히 정리가 잘 된 것 같죠?

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

행 범위 속성

colspan 외에도 rowspan 속성을 사용하여 셀이 여러 행에 걸쳐 있도록 할 수도 있습니다.

6월, 7월, 8월 데이터가 있고 이를 "가을"로 지정하려고 한다고 가정해 보겠습니다.

다시 복사하여 붙여넣고 8월 데이터를 사용하여 6월 및 7월 데이터도 생성하겠습니다.

가을에 대한 셀을 만들려면 6월부터 시작하여 월의 왼쪽에 있게 하고 싶습니다. 따라서 June 행에서 June 이전에 새 셀을 만들고 "Fall"을 입력합니다. 그런 다음 해당 셀의 행 범위를 3으로 설정하여 6월, 7월, 8월에 걸쳐 있게 됩니다.

그리고 첫 번째 열에 총 4개의 행이 포함되도록 첫 번째 행에 스페이서 셀을 추가해야 합니다.

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th colspan="2">Utilities</th><!-- This cell will span 2 columns in the row below it -->
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
    <tr>
      <td rowspan="3">Fall</td><!-- this cell will span 3 rows, June, July, & August -->
      <td>June</td>
      <td>$1500</td>
      <td>$100</td><!-- The $100 and $50 cells will be under the Utilities cell-->
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>July</td>
      <td>$1500</td>
      <td>$100</td>
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$100</td>
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

Here’s what the final table looks like!

이 매우 간단한 웹 사이트를 만들어 HTML을 배우십시오.

Tables were used for website layouts

A bit of historical context about tables. Aside from containing data, web developers also used to use tables to layout web designs.

So for example if you have a website design with a header, main content, and a footer, you can create one big table with three rows. And you can then put all your content in those table cells. Table cells can contain any kind of HTML– images, links, text, you name it.

It was very handy back in the day. Nowadays tables aren’t really used very often. The only common exception that I can think of is for HTML emails, because some older email systems can’t use a lot of CSS, so coding like it’s 1999 is unfortunately the only option.

In closing

And there you have it– you’ve made a basic website in HTML.

If you’re interested in learning HTML and web development, I’d recommend using some of the following resources to get started:

freeCodeCamp — a free online coding bootcamp run by a non-profit. Many graduates have gone on to land full-time web development jobs.
The Web Developer Bootcamp by Colt Steele — complete front and back-end online bootcamp on Udemy, taught by a former coding bootcamp instructor.

If you enjoyed this post, please leave a comment below, or share it with your friends!