[HTML] 3. HTML 기본 예제
앞에 글:
2020/03/02 - [HTML and CSS] - [HTML] 1. HTML 소개
2020/03/03 - [HTML and CSS] - [HTML] 2. HTML 에디터
개인적으로 어떤 프로그래밍 언어를 배우던지, 처음에 어떻게 활용되는지 알면
더 호기심도 생기고, 나중에 세밀한 사항에 대해 익힐 때 도움이 된다고 본다.
그렇기에 이번 장에서는 HTML의 기본 예제에 대해서 배워볼까 한다.
물론 여기서 사용되는 Tag들은 앞으로 계속 언급될 것이기 때문에 저절로 익혀질 것이다.
<1. HTML 소개>에서 했던 것을 복습하자면,
모든 HTML 문서는 선언을 하고 들어가야한다. 그 선언은 <!DOCTYPE html>이다.
또한 HTML 문서는 선언 이후에 <html>로 시작하며 </html>로 마무리한다.
또한 이 아래 구조로, 웹사이트 방문자에게 보이는 부분을 <body>와 </body>사이에 입력한다.
1. HTML 전체 형식 예시
자, 다음 예문은 HTML 형식을 완벽히 갖춘 가장 간단한 예시이다.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>위의 예시는 가장 기본적인 예시 중 하나이다.
결과물을 따로 여기에 넣어놓지는 않겠다.
(직접 사용하는 에디터에 넣어서 .html 확장자로 저장을 해서 브라우저로 실행해 보기를 권한다.)
2. HTML Heading 예시
HTML heading은 <h1>부터 <h6> tag로 이루어져 있다.
<h1>는 가장 중요한 글에 사용하고 - 글씨 크기가 가장 크다.
<h6>는 가장 중요하지 않은 글에 사용하면 된다. - 글씨 크기가 가장 작다.
다음 예문을 따라 해 보자.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
<h1>, <h2>, <h3>,... <h6> 순으로 작아지는 것을 확인할 수 있을 것이다.
3. HTML Paragraph 예시
HTML Paragraph는 글의 본문으로 <p>와 </p> tag 사이에 들어가는 글이다.
가장 간단하게 다음과 같이 사용한다.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
위의 예시처럼 본문을 나누고 싶으면 따로 tag를 달면 된다.
4. HTML Link 예시
HTML Link는 <a>와 </a> tag로 이루어진다.
Link는 특정 사이트 혹은, 특정 폴더 안에 있는 파일을 불러오고 싶을 때 사용한다.
예시는 다음과 같다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://honey-bear.tistory.com/">This is a link</a>
</body>
</html>Link의 목적 주소는 href 속성으로 지정할 수 있다.
속성이라 함은, HTML 요소에 추가 정보를 주기 위해 사용하는데,
속성 종류 또한 다양하기 때문에 뒤로 가면서 서서히 다룰 예정이다.
5. HTML Image 예시
HTML에서 이미지는 <img> tag로 불러올 수 있다.
이때 소스 파일은 src로, 대체 텍스트는 alt로,
그리고 그림 크기를 조절하기 위해서 width와 height가 대표적인 속성으로 사용된다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="honey-bear.jpg" alt="honey-bear.com" width="104" height="142">
</body>
</html>
여기서 대체 텍스트라 함은, 소스 파일인 src 속성이 지정하는 파일이 열리지 않을 때
대체해서 그 자리를 메꾸는 텍스트이다.
6. HTML Button 예시
HTML에서 Button을 만들 수 있다.
가장 간단한 예시로 Button을 만들어보자.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
7. HTML List 예시
HTML에서 list는 <ul> 혹은 <ol>로 정의된다.
<ul>은 숫자로 나열하는 list가 아닌, 원형 모양 기호로 나열하며,
<ol>은 숫자로 나열하는 list이다.
<ul>과 <ol> 이후에는 <li>로 각각의 행을 나열할 수 있다.
*<li>는 list items를 의미한다.
아래는 예시이다.
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
위에서 총 일곱 가지 예시를 다루었다.
무엇보다 중요한 것은 복습하는 것이 목적이 아닌 이상,
눈으로만 보지 말고 한 번씩 실행시켜 보자.