쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [08] - a / img 태그

인터넷 쇼핑몰 창업과 제작을 위한 HTML 태그 사전 (웹2.0 웹표준 기반) HTML (XHTML) 사전 - 웹표준과 검색엔진 최적화(SEO)를 위한 마크업 HTML 쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [08] - a / img 태그 HTML 태그 강의 [08] - HTML 태그 파일 안에 링크와 이미지를 표현해보자. a 태그의 경우 target 설정으로 창 설정을, id 설정으로 책갈피 기능을 활용할 수 있다. img 태그의 경우 a 태그와 함께 사용할 때 border=0 을 추가하여 테두리를 없애주자. HTML 태그 강좌 여덟 번째 시간입니다. 이번에는 a/img 태그에 대해서 살펴보겠습니다. a 태그는 웹페이지간 이동을 도와주는 링크를 만들고, img 태그는 이미지 파일을 불러옵니다. 자, 우선 오늘 배울 내용을 담은 HTML 태그 파일을 다운로드 받으세요. HTML 태그 파일 다운로드 받기 오늘 배울 내용은 html_12.html 에 들어있습니다. HTML 태그 파일 안에 다른 HTML 태그 파일로 이동 링크를 만들어보자. - a 태그 일단 가장 기본적인 HTML 소스를 보겠습니다. 실제 적용 결과는 다음과 같습니다. 이샵가이드 클릭을 하면 지금 보고 있는 이 페이지를 벗어나 새로운 페이지로 이동합니다. 클릭 후 인터넷 창 상단의 "뒤로" 버튼을 클릭하거나 키보드의 백스페이스키를 누르면 다시 이 페이지로 돌아옵니다. 이동할 페이지의 주소는 href="" 의 따옴표 안에 적고, 반드시 http:// 를 붙여줘야만 됩니다. a 태그 - target 의 설정으로 이동할 창 설정을 조절하자. 이제 추가적으로 target 이라는 속성을 적용해보겠습니다. 새로 이동할 웹페이지를 sample 이라는 창에서 열라고 지정을 해주었습니다. 일단 첫 번째 링크를 클릭하세요. 이샵가이드 쇼핑몰 운영자 공부방 E-마케터즈 클럽 그러면 인터넷 창 중에서 sample 이라는 이름을 가진 창이 현재 없기 때문에 새로운 인터넷 창을 열고 sample 이라는 이름을 붙여둡니다. 물론 컴퓨터만 기억하고 있죠. 사람의 눈에는 sample 이라는 이름이 보이지 않습니다. 이젠 새로 열린 창을 닫지 말고, 두 번째 링크와 세 번째 링크를 클릭해보세요. 아까 열렸던 sample 이라는 인터넷 창에서 페이지가 변합니다. 상황에 따라서는 모든 링크가 모두 새로운 창에서 열리게 만들고 싶기도 합니다. 이 때에는 target 설정을 _blank 로 줍니다. 앞에 있는 아래 밑줄이 꼭 있어야만 됩니다. 이번에는 링크를 클릭할 때마다 새로운 인터넷 창이 열립니다. 확인해보세요. 이샵가이드 쇼핑몰 운영자 공부방 E-마케터즈 클럽 a 태그 - id 속성으로 특정한 HTML 태그 파일의 특정한 위치로 링크를 걸어보자. 이번에는 일명 "책갈피 기능" 이라고 부르는 id 속성에 대해 알아보죠. 일단 이샵가이드의 메인의 전체목록보기 창의 HTML 태그 소스를 보면, (인터넷 창 상단의 보기 메뉴에서 소스를 클릭) 와 같은 곳이 있습니다. 여기서 우리가 주목할 부분은 id=14 입니다. 이 부분은 다른 웹페이지에서 이곳으로 링크를 걸 때에 이곳이 바로 뜨게끔 하기 위해 미리 14 번이라는 책갈피를 끼워둔 것입니다. 한 번 이렇게 링크를 걸어볼까요? 이샵가이드 어떤가요? 페이지가 뜨기는 뜨되, 14 번 책갈피를 끼워둔 곳으로 이동하죠? 이렇게 HTML 태그 파일 위에 "#책갈피이름" 을 붙이면 된답니다. 이샵가이드 책갈피는 다른 웹페이지로 링크를 걸 때 뿐만 아니라 같은 웹페이지 안에서 특정 위치로 이동시킬 때도 자주 사용합니다. 쇼핑몰 / 홈페이지를 돌아다니다 보면 FAQ 페이지 같은 곳에서 무엇인가를 클릭하면 그 페이지의 특정 부분으로 휙 이동하는 경우가 있죠? 모두 이 책갈피 기능을 활용한 것입니다. HTML 태그 파일에 이미지를 불러온다. - img 태그 이번에는 이미지를 불러와 볼까요? 이미지를 불러오는 것 역시 링크를 거는 것과 마찬가지로 매우 쉽습니다. 일단은 제작되어 있는 이미지를 한 번 불러와보죠. a 태그는 대상을 href="" 에 넣었는데, img 태그는 src="" 안에 넣습니다.적용결과는 다음과 같습니다. 이미지를 불러오는 것은 이게 끝입니다. 단지, a 태그와 함께 사용할 경우 의도하지도 않은 테두리가 생기곤 합니다. 미관상 아주 안좋아보여서 없애주는 것이 좋습니다. 그럴 경우에는 border="0" 을 추가로 집어넣으면 됩니다. 이렇게 해서 a / img 태그까지 알아보았습니다. 쉽죠? 벌써 모든 HTML 태그를 배웠습니다. 가끔 생소한 HTML 태그를 접할 경우도 있습니다만, 여기까지 모두 읽으셨다면 어떤 HTML 태그를 새롭게 만나든 아주 쉽게 이해하고 마음껏 활용하실 수 있습니다. 그리고, 사실 이 정도의 HTML 태그 지식이면, 웬만한 사이트를 만드는데 필요한 HTML 태그를 모두 알고 계신다고 보시면 됩니다. 이제는 바로 이어서 본격적인 디자인을 위한 CSS 강의로 들어가기에 앞서 추가적인 준비 작업을 해보겠습니다.