웹페이지에 div 영역 생성 후 버튼을 누르면 원하는 위치로 이동시키기
제목이 다소 복잡한 것 같습니다만, 다시한번 풀어서 설명하면 이렇습니다. 하나의 메뉴를 두고, 링크된 글씨나 이미지를 누르면 아래쪽에 해당 페이지를 불러오거나, 그쪽으로 바로 이동하는 방법입니다. 보통 스크롤 내용이 많은 쇼핑몰의 경우, 오른쪽에 보시면 TOP 메뉴라던지, 제품 상세보기 버튼이 있을 수 있습니다. 바로 이런 경우가 하나의 웹페이지 상에서 구간별로 영역을 나누어 해당 구간으로 이동하는 기능이라고 보시면 됩니다.
우선 HTML 기본 태그와 요소들을 작성해 둡니다. 그리고 본문 안족에 a태그를 이용해서 구성했습니다. 저기 보시면 </a> 와 <a> 사이에 " | " 이렇게 생긴 특수문자가 보이시나요? 저건 키보드에 보시면 백스페이스 바로 왼쪽에 있는 특수문자 입니다. Shift를 누른 상태에서 누르시면 출력됩니다. 각 메뉴별로 링크는 각각 # 기호를 넣어서 만들었는데, 이것은 일종의 약속입니다. 잠시뒤에 들어갈 div 태그를 보시고 더 자세한 이야기를 나누겠습니다. 그리고 a태그를 닫고 바로 아래에 <hr> 태그로 밑줄을 넣었습니다. 그러면 미리보기로 결과물을 살펴보겠습니다.
네. 이렇게 출력이 됩니다. 여기에서 메뉴01을 누르면, 아까 위에서 id를 지정해준 #menu01 번으로 이동되는 것입니다. 나머지 메뉴들도 같은 원리 입니다.
밑줄 아래에 영역을 만들기 위해서 <hr> 태그 다음에 <div> 태그로 영역을 세 개 만들었습니다. 그리고 각 div 태그 안쪽에 id값을 부여했습니다. 이 id값이 일종의 이름이라고 생각하시면 됩니다. 첫번째 div의 이름이 menu01 인 샘 입니다.
그리고 <head> 안쪽에 새로운 스타일을 만들어주었습니다. 바로 #menu01 아이디에 해당되는 부분으로, 총 세개를 만들었습니다. 가로는 해당없고 세로만 500px 영역을 주었고, 이 영역안에 백그라운드 컬러를 넣어둔 요소들 입니다. 이렇게 하시고, 이제 결과를 한번 보세요. 메뉴를 누를 때마다 해당 영역의 지점으로 위치가 이동되는것을 알 수 있습니다. 끝.
"친절한효자손 취미생활" 을 검색!
