웹문서 공부2013. 10. 24. 02:18

[웹문서]footer 태그, 바닥글 나타내기

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는 footer 태그를 사용해서 바닥글을 나타내는 방법에 대해서 정리해 보겠습니다.

 

바 닥 글

웹페이지의 최하단에 사이트 정보나 저작권 표시 등을 나타내는 영역을 말합니다.

쉽게 이야기해서,

웹문서 하단에 이용약관 ㅣ 개인정보취급방침 ㅣ 사이트맵 ㅣ

Copyright ⓒ 2013 welcome365.tistory. All Rights Reserved

와 비슷하게 표시되어 있는 영역을 의미합니다.

 

 

footer 태그

<footer>...</footer> 형식으로 사용합니다.

<body>...</body> 태그 사이에서 사용됩니다.

웹문서의 최하단에 오는 것이 일반적이지만, 특별한 규정이 없이 페이지 중간이나 상단에 위치해도 된다.

 

 

footer 태그 예제

<body>

<footer>

<ul>

<li><a href="agreement.html">이용약관</a>ㅣ

<a href="privacy_info.html">개인정보취급방침</a>ㅣ

<a href="sitemap.html">사이트맵</a>ㅣ</li>

</ul>

<p>Copyright ⓒ 2013 welcome365.tistory. All Rights Reserved</p>

</footer>

</body>

 

 

 

그럼 이제 위의 예제를 웹브라우저 IE10으로 확인해 보겠습니다.

 

 

아래는 위 웹문서의 소스 내용을 직샷한 것입니다. 

조금 이상한 부분도 있지만, footer 태그를 사용한 부분이 중요하므로, 나머지는 그런갑다 하시면 됩니다. 

 

이렇게 해서 footer 태그를 사용하여 바닥글을 나타내는 방법에 대해서 간략히 정리해 보았습니다.

알고 나면 쉬운 내용인데, 어떻게 이해가 잘 되셨는지 모르겠습니다.

(풉,,, 저도 지금 헤매고 있는데, 이해가 잘 되냐고 물어보는 저는 뭘까요..?? ㅎㅎ)

아무튼 간에 이렇게 해서 footer 태그에 대한 정리를 마치겠습니다.

지금까지 잡지식스토리의 촉끼남이였습니다.

휘리릭~~

 

 

저작자표시 비영리 동일조건

'웹문서 공부' 카테고리의 다른 글

[웹문서] ul 태그, li 태그, 목록 만들기  (1) 2013.10.30
[웹문서]pre 태그, 입력한대로 표시하기  (0) 2013.10.28
[웹문서]nav태그, 내비게이션을 나타내기  (0) 2013.10.20
[웹문서]section태그, 웹문서 안에서 영역을 구분하기  (0) 2013.10.15
[웹문서]script태그, 스크립트 파일 사용하기  (0) 2013.10.13
Posted by DaumTistory
웹문서 공부2013. 10. 15. 23:12

[웹문서]section태그, 웹문서 안에서 영역을 구분하기

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는 section태그에 대해서 알아보겠습니다.

 

일단, section 태그에 대해서 가볍게 개념 정리부터 들어가겠습니다.

 

section 태그

일반적으로 웹문서의 영역을 구분하는 가장 기본이 되는 태그입니다.

책으로 보자면 문장이 있고 문단이 있는데, section 태그는 문단이라고 이해하면 쉽습니다.

웹문서에서 영역을 구분하는 태그에는 section 태그 이외에도 nav 태그, article 태그, aside 태그가 있습니다.

 

 

HTML소스 문서입니다. 주황색 둥근 사각형 안의 section을 하나의 구분으로 사용하였습니다. 

아.. 급하게 작성하다 보니, 사용언어 설정을 영어로 해 버렸습니다.

