웹문서 공부2013. 11. 15. 08:00

[HTML]div 태그, 일반적인 영역 설정하기

   

 

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

이번에는 HTML 태그 중에서 div 태그에 대해서 가볍게 정리해 보겠습니다.

 

div 태그

일반적으로 일부 영역을 따로 설정해 주는 태그입니다.

이 태그를 사용한다고 해서 브라우저상으로 특별한 변화는 없지만, 웹문서를 작성할 때에 class 속성이나 id 속성으로 div 태그 영역만 스타일을 재설정 할 수 있습니다.

 

어렵나요??

음... 쉽게 이야기해서 div 태그를 사용한 영역은 별도로 스타일이나 스크립트 설정이 가능하다는 이야기입니다.

개인적으로 제대로 사용한다면 웹문서의 일부 영역을 강조하여 가시성을 높일수 있다고 생각됩니다.

 

 

div 태그 예제

<!doctype html>

<html lang="ko">
    <head>

<meta charset="UTF-8">
<title>div 태그 알아보기</title>
<style type="text/css">
      div {
      color: #ff0000;
      }
 </style>

</head>
 <body>
      <div>
      <p>div 태그로 일부 영역을 선택하였습니다.</p>
      </div>
      <p>여기는 div 태그가 적용되지 않았습니다.</p>
 </body>
</html> 

 


그럼 이제 브라우저로 어떻게 나오는지 확인해 볼까요..??

IE10으로 확인해 보겠습니다.

 

 

HTML소스 문서와 브러우저 출력 내용을 확인해 보면 무슨 내용인지 쉽게 이해할 수 있습니다.

css로 div 태그 영역을 빨강색 글씨 스타일로 설정하였고,

본문에서 div 태그를 사용한 영역은 빨강 글씨로 출력되게 하였습니다.

비교해 보세요. 정말 쉽습니다.

개인적인 생각으로 웹페이지를 꾸밀 때, 정말 유용하게 사용할 수 있을거라 생각합니다.

그러니까, 무슨 내용인지는 알고 있어야 할 것 같습니다.

 

그럼 이정도에서 스을 마무리 짓도록 하겠습니다.

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

 

저작자표시 동일조건

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

