
이 기사에서는 자주사용하는 태그와 태그의 사용법에 대해 다루고 있습니다.
소스의 실행방법
기본적인 코드는 저번 강의에서 배포한 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) 속성도 지정할 필요가 있습니다.
- 눈에 문제가 있는 사람。눈에 문제가 있는 사람은 보통 스크린 리더라 불리는 툴을 사용해서 화면에 있는 이미지를 문장으로 불러오기 때문에, 그 툴은 주로 alt속성의 내용을 읽습니다.
- 특정한 이유로 이미지를 표시하는데 실패한 경우도 예상하여야 합니다. 예를들어,
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
드디어! 이몸과 같은 파워풀한 사이트를 완성했다!
/brori.jpg?w=1200&ssl=1)
나와 같이 카카로트를 쓰러뜨리지 않겠는가?
카카로트를쓰러트리기 위한 모임!
이놈들을 쓰러트린다!
- 카카로트
- 베지터
- 아버지
이 순서로 쓰러트린다!
- 카카로트
- 베지터
- 아버지
이 홈페이지는 이 링크로 부터 다운 받으실수 있습니다!(클릭하여 다운받으실수 있습니다.)
여러분 모두 제 강의에 따라와 주셔서 감사합니다!계속해서 홈페이지에대한 공부를 하여 좋은 홈페이지를 만들수 있도록 합시다!
Web개발 – 처음하는 HTML
- 처음하는HTML-(5)-자주사용하는 태그와 태그의 사용법(완)
- 처음하는HTML-(4)-본격적인HTML
- 처음하는HTML-(3)-HTML의 기본 규칙
- 처음하는HTML-(2)-HTML문서의 기본 구성
- 처음하는HTML-(1)-처음하는HTML
(다음 강좌)Web개발 – 처음하는 CSS
- 처음하는 CSS-(5)-페이지 레이아웃(완)
- 처음하는 CSS-(4)-link요소로 css 파일 불러오기
- 처음하는 CSS-(3)-style요소내의 CSS기술
- 처음하는 CSS-(2)-CSS의 기본원리
- 처음하는 CSS-(1)-처음하는 CSS