웹문서 공부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. 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. 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. 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

티스토리툴바