잡지식스토리

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

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

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

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

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

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

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

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

일단 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의 기본구조 정리는 여기까지 입니다. 다시 한번 말하지만, 개념이 중요합니다..!!^^;;

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