처음하는HTML-(5)-자주사용하는 태그와 태그의 사용법(완)

처음하는HTML/////

이 기사에서는 자주사용하는 태그와 태그의 사용법에 대해 다루고 있습니다.

소스의 실행방법

기본적인 코드는 저번 강의에서 배포한 index.html을 사용하여 주십시오. 그 html파일에서「Hello World!」라는 문장을 지우고 무언가를 소개 코드를 입력한 결과를 보도록 합시다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   Hello World!<-이 부분을 지워주십시오！
  </body>
</html>

일단 실행결과 파일도 업로드 하겠지만은, 가능하면 자신의 손으로 소스를 입력해보시는것을 추천드립니다.

제목태그(h태그)「<h1>~<h6>」

제목태그 문서의 제목, 소제목을 지정하는것이 가능합니다.<h1>부터<h6>의 6단계의 제목이 준비되어 있으며, 보통 문장에서 주제목, 부제목, 소제목 등을 나타낼때 사용됩니다.

Example

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

완성소스

단락「<p>」

<p>요소는단락을 나타냅니다. 일반적인 문장을 쓸때 이 요소를 자주 사용하게 됩니다.

Example

<p>
이 문장은
다수의 개행을
포함하고 있습니다만,
브라우저에서는 무시하고 있습니다.
</p>

<p>
이 문장은
많은 양의       공간을
포함하고     있습니다만,
브라우저는    무시하고 있습니다.
</p>

<p>
단락 태그는 브라우저의 사이즈에 의존합니다. 사용자의 브라우저에 맞춰서 단락도 맞춰져서 재조정 됩니다.
</p>

완성소스

그룹화「<div>」

<div>요소는、HTML문서의 일부분, 혹은 섹션을 정의 합니다. 주로 다른 HTML요소의 컨테이너로서 자주 사용되며, CSS로 스타일을 설정하거나, JavaScript로 테스크를 실행합니다.

Example

<div style="background-color:lightblue">
　　<h3>이 제목의 배경은 하늘색으로 보입니다.</h3>
　　<p>이 단락의 배경도 하늘색으로 보입니다.</p>
</div>
<div style="color:lightblue;">
　　<h3>이 제목의 글자색은 하늘색으로 보입니다.</h3>
　　<p>이 단락의 글자색이 하늘색으로 보입니다.</p>
</div>
<div style="font-size:300%;">
　　<h3>이 제목의 사이즈는 300%로 보입니다.</h3>
　　<p>이 문자의 사이즈도 300%로 보입니다.</p>
</div>

완성소스

텍스트의 일부「<span>」

<span>태그는 문서내의 인라인 요소를 그룹화 하는데 사용합니다. 그 자체로서는 시각적인 변경요소가 제공하고 있진 않습니다만, 텍스트 혹은 문서의 일부에 설정을 추가하는것이 가능합니다.

Example

<p>어머니의 눈은 <span style="color:blue">파란색</span> 입니다.</p>
<p>그리고 아버지의 눈은<span style="color:darkolivegreen;font-weight:bold">짙은 녹색</span>입니다.</p>

완성소스

리스트 태그「<ul>, <li>, <ol>」

<ul>태그는 순서를 정의하지 않고 리스트를 정의 합니다. <ul> 태그와 <li>태그를 사용해서, 순서를 정의 하지않고 리스트를 작성할수 있습니다.
그리고<ul>와는 달리 <ol> 태그는 순서를 정의한 리스트 입니다. 순서를 정의한 리스트는 수치 혹은 알파벳으로 순서를 정의 할수 있습니다. <li>태그를 사용해서 리스트 아이템을 정의 할수 있습니다.

Example

<ul>
  <li>ul태그는</li>
  <li>순서를 붙이지 않은</li>
  <li>리스트 입니다만</li>
</ul>
<ol>
  <li>ol태그는</li>
  <li>순서가 붙어있는</li>
  <li>리스트 입니다</li>
</ol>

완성소스

이미지「<img>」

<img>태그는, HTML페이지의 이미지를 정의 합니다.<img>태그에 이미지를 붙이려면「src」라는 이미지의 위치를 표시하는 속성만 있으면 되지만, 아래와 같은 이유로 이미지를 볼수없는 사람들을 위해서 설명을 하는 alt (alternative) 속성도 지정할 필요가 있습니다.

  1. 눈에 문제가 있는 사람。눈에 문제가 있는 사람은 보통 스크린 리더라 불리는 툴을 사용해서 화면에 있는 이미지를 문장으로 불러오기 때문에, 그 툴은 주로 alt속성의 내용을 읽습니다.
  2. 특정한 이유로 이미지를 표시하는데 실패한 경우도 예상하여야 합니다. 예를들어,  src 속성에 지정 주소를 잘못 입력한 경우등이 그런 사례 입니다. 페이지를 보존하거나 다시 불러오기를 하면 alt에 쓰여 있는 텍스트 내용을 표시하기 때문입니다.

그 외에도, 이미지의 세로의 길이를 지정하는<height>속성이나 가로의 길이를 지정하는<width>속성도 있습니다.

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   <img src="sample.jpg" alt="My test image" height="420" width="600">
  </body>
</html>

완성소스(클릭하여 다운로드 하실수 있습니다.)

링크「<a>」

<a>태그는 특정 페이지로 부터 다른 페이지로 링크로 이동하는 하이퍼 링크를 정의합니다.「href」라는 속성을 사용해서 이동하는 링크를 지정할수 있습니다.

Example

<a href="https://dripcoke.com/ko/">홈페이지로 이동합니다.</a>

완성소스

정리

마지막으로 위와같은 소스를 종합하여 이하와 같은 페이지를 작성하였습니다！
여러분도 브●리님 처럼 멋진 사이트를 만들수 있도록 합시다!

Example

드디어！ 이몸과 같은 파워풀한 사이트를 완성했다！

ブロリー

나와 같이 카카로트를 쓰러뜨리지 않겠는가？

카카로트를쓰러트리기 위한 모임！

이놈들을 쓰러트린다！

  • 카카로트
  • 베지터
  • 아버지

이 순서로 쓰러트린다！

  1. 카카로트
  2. 베지터
  3. 아버지

이 홈페이지는 이 링크로 부터 다운 받으실수 있습니다!(클릭하여 다운받으실수 있습니다.)

여러분 모두 제 강의에 따라와 주셔서 감사합니다！계속해서 홈페이지에대한 공부를 하여 좋은 홈페이지를 만들수 있도록 합시다!

Web개발 – 처음하는 HTML

(다음 강좌)Web개발 – 처음하는 CSS

프로그래밍 강좌 메인

프로그래밍
이 사이트를 제작및 운영하면서 공부한 지식들입니다. 어떠한 분이라도 도움이 되셨으면 하는 마음으로 올려봅니다.Web개발 프로그래밍 초보자 분들에게 추천할수 있는 웹개발 강좌 입니다.처음 하는 Web개발처음하는 HTML처음하는 CSS처음하는 JavaScriptWeb게임 개...