인터넷 시작페이지 설정 레지스트리  (0) 2013.12.27
[웹문서]동일 페이지에서 지정한 위치로 이동하기  (1) 2013.11.28
[웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기  (0) 2013.11.01
[웹문서] ul 태그, li 태그, 목록 만들기  (1) 2013.10.30
[웹문서]pre 태그, 입력한대로 표시하기  (0) 2013.10.28
Posted by DaumTistory
웹문서 공부2013. 11. 1. 00:30

[웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기

   

 

반갑습니다. 촉끼남입니다.

이번에는 ol태그와 li태그를 사용하여 순번이 있는 목록을 만드는 방법에 대해서 정리해 보겠습니다.

 

태그 설명

<ol><li>...</li></ol> 형식으로 태그를 사용합니다.

<ol>태그는 순번이 있는 목록을 만들겠다는 설정이고, <li>태그는 목록 리스트를 나열한다는 설정입니다.

기본적으로 순번은 순자 1부터 시작합니다.

 

 

 

<ol><li>...</li></ol>태그 사용 예제

<body>

<p>대한민국 교육과정 순서</p>

<ol>

<li>초등학교</li>

<li>중학교</li>

<li>고등학교</li>

<li>대학교</li>

</ol>

</body>

 

 

자.. 그럼 위의 소스로 작성한 html문서를 IE10으로 확인해 보도록 하겠습니다.

html소스로 작성할 때에 순서를 지정해 주지 않았음에도 불구하고, 숫자로 된 순번이 자동을 입력되는 것을 확인할 수 있습니다.

 

 

 

<ol start="#">...</ol> 태그 응용

<ol start="#">...</ol>태그를 사용하면 자동으로 입력되는 순번의 시작 숫자를 설정할 수 있습니다.

 

<body>

<p>대한민국 교육과정 순서</p>

<ol start="2">

<li>초등학교</li>

<li>중학교</li>

<li>고등학교</li>

<li>대학교</li>

</ol>

</body>

 

위와 같이 적용을 하면 목록이 숫자 2부터 순번을 매기게 됩니다.

 

 

 

 

 

 

<ol><li value="#">...</li></ol> 태그 응용

<ol><li value="#">...</li></ol>태그를 사용하면 순번 자동 입력 도중에 순번의 번호를 바꿀수 있습니다.

 

<body>

<p>대한민국 교육과정 순서</p>

<ol>

<li>초등학교</li>

<li>중학교</li>

<li value="7">고등학교</li>

<li>대학교</li>

</ol>

</body>

 

위와 같이 적용을 하게 되면 순번이 자동으로 입력되다가 고등학교에서 7, 대학교에서 8 순번으로 입력되게 됩니다.

 

 

 

순번이 있는 목록 만들기에 대해서 정리해 보았습니다.

기본적인 개념만 잡고 있다면, 크게 어렵지 않은 내용이라고 생각되오니,

여러분들도 실제로 html 문서를 작성해 보시기 바랍니다.

 

오늘 포스팅은 여기까지입니다. 지금까지 잡지식스토리의 촉끼남이였습니다.

 

 

 

저작자표시 동일조건

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

[웹문서]동일 페이지에서 지정한 위치로 이동하기  (1) 2013.11.28
[HTML]div 태그, 일반적인 영역 설정하기  (0) 2013.11.15
[웹문서] ul 태그, li 태그, 목록 만들기  (1) 2013.10.30
[웹문서]pre 태그, 입력한대로 표시하기  (0) 2013.10.28
[웹문서]footer 태그, 바닥글 나타내기  (0) 2013.10.24
Posted by DaumTistory
웹문서 공부2013. 10. 30. 01:00

[웹문서] ul 태그, li 태그, 목록 만들기

   

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

 

이번에는 웹문서에서 목록을 만드는 방법에 대해서 간략하게 정리해 보겠습니다.

사용되는 태그는 ul 태그와 li 태그입니다.

 

ul / li 태그

 

기본적으로 항목의 순서가 중요하지 않는 목록을 작성할 때 사용되는 기본 태그입니다.

<ul>...</ul> 태그는 해당 항목이 순서가 없는 목록임을 지정하는 태그입니다.

<li> ... </li> 태그는 목록으로 표시되는 항목을 나열하는 태그입니다.

ul 태그와 li 태그를 동시에 사용해야 순서가 없는 목록이 나타납니다.

기본적으로 목록앞에 점이 표시됩니다.

 

 

 

ul / li 태그 예시

 

<body>

<p> 국내 3대 포털사이트의 종료를 나열해 보겠습니다. </p>

<ul>

<li>네이버</li>

<li>다음</li>

<li>네이트</li>

</ul>

</body>

 

 

 

자.. 그럼 IE10 브라우저를 통해서 웹문서가 어떻게 표현되는지 알아보겠습니다.

 

 

 

인터넷 익스플로어를 통해서 확인 할 수 있듯이 순서가 없는  목록을 만들었습니다.

html 소스를 보고 직접 따라해 보면 쉽게 이해할 수 있을거라 판단됩니다.

 

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

 

 

저작자표시 동일조건

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

[HTML]div 태그, 일반적인 영역 설정하기  (0) 2013.11.15
[웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기  (0) 2013.11.01
[웹문서]pre 태그, 입력한대로 표시하기  (0) 2013.10.28
[웹문서]footer 태그, 바닥글 나타내기  (0) 2013.10.24
[웹문서]nav태그, 내비게이션을 나타내기  (0) 2013.10.20
Posted by DaumTistory
웹문서 공부2013. 10. 28. 02:19

[웹문서]pre 태그, 입력한대로 표시하기

   

 

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

 

이번에는 pre 태그를 사용하여 입력한대로 웹문서에 표시하는 방법에 대해서 정리해 보겠습니다.

 

pre 태그

<pre>...</pre> 형태로 사용합니다.

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

웹문서 안에서 공백이나 줄바꿈 등을 입력한 대로 브라우저에 표시하고자 할 때 사용됩니다.

프로그램 코드 내용이나 인코딩 내용 등을 있는 그대로 표시하고자 할 때 사용합니다.

 

 

pre 태그 예제

<body>

<p>pre태그를 사용하여 내용을 입력한 대로 표시할 수 있습니다.img 태그를 설명하는 pre태그를 사용해 보겠습니다.</p>

<pre>

<body> 

<img src="사진 주소.png">사진파일이 있는 url 주소를 입력해주면 웹문서상에서 사진이 표시됩니다.

</body>

</pre>

</body>

 

 

IE10 웹브라우저로 확인해 보겠습니다.

 

위 이미지는 인터넷 익스플로어10로 실행시킨 것이고, 아래 이미지는 해당 웹문서의 소스보기를 한 것입니다.

해당 웹문서의 소스를 보면 알 수 있다피시 pre 태그를 사용한 부분은 줄바꿈이 소스내용과 똑같이 표시되는 것을 확인할 수 있습니다.

하지만, p 태그를 사용한 부분은 소스 작성상 줄바꿈을 했어도 실제로 웹브라우저에서는 한 줄로 표시됩니다.

소스 보기 문서를 제대로 이해하면 pre 태그에 대한 이해는 끝난 것입니다.

간단하게 이해를 돕자면,

웹문서를 작성할 때 pre 태그를 사용하게 되면 입력한 대로 똑같이 표시되는 것입니다.

p 태그를 사용하게 되면 줄바꿈을 하였어도 실제로는 한 줄로 인식된다는 것입니다. 이것은 html문서의 특징입니다.

 

어떻게 이해는 잘 하셨나요..??

직접 해보면 쉽게 이해 하실 수 있을 겁니다.

이렇게 하여 pre태그를 사용하여 내용을 입력한 대로 표시하는 밥법에 대해 가볍게 정리해 보았습니다.

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

휘리릭~~~

 

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

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

[웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기  (0) 2013.11.01
[웹문서] ul 태그, li 태그, 목록 만들기  (1) 2013.10.30
[웹문서]footer 태그, 바닥글 나타내기  (0) 2013.10.24
[웹문서]nav태그, 내비게이션을 나타내기  (0) 2013.10.20
[웹문서]section태그, 웹문서 안에서 영역을 구분하기  (0) 2013.10.15
Posted by DaumTistory
웹문서 공부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. 20. 23:58

[웹문서]nav태그, 내비게이션을 나타내기

   

 

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

이번에는 <nav>...</nav> 태그에 대해서 정리해 보는 시간을 갖도록 하겠습니다.

 

nav 태그

일단 nav 태그는 영어로 navigation(내비게이션)의 의미를 가지고 있는 태그입니다.

여러분들도 다 알고 계시겠지만, 내비게이션은 길을 찾아주는 도우미 장비입니다.

웹문서에서 내비게이션은 같은 의미로 상통합니다.

사이트 내의 각 웹문서들을 찾기 쉽게 도와주는 태그로 해석할 수 있습니다.

음.. 제 나름대로 조금 더 쉽게 설명을 하자면, nav 태그는 해당 사이트의 메뉴 카테고리라고 정의할 수 있습니다.

 

그렇습니다.

어떤 사이트의 메뉴 카테고리를 nav 태그를 통해서 나타내는 것입니다.

그럼 예제를 통해서 조금더 살펴보겠습니다.

 

일단 HTML 소스 작성 문서입니다.

body 태그 안에서 사용되었음을 알 수 있습니다.

또, <ul>..</ul> 태그와 <li>...</li> 태그를 사용하여 목록으로 만들었음을 알 수 있습니다.

 

 

 

다음음 웹브라우저 IE10으로 웹문서를 실행시킨 화면입니다.

브라우저 내용 상단에 제목이 있는 것을 확일할 수 있고, 그 아래로 목록이 보입니다.

각 항목을 클릭하면 해당 웹페이지로 이동합니다.

 

 

일단 기본적으로 nav태그는 웹문서의 전체 구성 중에서 설정에 따라서 좌우측에 표시되는 것이 기본입니다.

네이버 블로그나 티스토리 블로그에서 카테고리가 보통 어디에 있는지 생각해 보시면 이해하기 쉬울 것입니다.

그리고, 웹문서 하단에서도 각 카테고리로 이동할 수 있게 되어 있는 사이트들이 있습니다.

웹문서 하단 내비게이션 태그는 nav태그가 아니고 footer 태그를 이용한다는 것을 알고 계시기 바랍니다.

 

어렵게 설명을 하였지만, 실제로 해보면 아무것도 아니니까, 한번씩 실습을 해 보시기 바랍니다.

이번 포스팅은 여기까지입니다.

지금까지 잡지식스토리의 촉끼남이였으며, 앞으로도 계속 유용한 웹문서 공부거리로 포스팅을 진행하겠습니다.

휘리릭~~!!

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

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

[웹문서]pre 태그, 입력한대로 표시하기  (0) 2013.10.28
[웹문서]footer 태그, 바닥글 나타내기  (0) 2013.10.24
[웹문서]section태그, 웹문서 안에서 영역을 구분하기  (0) 2013.10.15
[웹문서]script태그, 스크립트 파일 사용하기  (0) 2013.10.13
[HTML]meta http-equiv 태그, 웹문서 초기 정보 설정하기  (0) 2013.10.10
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. 29. 17:40

[HTML]base태그, 기준이 되는 URL 절대경로 지정하기

   

 

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

이번 '웹문서 공부' 주제는 <base>태그에 대한 것입니다.

 

<base>태그는 해당 웹페이지의 기준이 되는 URL을 절대경로 지정하는 태그입니다.

<base>태그는 <head>...</head>태그 안에서 지정하는데, 페이지 당 1개의 URL만 설정할 수 있습니다.

 

이 <base>태그를 이해하기 위해서는 절대경로와 상대경로가 먼저 무엇인지를 알고 있어야 합니다.

일단 절대경로와 상대경로의 개념부터 정리해 보겠습니다. '네이버 지식백과'에서 참조하였습니다.

 

절대경로....

인터넷 자원 주소와 경로를 완전하게 표시한 인터넷 주소.

예를 들어 " http://www.welcome365. tistory.com /category /진짜잡지식" 과 같이 서비스, 호스트, 파일 경로를 나타내는 완전한 URL주소를 말한다.(네이버 지식백과)

 

 

상대 경로...

파일 시스템에서 현재 작업 디렉터리로 부터 찾아갈 파일에 이르는 모든 디렉터리 목록으로 표시된 경로.

예를 들어 '진짜잡지식'카테고리에서 '웹문서 공부'카테고리 경로를 상대 경로로 나타내면, " ../웹문서 공부 " 라고 표현할 수 있다.(네이버 지식백과)

다시 말해, 기준이 되는 경로에서 대상이 되는 경로를 표시하는 방법입니다.

 

이해를 돕기 위해서 일단 HTML문서를 작성하고, 브라우저로 확인을 해 보겠습니다.

 

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>base태그 알아보기</title>
   <base href="http://welcome365.tistory.com" target="_blank">
 </head>
 <body>
    <p>잡지식스토리에는 <a href="/category/웹문서%20공부" target="_blank">웹문서 공부</a> 카테고리가 있습니다.</p>
 </body>
</html>

 

 

 

위에서 HTML 소스문서를 보면 알 수 있듯이, <base>태그를 사용해서 제 블로그의 절대경로URL을 지정하였고, 본문 내용에서 '웹문서 공부'카테고리 링크 주소는 상대경로URL로 지정해 준 것을 확인할 수 있습니다.

그리고 이 HTML 소스문서를 웹브라우저로 실행해 보면, 본문 내용에서 '웹문서 공부' 단어가 링크 설정되어 있는 것을 알 수 있고, 이 링크를 통해서 '웹문서 공부'카테고리 페이지가 열리는 것을 확인할 수 있습니다.

 

쉽게 정리해서 말하자면, <base>태그로 해당 웹페이지에서 기준이 되는 URL주소를 절대경로로 한번만 지정해 주면, 그 웹페이지에서 연결되는 다른 웹페이지 경로는 상대경로URL로 간단하게 지정해도 된다는 말입니다.

이것은 해당 웹페이지에서 연결되는 링크페이지를 하나씩하나씩 일일이 절대경로를 지정해야 하는 번거러움을 없앨 수 있다는 장점이 있습니다.

 

--- 요 약 ---

<head>태그 안에서 <base>태그를 사용하여 기준 절대경로URL을 설정해 주면, 해당 웹페이지와 연결되는 링크 주소는 상대경로로 간소화하여 설정할 수 있다.

 

보기에는 복잡해 보이지만, 직접 해보면 무슨 말인지 쉽게 이해할 수 있을거라 생각됩니다.

이렇게 하여 이번 <base>태그 정리는 마무리 짓도록 하겠습니다.

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

 

 

 

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

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

[HTML]meta name태그, 웹문서의 정보를 나타내기  (0) 2013.10.05
[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기  (0) 2013.09.30
[HTML]title태그, 웹페이지에 웹문서 제목 입력하기  (0) 2013.09.27
[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!!  (0) 2013.09.25
HTML의 기본구조, 요소(Element)/태그와 요소내용  (0) 2013.09.23
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
웹문서 공부2013. 9. 17. 09:30

[웹문서]웹문서 공부 시작합니다.

   

 

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

 

촉끼남이 네이버 블로그를 하면서는 잘 몰랐는데, 티스토리 블로그를 하면서 웹문서에 대해서 궁금증이 조금씩 커지고 있습니다.

네이버 블로그는 이미 짜여진 형식안에서 레이아웃을 짜고, 포스팅을 하면서 블로그 운영을 합니다.

하지만, 티스토리 블로그는 이미 짜여진 스킨이나 레이아웃이 있기는 하지만, 블로그 운영자의 취향에 따라 수정이 가능하기 때문입니다.

솔직히 이야기해서 지금 사용하고 있는 스킨은 기존에 티스토리에서 제공하고 있는 것입니다. 그런데 제 취향이 아니라서 색깔만 조금 바꿨습니다.

아무것도 아닌 것이었지만, 웹문서의 '웹'자도 모르는 촉끼남에게는 한달이라는 시간이 걸린 작업이었고, 그 결과물 또한 촉끼남은 상당히 만족스럽다고 자화자찬하고 있습니다.

이렇게 된 상황에서 촉끼남은 웹문서에 대해서 공부를 안할수가 없겠다는 생각을 하게 됩니다.

그래서 이 '웹문서 공부' 카테고리를 통해서 웹문서에 대한 공부를 하고 정리를 하려고 합니다.

 

일단, 검색을 해보니, 여러 가지 관련 키워드들을 찾을 수 있었습니다.

 

HTML5 / CSS / JAVA SCRIPT 등등

 

이 외에도 관련된 키워드가 많이 있었지만, 중요하다고 생각되는 키워드만 나열하였습니다.

그리고 검색 결과를 간단히 나열하자면 다음과 같습니다.

 

HTML5

- 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(Hypertext markup language)의 최신규격

- 엑티브X(AcitveX)를 설치하지 않아도 동일한 기능을 구현할 수 있고,

  특히 플래시나 실버라이트, 자바FX 없이도 웹브라우저에서 화려한 그래픽 효과를 낼 수 있다.

- HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어.

  WHATWG(Web Hypertext Application Technology Working Group)에서 웹 애플리케이션 1.0이라는 이름으로

  세부 명세 작업을 시작하였으며, 현재에도 개발중이다.

 

CSS

캐스케이딩 스타일시트(Cascading Style Sheet)의 약자로 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때 자유도가 높다.

외부에 별도의 CSS파일을 만들어서 다로 관리 할 수 있어서 보다 유지 및 보수를 하기에 유용하다.

 

JAVASCRIPT

기본적인 웹 프로그래밍 언어이다. 일반 프로그래밍 언어는 컴파일이 필요하지만, 스크립트 언어는 컴파일이 필요없고, 주로 웹페이지와 함께 쓰인다.

HTML 페이지에서 기능을 추가하는데 사용되며, 정적인 페이지가 동적인 페이지로 변하게 한다.

 

 

조금 알아보니, 답이 안 나온다는 생각을 먼저 하게 됩니다.

왜냐구요..?? 저는 원래 전공이 컴퓨터 계열이 아니기 때문입니다.

생소한 단어들도 많을 뿐더러, 분위기 상으로 웹문서를 작성하고 수정하려면 위의 세가지 언어를 알아야 된다는 해석이 나오기 때문입니다.

그렇습니다. 알아보니, 실제로도 HTML을 기반으로 시각적인 부분은 CSS가 보조 역할을 하고, 동작하는 부분은 JAVASCRIPT가 보조역할을 한다고 합니다.

흠.. 그렇다고 포기할 촉끼남은 아니지만, 일단 답은 안나옵니다. ㅎㅎ

 

답답한 마음을 속으로 삭히며, 이번 포스팅은 일단 이쯤에서 마무리 하는 것으로 하겠습니다.

내일은 서점에 가서 조금더 알아봐야 하겠습니다.

지금까지 잡지식 스토리의 촉끼남이였으며, 다음 포스팅은 일단 서점을 다녀와서 작전을 짜고 계속 하겠습니다.

 

 

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

[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
HTML의 기본구조, 요소(Element)/태그와 요소내용  (0) 2013.09.23
Posted by DaumTistory

티스토리툴바