웹문서 공부2013. 10. 5. 13:05
   

 

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

이번에는  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소스를 위와 같이 작성하여 해당 웹문서의 정보를 나타낼 수 있습니다.


 

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

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

 

 

 

Posted by DaumTistory
웹문서 공부2013. 9. 30. 21:45
   

 

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

이번에는 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속성에 대해서 제대로 정리를 하려면 내용이 끝이 없을 것 같다는 생각을 해서 일단 기본적인 내용만 정리하였습니다.

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

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

 

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

 

 

 

Posted by DaumTistory
웹문서 공부2013. 9. 29. 17:40
   

 

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

이번 '웹문서 공부' 주제는 <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>태그 정리는 마무리 짓도록 하겠습니다.

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

 

 

 

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가 보조역할을 한다고 합니다.

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

 

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

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

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

 

 

Posted by DaumTistory