section 태그에 대한 포스팅이기 때문에 크게 상관은 없겠지만, 이왕이면 <html lang="en">을 <html lang="ko">로 수정하여 한국어를 사용 언어로 설정하는게 좋겠습니다.

 

 

 

다음음 IE10 브라우저로 확인한 웹문서입니다.

위와 같이 주황 둥근 사각박스가 하나의 세션을 나타냅니다.

 

이렇게 하여 section 태그에 대해서 가볍게 정리해 보았습니다.

HTML 소스 문서와 IE10 브라우저 문서를 비교화면서 확인해 보면 쉽게 이해할 수 있을거라 생각됩니다.

이번 포스팅은 여기까지이며, 다음에는 구분을 짓는 다른 태그들에 대해서 알아보도록 하겠습니다.

 

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>section 태그 알아보기</title>
  </head>
  <body>
    <header>
      <h1>대중교통수단의 종류</h1>
      <p>대중교통수단의 종류에 대해서 알아보겠습니다.</p>
    </header>
    <section>
      <h2>버스</h2>
      <p>버스전용도로를 통해서 다니는 교통수단입니다.</p>
    </section>
    <section>
      <h2>지하철</h2>
      <p>지하에 건설한 철로를 통해서 다니는 교통수단입니다.</p>
    </section>
  </body>
</html>

 

 

 

저작자표시 동일조건

'웹문서 공부' 카테고리의 다른 글

