5. anchor 태그 (링크 태그)
링크는 a태그를 사용하고, 시작태그와 종료태그로 구성된다. 링크태그는 링크를 구현할 콘텐츠를 a태그로 감싸서 표현. 주요속성은 href, target, title 등이 있다.
(1) 기본구조
1 | <a href="" target="" title="">콘텐츠</a> |
- a태그로 감싸진 텍스트는 밑줄, 글자색상이 바뀜
- 마우스 커서 모양이 바뀌며 클릭 가능함
(2) 속성
■ href(hyper reference) => 참고 대상을 작성
1) URL
2) 파일(한글, 엑셀, 이미지, PDF 등)
3) 이메일
4) 가상링크
■ target => 참조대상을 띄울 창의 위치를 설정
1) _self(자신의 창에서 띄움) => 자신의 사이트에서 이동하는 경우 => 기본값으로 생략가능
2) _blank(새창 띄우기) => 다른 사이트 이동시
■ title => 링크에 대한 설명(웹접근성과 관련있음)
(참고1)이메일 링크
아웃룩으로 동작하여 사용(웹디자인기능사 내용)
href="mailto:test@naver.com"
(참고2)가상 링크
=> 링크의 모양은 갖추나, 아무런 동작을 하지 않음
=> 스크립트 연결시 사용
(참고3) 주의할 점
문서의 이름 및 링크의 경로는 영어로 생성해야함을 권장
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <h2>기본예제1</h2> <p> <a href="https://www.daum.net" target="_self" title="현재창"> 다음 사이트 현재창열기 </a> </p> <p> <a href="https://www.daum.net" target="_blank" title="새창"> 다음 사이트 새창열기 </a> </p> <h2>기본예제2</h2> <p><a>링크</a></p> <!-- 속성이 없는 경우 동작하지 않음 --> <p><a href="">링크</a></p><!-- 링크 모양은 만들어졌으나 반응없음 --> <p><a href="http://www.naver.com">셀프</a></p><!-- 경로로 이동하나 자신의 창에서 이동 --> <p><a href="http://www.naver.com" target="_blank" title="새창으로 열기">링크</a></p><!-- 경로로 이동 다른탭에서 열기 --> <p><a href="test.html">테스트파일</a></p> <p><a href="img/test01.jpg">이미지</a></p> <p><a href="mailto:test@naver.com">메일작성</a></p> <p><a href="#">맨 상단으로 가기</a></p><!-- #가상링크로 이동 --> <p><a href="#id">아이디 값으로 이동하기</a></p> |
6. 목록 태그
홈페이지에서 가장 많이 사용하는 태그.
목록태그는 순서형, 비순서형, 정의형 목록 세가지를 사용한다.
(1) 기본구조
1 2 3 | <ol> <li>콘텐츠</li> </ol> |
- 콘텐츠는 무조건 li에만 작성한다.
1) 순서형 목록
- 순서형 목록은 ol로 정의하고 li로 표현한다
ol => ordered list
li => list
1 2 3 4 5 6 | <h3>순서형 목록 예제</h3> <ol> <!-- 정의 --> <li>서울</li><!-- 표현 --> <li>대전</li> <li>대구</li> </ol> |
2) 비순서형 목록
비순서형 목록은 ul로 정의하고 li로 표현한다
ul => unordered list
li => list
1 2 3 4 5 6 | <h3>비순서형 목록 예제</h3> <ul> <!-- 정의 --> <li>짜장면</li><!-- 표현 --> <li>볶음밥</li> <li>짬뽕</li> </ul> |
3) 정의형 목록
정의형 목록은 dl로 정의하고 dt,dd로 표현한다
dl => definition list
dt => define of term
dd => describes of define
- 용어를 정의하고 용어에 대한 설명을 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h3>정의형 목록 예제</h3> <dl> <!-- 정의 --> <dt>한식</dt><!-- 표현 --> <dd>비빔밥</dd> <dd>삼겹살</dd> <dd>불고기</dd> <dt>일식</dt> <dd>초밥</dd> <dd>장어덮밥</dd> <dd>사시미</dd> <dt>양식</dt> <dd>스테이크</dd> <dd>파스타</dd> <dd>리조또</dd> </dl> |
(2) 멀티레벨 목록 만들기
목록 안에 목록을 만드는 구조.
주로 서브메뉴 구조를 만들때 많이 사용.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <h2>기본 예제</h2> <ul> <li>1레벨 <ul> <li>2레벨</li> <li>2레벨</li> <li>2레벨 <ul> <li>3레벨</li> <li>3레벨</li> </ul> </li> </ul> </li> <li>1레벨</li> <li>1레벨</li> <li>1레벨 <ul> <li>2레벨</li> <li>2레벨</li> </ul> </li> </ul> <h2>응용 예제</h2> <h3>내가 좋아 하는 사이트</h3> <ul> <li>포털 사이트 <ul> <li><a href="http://www.naver.com" target="_blank" title="네이버 새창에서 열기">네이버</a> <ul> <li>웹툰</li> <li>지식인</li> <li>블로그</li> </ul><!-- 네이버 카테고리 종류--> </li> <li><a href="http://www.daum.net" target="_self" title="다음 현재창에서 열기">다음</a></li> <li><a href="http://www.nate.com" target="_blank" title="네이트 새창에서 열기">네이트</a></li> </ul><!-- 포털 사이트 종류--> </li> <li>게임 사이트 <ul> <li><a href="#">넥슨</a></li> <li><a href="#">넷마블</a></li> <li><a href="#">피망</a></li> </ul><!-- 게임 사이트 종류--> </li> <li>언론 사이트 <ul> <li><a href="#">조선일보</a></li> <li><a href="#">중앙일보</a></li> <li><a href="#">동아일보</a></li> </ul><!-- 언론 사이트 종류--> </li> </ul><!-- 사이트 카테고리 --> | cs |
(주의사항)
멀티레벨을 만들때
하위레벨은 무조건 상위레벨의 li요소 안에만 작성
1레벨 작성완료 => 2레벨 작성완료 => 3레벨 작성
================================
a, ul, li 꼭 기억해야겠습니다.
홈페이지에서 단일레벨로는 거의 쓰지 않고, 멀티레벨로 여러개의 뎁스(depth)를 주면 활용할 곳이 정말 많은 것 같아요. 대부분 여러개의 데이터를 나열하는 경우가 많으니까요.
스타일은 나중에 CSS로 입힐 꺼니깐 너무 걱정 안하셔도 되구요.
그리고, 주의사항에 적은 것처럼 태그를 작성할 때, 꼭 시작태그, 종료태그 작성하고 콘텐츠를 태그 사이에 작성 하듯이 멀티레벨 목록 만들 때 꼭! 꼭! 1레벨, 2레벨, 3레벨 순서로 작성해야 해요.
안그러면 1레벨 끝지점하고, 이것저것 꼬이면서 알아보기가 어려워 지거든요ㅠㅠ
마지막으로 중요한 한가지 더!
탭을 꼭 사용하세요~!
예시에 작성한 것처럼 시작태그와 종료태그의 앞라인을 맞춰주고 그 안에 작성한 태그들도 탭으로 밀어, 안에 있는 태그도 앞라인을 맞춰주세요. 유지보수를 편리하게 하기 위함이랍니다.