쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [03] - div/hr 태그와 주석달기

인터넷 쇼핑몰 창업과 제작을 위한 HTML 태그 사전 (웹2.0 웹표준 기반) HTML (XHTML) 사전 - 웹표준과 검색엔진 최적화(SEO)를 위한 마크업 HTML 쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [03] - div / hr 태그와 주석달기 HTML 태그 강의 [03] - HTML 태그 파일에서 마음껏 메모를 남기고, 영역을 자르고, 구분선을 넣어봅시다. 이 세 가지 기능은 쇼핑몰/홈페이지/웹페이지 제작 과정에서 헷갈리지 않게 만들어주고, 특히 div 의 경우 향후에 디자인 작업을 할 때 중추적인 역할을 하게 됩니다. HTML 태그 강좌 세 번째 시간입니다. 이번에는 div / hr 태그와 주석달기에 대해서 살펴보겠습니다. 자, 우선 오늘 배울 내용을 담은 HTML 파일을 다운로드 받으세요. HTML 태그 파일 다운로드 받기 오늘 배울 내용은 html_03.html 파일 ~ html_05.html 에 들어있습니다. HTML 태그 파일 안에 메모를 남겨놓는다 - 주석달기 우선 주석 (메모) 달기부터 알아볼까요? HTML 태그 파일은 나중에 분량이 많아지면, 특정 부분을 찾기 위해서는 눈에 힘을 주고 찾아야 됩니다. 그런데, 알아보기 쉽게 메모를 남길 수가 있습니다. 이런 메모들은 웹페이지 상에서 방문자 눈에는 안보이고 HTML 태그 파일을 작업하는 사람만 참고하는 내용이죠. 주석은 이런 식으로 남긴답니다. 주석을 사용한 예는 html_03.html 파일을 아크로에디트로 열어서 소스를 확인해보시고요, 실제로 사람 눈에는 어떻게 보이는지 확인해보세요. HTML 태그 파일에서는 body 영역에 이렇게 많은 내용들이 들어간 것으로 보이죠. 하지만 실제 웹페이지에서는 주석은 모두 숨고 이렇게 보입니다. HTML 태그 파일 안에서 영역을 나눈다 - div 태그 그럼 이젠 일단은 사이트를 만든다는 가정 하에 여러 영역을 나눠봐야 되겠죠? div 로 나눠주면 됩니다. div 는 시작하는 태그와 닫는 태그를 함께 사용합니다. 주석과 다른 점은 주석은 쇼핑몰/홈페이지 운영자가 참고만 하는 것이고, div 는 실제로 디자인을 위해서 실질적으로 구역을 잘라주는 역할을 하죠. 나중에 CSS 강좌에서 배우겠습니다만, div 하나하나마다 원하는 위치에 이동시킬 수도 있고, 특정 디자인을 적용할 수 있습니다. 즉, div 는 쇼핑몰/홈페이지 운영자가 관리하기 위한 영역 하나하나의 단위라고 생각하셔도 무방합니다. html_04.html 파일을 열어보세요. 간단하죠? (주석은 일단 다 뺐어요.) HTML 태그 파일의 영역을 선으로 구분해준다. - hr 태그 이번에는 div 와 div 사이에 선을 넣어서 누가 보더라도 분리된 영역이라는 것을 표시해보도록 하죠. 간단합니다. 선을 넣고 싶은 곳에 이렇게만 넣어주세요. html_05.html 파일을 열어보세요. 시각적으로도 영역 구분이 되시죠? 이렇게 해서 HTML 태그 파일 안에서만 보이는 주석 달기 / 영역별로 묶어주는 (혹은 나눠주는) div 태그 / 구분선을 넣어주는 hr 태그를 배워봤습니다. 쉽죠? 벌써 7 분의 2 를 배웠습니다. 다음 시간에는 제목을 달아주는 h1 ~ h6 태그 / 문단 내용을 담는 p 태그 / 엔터와 같은 br 태그를 배워보겠습니다. 이제부터는 웹페이지의 실제 내용을 담는 과정입니다.