[웹문서]footer 태그, 바닥글 나타내기  (0) 2013.10.24
[웹문서]nav태그, 내비게이션을 나타내기  (0) 2013.10.20
[웹문서]script태그, 스크립트 파일 사용하기  (0) 2013.10.13
[HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기  (0) 2013.10.10
[HTML]meta name태그, 웹문서의 정보를 나타내기  (0) 2013.10.05
Posted by DaumTistory
웹문서 공부2013. 10. 13. 20:08

[웹문서]script태그, 스크립트 파일 사용하기

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는 웹문서에서 script 태그를 사용하는 방법에 대해서 정리해 보겠습니다.

 

script 태그는 웹문서에 script를 삽입하고자 할 때에 사용하는 태그입니다.

기본적으로 <body>...</body>태그 안에서 script 태그가 사용됩니다.

 

 

 

script 태그의 속성들

type="컨텐츠 타입"

text/javascript 나 text/ecmascript 등의 사용되는 스크립트 언어의 컨텐츠 타입을 설정해 주는 속성입니다.

기본값은 text/javascript로 설정되어 있으며, 자바스크립트를 사용한다면 생략이 가능합니다.

 

src="스크립트 파일 URL"

불러들이는 스크립트 파일의 URL을 지정해 주는 속성입니다.

 

charset="스크립트 파일의 문자 인코딩"

불러들이는 스크립트 파일의 문자 인코딩을 지정해 주는 속성입니다.

src 속성을 통해서 외부에서 스크립트 파일을 불러올 경우에만 지정합니다. 

 

위에서 설명한 속성들은 외부에서 스크립트 파일을 불러올 경우를 설명한 것입니다.

script 태그 안에서 직접 기술할 수도 있습니다만, 외부에서 불러오는 것과 중복 지정할 수 없습니다.

 

그럼.. 스크립트는 무엇일까요..??

간단하게 정리하면 브라우저로 열어본 웹문서 화면을 동적으로 표현해 주는 응용프로그램이라고 할 수 있겠습니다.

사진같이 멈춰있는 웹문서 화면을 스크립트를 사용하여 동적으로 브라우저 화면이 움직이게 기능을 추가시켜 주는 것입니다.

아직 웹문서 스크립트에 대해서는 파고있는 것이 없어서 이정도로 가볍게 정리하는 것으로 하겠습니다.

 

 

지금까지 script 태그를 사용하여 외부의 스크립트 파일을 불러오는 방법에 대해서 알아보았습니다.

독학으로 웹문서를 공부하고 있는 촉끼남의 끄적거림에 관심을 가져주신 여러분들께 감사드립니다.

 

 

 

저작자표시 비영리 동일조건

'웹문서 공부' 카테고리의 다른 글

[웹문서]nav태그, 내비게이션을 나타내기  (0) 2013.10.20
[웹문서]section태그, 웹문서 안에서 영역을 구분하기  (0) 2013.10.15
[HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기  (0) 2013.10.10
[HTML]meta name태그, 웹문서의 정보를 나타내기  (0) 2013.10.05
[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
Posted by DaumTistory
웹문서 공부2013. 10. 10. 21:27

[HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는 웹문서에 초기 정보를 설정하는 meta http-equiv 태그에 대해서 정리해 보겠습니다.

 

일단 html 소스 작성 문서를 먼저 보겠습니다. 

3행부터 11행까지 <head>..</head>태그 안에서 meta http-equiv 태그가 사용된 것을 확인할 수 있습니다.

 

meta http-equiv 태그 소스입력 형식

<meta http-equiv="속성" content="지정한 속성에 대한 속성값">

 

 

meta http-equiv 태그에 사용되는 속성들

content-language

웹문서에 사용되는 언어를 지정합니다.

content-type

웹문서의 형식설정 및 문자 인코딩 방법을 설정합니다.

default-style

웹문서에 적용되는 여러가지 stylesheet 중에서 기본이 되는 style을 지정합니다.

refresh

웹문서를 일정 시간 후에 '새로고침' 하거나 '지정된URL'로 이동시킵니다. 

위 HTML소스 문서와 비교하면서 보시면 쉽게 이해할 수 있습니다.

 

 

자.. 다음은 작성한 웹문서를 브라우저를 통해서 열면 어떻게 나타나는지 알아보겠습니다.

처음에는 본문 내용만 나타납니다.

그러다가 meta http-equiv="refresh" 속성때문에 3초 후에 지정한 웹페이지로 이동된 것을 확인할 수 있습니다.

 

 

지금까지 웹문서의 초기 정보를 설정해 주는 meta http-equiv 태그에 대해서 가볍게 정리해 보았습니다.

이해가 잘 안되시는 분들은 직접 소스문서를 작성하여 확인해 보면, 단번에 이해되실 겁니다.

왜냐구요..?? 웹문서의 '웹'자도 모르는 저도 직접해 보니까, 단번에 이해가 되었으니까요..^^;;

아무튼 이렇게 해서 이번 정리는 이쯤에서 마치는 것으로 하겠습니다.

지금까지 잡지식스토리의 촉끼남이였습니다. 다음에도 유용한 웹문서 공부거리로 다시 찾아 오겠습니다.

 

 

 

저작자표시 비영리 동일조건

'웹문서 공부' 카테고리의 다른 글

[웹문서]section태그, 웹문서 안에서 영역을 구분하기  (0) 2013.10.15
[웹문서]script태그, 스크립트 파일 사용하기  (0) 2013.10.13
[HTML]meta name태그, 웹문서의 정보를 나타내기  (0) 2013.10.05
[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기  (0) 2013.09.29
Posted by DaumTistory
웹문서 공부2013. 10. 5. 13:05

[HTML]meta name태그, 웹문서의 정보를 나타내기

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는  meta name태그에 대해서 알아보겠습니다.

 

일단 meta name태그는 웹문서의 정보를 나타내는 태그로, 일반적으로 <head>...</head>태그 안에서 사용됩니다.

meta neme태그의 성값을 지정하고 웹문서의 정보를 나타내야 하는데, 이것은 cotent속성을 사용해서 나타냅니다.

name태그로 사용할 수 있는 속성값에는 아래와 같은 것들이 있습니다.

application-name : web어플리케이션 용으로 만들어진 문서의 경우, 어플리케이션 이름을 나타냅니다.

auther : 웹문서의 저자를 나타냅니다

description : 웹문서의 기본 설명을 나타냅니다.

content속성의 속성값에 입력한 글이 검색 엔진의 검색 결과로 나타납니다.

generator : 웹문서를 작성하는데 사용한 프로그램의 이름을 나타냅니다.

keywords : 웹문서와 관련된 키워드를 지정합니다.

viewport : 스마트폰으로 웹문서를 열었을 때, 보이는 폭을 설정합니다.

 

기본적인 정리는 위와 같습니다.

그럼 이제, 예제를 통해서 조금더 감을 잡아보겠습니다. 

위의 HTML소스 문서를 보면, <head>태그 안에서 meta name태그가 사용된 것을 확인할 수 있습니다.

<meta name="속성값" content="name태그 속성값의 웹문서 정보"> 형식으로 태그가 사용되었습니다.

그럼 이제, 웹브라우저로 어떻게 나타나는지 확인을 해 보겠습니다.

body태그 안의 본문 내용만 나타난 것을 알 수 있습니다.

head태그 안에서 사용된 태그이기 때문에 브라우저에서는 특별하게 표시되는 것은 없지만, 해당 웹문서의 기본 정보를 나타내는 태그이기 때문에 유용하게 사용될 수 있다고 판단됩니다.

 

--- 요  약 ---

<head>

<meta name="속성값' content="name태그 속성값의 웹문서 정보">

</head>

HTML소스를 위와 같이 작성하여 해당 웹문서의 정보를 나타낼 수 있습니다.

 

위와 같이 요약을 하면서, 이번 포스팅은 마무리 하도록 하겠습니다.

지금까지 잡지식스토리의 촉끼남이였으며, 다음에는 더욱 유용한 웹문서 공부거리로 다시 돌아오겠습니다.^^;;

 

 

 

저작자표시 비영리 동일조건

'웹문서 공부' 카테고리의 다른 글

[웹문서]script태그, 스크립트 파일 사용하기  (0) 2013.10.13
[HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기  (0) 2013.10.10
[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기  (0) 2013.09.29
[HTML]title태그, 웹페이지에 웹문서 제목 입력하기  (0) 2013.09.27
Posted by DaumTistory
웹문서 공부2013. 9. 30. 21:45

[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는 HTML의 link 태그에 대해서 정리해 보도록 하겠습니다.

 

--- <link>태그 ---

해당 웹페이지가 다른 웹페이지와 연결되어 있을 때, 어떤 관계로 연결되는지 나타내는 태그.

<head>...</head>태그 안에서 정의해야 하며, 연결되는 웹페이지의 URL은 href 속성으로 나타내고, rel속성을 사용하여 연결되는 웹페이지가 어떤 관계로 연결되는지 정의한다.

 

일단 기본적인 정리는 위와 같습니다.

그럼 HTML소스 문서와 브라우저 실행 페이지를 통해서 어떤 내용인지 알아보겠습니다.

 

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>link태그 알아보기</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link rel="prev" href="page0.html">
   <link rel="next" href="page2.html">
   <link rel="help" href="help.html">
 </head>
 <body>
    <p>link태그를 통해서 서로 연결된 웹페이지의 관계를 나타냅니다.</p>
 </body>
</html>

 

HTML소스 문서입니다. <head>...</head>태그 안에서 <link rel="..." href="...">형식으로 정의하였습니다.

처음에 말했던 것 처럼, rel 속성을 통해서 각 웹페이지와의 관계를 나타내고 있습니다.

link태그의 rel속성에 사용하는 키워드는 이미 지정되어 있는데,

alternate(대체페이지) / auther(저자) / help(도움말) / icon(아이콘) / license(저작권) / prev(이전페이지) / next(다음페이지) / prefetch(프리패치) / search(검색페이지) / stylesheet(스타일시트 파일) / tag(태그 적용페이지)

가 그것입니다.

위에서는 stylesheet 키워드로 CSS 파일을 불러 왔고, 이전페이지 / 다음페이지 / 도움말페이지를 설정하였습니다.

자.. 그럼 브라우저를 통해서 어떻게 표시되는지 확인해 보겠습니다.

 

웹페이지 제목과 본문내용만 표시되는 것을 알 수 있습니다.

당연합니다. link태그는 head태그 안에서 정의되기 때문입니다.

브라우저를 통해서 실행되는 웹페이지는 body태그 내용만 표시만 됩니다.

그래도 태그를 확인하려면, '소스보기' 기능을 통해서 어떻게 정의되었는지 확인할 수 있습니다.

그리고 '오페라' 브라우저를 통해서 link태그가 사용된 것을 눈으로 확인할 수 있는 기능이 있다고 하는데, 사실인지는 모르겠습니다.

(어쨌든 저는 '익스플로어'로 실행시켰기 때문에 안보인다는 거~~)

 

음.. 여기 저기 뒤져보니까, link태그나 rel속성에 대해서 제대로 정리를 하려면 내용이 끝이 없을 것 같다는 생각을 해서 일단 기본적인 내용만 정리하였습니다.

어차피 웹문서 공부를 하려면 필요한 내용들이니, 나중에 하나씩 하나씩 정리할 수 있도록 하겠습니다.

그러면서 일단 이번 포스팅은 이정도에서 마치는 것으로 하겠습니다.^^;;

 

지금까지 잡지식스토리의 촉끼남이였으며, 다음에는 더 유익한 웹문서 공부거리를 가지고 올 수 있도록 하겠습니다.

 

 

 

저작자표시 비영리 변경금지

'웹문서 공부' 카테고리의 다른 글

[HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기  (0) 2013.10.10
[HTML]meta name태그, 웹문서의 정보를 나타내기  (0) 2013.10.05
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기  (0) 2013.09.29
[HTML]title태그, 웹페이지에 웹문서 제목 입력하기  (0) 2013.09.27
[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!!  (0) 2013.09.25
Posted by DaumTistory
웹문서 공부2013. 9. 27. 03:07

[HTML]title태그, 웹페이지에 웹문서 제목 입력하기

   

 

반갑습니다. 잡지식스토리의 촉기남입니다.

이번 포스팅에서는 HTML문서의 <title>태그에 대해서 정리해 보도록 하겠습니다.

 

『 <title>태그는 웹페이지의 제목을 지정해 주는 태그입니다. 』

 

이 웹페이지의 제목은 다음의 영역에 노출됩니다.

(1) 웹브라우저의 제목표시줄이나 탭표시줄에 웹문서의 제목으로 표시됩니다.

(2) 즐겨찾기 목록에 추가될 때, 표시되는 제목입니다.

(3) 포털사이트에서 검색했을 때, 검색 결과 목록에 보여지는 제목입니다.

 

그럼 이제 예시를 들어 HTML문서를 작성해 보고, 웹브라우저로 확인을 해 보겠습니다.

< HTML 문서 작성 >

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>Title 태그 알아보기</title>
 </head>
 <body>
  <p>title태그는 웹페이지의 제목을 나타냅니다.</p>
 </body>
</html>

 

 

아래 이미지를 보면 각 행에 대한 내용을 쉽게 이해할 수 있습니다.

 

 

< 웹브라우저 실행 및 확인 > 

웹브라우저로 실행해 보면, title태그의 내용이 웹페이지의 '탭 표시줄'에 표시되는 것을 확인할 수 있습니다.

 

 

이것으로 우리는 <title>태그의 기능을 알아보고, 그 개념을 자세하게 정리해 보았습니다.

위 HTML 작성 문서에 나타난 태그들을 모두 정리하는 것이 맞지만, 한번에 정리하기에는 부담스러운 부분이 있어서 하나씩 하나씩..!! 정리하는 것으로 하겠습니다.

 

아.. 누누이 알려드립니다만, 저는 웹문서의 '웹'자도 모르는 놈입니다.

해당 카테고리의 포스팅은 저혼자 공부해서 정리하는 것이므로, 잘못된 부분이 있으면 댓글로 알려주시기 바랍니다.

 

지금까지 잡지식스토리의 촉끼남이였으며, 다음 포스팅에서 더 유익한 공부거리로 다시 찾아오겠습니다.

 

 

 

저작자표시 동일조건

'웹문서 공부' 카테고리의 다른 글

[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기  (0) 2013.09.29
[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!!  (0) 2013.09.25
HTML의 기본구조, 요소(Element)/태그와 요소내용  (0) 2013.09.23
[웹문서]웹문서 공부 시작합니다.  (0) 2013.09.17
Posted by DaumTistory
웹문서 공부2013. 9. 25. 09:00

[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!!

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

 

전에도 말씀드렸다시피, '웹문서 공부'는 대중없이 그냥 손에 잡히는대로 포스팅 하기로 했습니다.

이번에는 저번 포스팅에서 설명했던 요소들이 모여서 하나의 HTML웹문서를 구성하는 기본 구조에 대해서 정리해 보겠습니다.

 

여기 저기 알아보니까, HTML문서는 요소들이 합쳐져서 이루어져 있는데, 이 요소들 사이에도 상위요소가 있고 하위요소가 있고 해서,

결과적으로 계층이 있고, 구조가 있다고 합니다.

그래서 그 구조를 '트리구조'라 하고 상속이 어쩌고 저쩌고 하면서 중요하다고 하는데, 솔직한 이야기로 촉끼남한테는 무슨 말인지도 잘 모르겠고, 간단하게 개념 정리를 하는 쪽으로 진행하겠습니다.

 

일단 기본적으로 EditPlus라는 프로그램을 이용해서 정리를 해 보겠습니다.

이것도 솔직히 어떤 프로그램인지는 잘 모르겠으나, 인터넷에 검색을 하다보니, 이 프로그램으로 수정/편집 작업을 하길래 촉끼남도 써 보는 것으로 했습니다. 일단 행마다 번호가 있어서 쓰기 편하다고 판단됩니다.

프로그램은 '네이버 자료실'에서 30일 쉐어웨어로 등록되어 있으니, 알아서 설치하시면 되겠습니다.

 

그럼 이제 개념 정리 들어갑니다.

 

1, 15 -- <html>태그 / HTML 웹문서임을 정의하는 요소입니다. 시작태그와 종료태그로 나타냅니다.

2, 4   -- <head>태그 / 웹문서의 기본 정보를 정의하는 요소입니다. 시작태그와 종료태그로 나타냅니다.

3      -- <title>태그 / <head>태그의 하위요소입니다. <title>태그 이 외에 다른 하위요소들도 있습니다.

웹문서의 제목을 정의하는 요소로, 실제 웹페이지 제목영역에 요소내용이 표시됩니다.

아래 이미지를 보면 웹페이지 제목이'잡지식스토리'로 표시되는 것을 확인 할 수 있습니다.

5, 14 -- <body>태그 / 웹페이지의 본문을 나타내는 요소입니다. 실제로 웹페이지에 표시되는 부분입니다.

6,7,8,9,10,11,12,13 - <h1>태그. <ul>태그, <li>태그, <p>태그 / <body>태그의 하위요소들입니다.

여러 가지 하위요소가 있으며, 일단 이번 포스팅은 기본구조만 정리하는 단계이므로, 앞으로 하나씩 정리하는 쪽으로 진행하겠습니다.

 

 

위와 같이 HTML문서를 작성하고, 웹브러우져로 보기를 하면 일반적으로 보이는 웹페이지가 보입니다.

웹브라우져는 윈도우 운영체제에서 기본 설치되는 '인터넷 익스플로어'를 포함하여 '오페라''사파리''파이어폭스''크롬'등 다양한 브라우져가 있으므로, 적당한 프로그램을 선택하면 되겠습니다.

 

아무튼, 위와 작이 작성한 HTML문서를 웹브라우져를 통해서 보면 다음과 같이 표시됩니다.

 

이정도로 해서, HTML웹문서의 기본구조에 대해서 알아보는 '웹문서 공부 정리'를 마치도록 하겠습니다.

앞서 말했다시피, 이번 포스팅은 웹문서의 기본구조를 알아보고 개념만 잡는 단계이기 때문에, 자세한 내용은 차차 정리하는 것으로 하겠습니다.

지금까지 잡지식스토리의 촉끼남이였으며, 다음 포스팅에서는 더욱 유익한 웹문서 공부거리로 돌아도록 하겠습니다.

 

 

 

저작자표시 비영리 동일조건

'웹문서 공부' 카테고리의 다른 글

[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기  (0) 2013.09.29
[HTML]title태그, 웹페이지에 웹문서 제목 입력하기  (0) 2013.09.27
HTML의 기본구조, 요소(Element)/태그와 요소내용  (0) 2013.09.23
[웹문서]웹문서 공부 시작합니다.  (0) 2013.09.17
Posted by DaumTistory
웹문서 공부2013. 9. 23. 03:02

HTML의 기본구조, 요소(Element)/태그와 요소내용

   

 

반갑습니다. 잡지식스토리의 촉끼남입니다.

 

저번 포스팅에서 '웹문서 공부'카테고리에 대해서 촉끼남이 고민을 많이 했습니다.

웹문서에 대해서 공부는 하고 싶은데, 어디서부터 어떻게 시작을 해야할지 몰라서 허우적댔습니다.

서점에 가서 책도 보고, 인터넷에서 검색도 해 보고 했습니다.

그러다, '이거 시작도 못해보고 접겠네' 라는 생각과 함께 일단 시작한다라는 생각을 합니다.

그래서 무작정 계획부터 새웁니다. 계획은 이렇습니다. 

일단 관련 서적 및 온라인 게시글들을 바탕으로 공부를 시작할 것이며, 체계적으로 정리하면 좋겠지만, 촉끼남은 웹문서의 '웹'자도 모르는 상황이므로, 그냥 닥치는대로 막 하는 걸로~~ ^^;;

 

자.. 그럼 이제부터 '웹문서 공부' 정리를 시작하겠습니다..!!

일단 HTML의 기본구조부터 시작하겠습니다.

이것이 요소라는 HTML문서의 기본구조입니다.

영어로,'Element' 라고 하며, 자동차에 비유하자면, 부품이라고 할 수 있겠네요.

이 요소는 태그와 요소 내용으로 이루어져 있습니다.

그리고 태그는 시작태그과 종료태그가 있습니다.

물론 시작태그만 있는 태그들도 있지만, 일단 위에서는 시작태그와 종료태그가 있습니다.

또, 시작태그는 기본적으로 <요소명 (공백) 속성>으로 이루어져 있으며, 속성은 [속성명="속성값"]으로 구성됩니다.

 

주저리 주저리 말로만 풀어 놓으니, 이해가 잘 안되는 것 같습니다. 하나씩 풀어 보겠습니다.

시작태그 : <a href=http://www.welcome365.tistory.com>

- 요소명 : <a

- 속성    : href=http://www.welcome365.tistory.com

- 속성명 : href

- 속성값 : http://www.welcome365.tistory.com>

요소내용 : 잡지식스토리

종료태그 : </a>

 

위에 하나씩 하나씩 나열해서 정리하기는 했지만, 개인적인 생각으로 용어는 그렇게 중요하지 않다고 생각됩니다.

용어가 중요한게 아니라, 그것들이 무엇을 의미하는지가 중요하다고 생각됩니다.

 

그럼 정리를 다시 한번 해 보겠습니다. 촉끼남스타일로 정리해 보겠습니다.

요소명 : 해당 요소의 성질이나 역할을 나타내는 명령어라고 정리하고 싶습니다.

위에서는 '<a'를 요소명이라고 설명했습니다. 편하게 <a>태그라고 말하기도 하는데, <a>태그는 다른 웹페이지를 링크시키는 역할을 합니다. 그 밖에 <header...>, <meta...>, <body...>, <title...>등의 많은 요소명이 있습니다.

태그    : 해당 요소를 표현하기 위해서 '태그'라는 표시 형태를 이용하며, '<'와 '>'기호로 하나의 태그를 이룹니다. 

쉽게 말해서 해당 요소가 어떤 내용인지 알려주기 위한 표시 방법을 태그라고 하는 것입니다. 위에서 말했다시피 요소명'a'를 <a>태그라고 말하기도 하는 것이 이런 이유 때문이라고 할 수 있습니다.

태그는 보통 시작태그와 종료태그로 이루어져 있으며, 위에서는 <a href=....>이 시작태그이고 이 요소의 마지막을 나타내는 </a>가 종료 태그인 것입니다.

일반적으로 시작태그로 해당요소를 시작하면 종료태그로 해당요소를 마무리 지어 주지만, 시작태그만 있는 태그도 있습니다. (뭐.. 더 정확히 이야기 하자면, 시작태그만을 표시하는 요소라고 표현하는게 더 맞는 표현입니다.)

속성명 : 해당 요소의 새부내용을 나타내는 명령어라고 정리하고 싶습니다.

위에서 'href'를 속성명이라고 설명했습니다. 'href'는 링크가 되는 웹페이지를 지정해 주는 역할을 합니다.

'href' 속성명 이외에 웹페이지가 열리는 방식을 지정해 주는 'target' 속성명도 있으며, 각 태그마다 적용되는 속성에는 비슷한 것들도 있지만, 특별하게 해당 태그에만 적용되는 속성이 따로 있는 것들도 있습니다.

요소내용 : 정말 쉽게 이야기 하자면, 웹페이지에 나타는 글을 의미합니다.

   위에서 보면 '잡지식스토리'에 해당하며, 실제로 웹페이지에 '잡지식스토리'라는 글이 나타나는 것입니다.

 

 

쉽게 설명해 보겠다고 했는데, 그래도 조금 부족한 것 같습니다.

음.. 그럼 개념을 정리하는 스타일 말고, 표현되는 스타일로 정말 간단하게 정리 한번 해 보겠습니다.

<시작 태그>...</종료태그>

각 요소는 태그와 요소내용으로 이루어져 있는데, <시작태그>로 요소를 나타내고, </종료태그>로 요소를 마무리 짓습니다. 시작태그와 종료태그 사이에 웹문서에 실제로 표시되는 요소내용으로 구성되어 있습니다.'...'이 되겠습니다.

 

아~ 쉽게 풀어 볼려고 해도, 그게 참 어렵다고 생각됩니다.

실제로는 개념만 확실히 잡고 있으면 아무것도 아닌 것들인데도 말이죠.. ^^;;

아무튼, 글로 풀어 쓴 HTML의 기본구조 정리는 여기까지 입니다. 다시 한번 말하지만, 개념이 중요합니다..!!^^;;

지금까지 잡지식스토리의 촉끼남이였으며, 다음 포스팅에서 더욱 유용한 정보로 다시 돌아오겠습니다.

 

 

 

저작자표시 비영리 동일조건

'웹문서 공부' 카테고리의 다른 글

[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기  (0) 2013.09.29
[HTML]title태그, 웹페이지에 웹문서 제목 입력하기  (0) 2013.09.27
[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!!  (0) 2013.09.25
[웹문서]웹문서 공부 시작합니다.  (0) 2013.09.17
Posted by DaumTistory

티스토리툴바