오랜만에 찾아온 쿠쿠리의 HTML 기초강좌!
기본 강좌에서는 링크태그에 대해서 집중적으로 살펴볼텐데요.
링크태그는 <a href=""> 이거만 알면 끝난다고 봐도 무방합니다.
링크태그의 전부이자 뼈대라고 할 수 있는 소스죠. 좀더 자세히 살펴보겠습니다.
<a href="http://kukury0329.tistory.com">쿠쿠리블로그</a>
링크를 만든다고 가정했을 때 표시될 글자는 '쿠쿠리블로그'가 되는 것이구요.
쿠쿠리블로그라는 글자를 클릭했을 때 연결할 페이지가 주소가 되는 것입니다.
어떠한 방식이든 저러한 포맷 안에서 변경하여 사용이 가능합니다.
잘 모르시겠다구요? 좀 더 심도있게 살펴보도록 하겠습니다.
|
새창에서링크열기 태그
두개의 링크를 만들었는데요. 두 링크의 차이점은 뭘까요?
잘 보시면 앞부분 까지는 똑같은데 아래에 있는 태그에는 target="_blank" 이런게 붙어있죠?
이 태그가 바로 새창에서링크열기 태그입니다.
연결하고자 하는 링크 바로 뒤에 붙여주시면 새 창에서 열릴 수 있도록 변경됩니다.
위에 있는 링크태그는 그 창에서 바로 링크된 주소로 이동되구요.
링크태그는 직접 링크를 만들어서 보여드리는게 가장 좋겠죠?
위의 어플BOX 블로그 가기라는 글자를 눌러보시면 새창에서 블로그가 뜨실껍니다.
위에 예시태그로 올려놓은 소스중에 아래에 있는 새창에서링크열기 소스를 적용시킨 것입니다.
|
이번에는 페이지 내부에서 링크를 걸어 이동하는 방법에 대해서 알아보도록 하겠습니다.
페이지에 올려놓은 문서의 양이 많아서 스크롤이 길~다고 가정 할 경우
링크를 활용하여 이동하고 싶은 단락으로 바로 이동 할 수 있도록 도와줍니다.
일단 아래의 예시보기를 누르시면 제가 직접 페이지 내부 링크걸기를 이용해서 만들어 놓은 예시페이지가 뜹니다
링크태그에서 쓰이는 3가지의 중요태그는
id ="목차1", a href="#목차1"이렇게 두가지 입니다. 아주 간단하죠?
id="목차1" 이 태그는 링크를 걸 때 이동시킬 단락을 설정하는 태그입니다. 위의 소스표를 보세요. 제일 윗줄에 <h1 id="top">쿠쿠리의 HTML강좌 보이시죠? 여기서 h1은 제목태그 입니다. 앞선 포스팅에서 제목태그에 대해서 배웠던거 기억하시죠? 링크태그와는 무관하니 id="top" 이 부분만 풀어서 설명을 해보자면 쿠쿠리의 HTML 강좌라는 텍스트를 top이라는 기준점으로 사용하겠다라는 뜻입니다. 보통 top는 본문의 최고상단을, bottom은 최하단을 지칭하는 단어입니다. top대신에 다른 문구를 넣어 기준점으로 사용 할 수 있습니다. 같은 방법으로 목차의 큰 제목들마다 id 태그를 이용해서 기준점을 잡아줬습니다. 목차에서 링크를 클릭하면 해당 기준점으로 바로 이동할 수 있도록 기준을 잡아주신 겁니다. a href="#목차1" 이 태그는 클릭했을 때 목차1이라는 기준점으로 이동하겠다라는 뜻입니다. 위의 예시에서 사용된 것을 보면 상단에 <a href="#blank_tag">공백태그란 무엇인가? 보이시죠? 풀어서 설명해보면 공백태그란 무엇인가?라는 텍스트를 클릭하면 blank_tag라는 기준점으로 이동하겠다는 뜻입니다. id 태그로 기준점을 지정해놓은 어디든지 이 태그를 이용해서 바로 이동 할 수 있습니다. |
뭔가 복잡해보이기는 해도! 쓰이는 태그는 딱 두가지 밖에 없는 페이지 내부에서 링크걸기 였습니다.
링크 태그는 위에서도 말씀드렸지만 a href 이것만 알면 사실 다 알았다고 봐도 무방합니다.
나중에 자바를 이용해서 새창으로 링크를 열었을 때 그 창의 크기까지도 지정이 가능하겠지만!
지금은 기초단계니까 여기까지만 살펴보도록 하구요.
다음 강좌에서는 홈페이지를 구성하는 디렉토리의 구성에 대해서 살펴보도록 하겠습니다.
홈페이지는 어떤 폴더와 어떤 구조로 이루어져 있는지에 대해서 간략하게 살펴보도록 할테니 ~
다음 공략으로 다같이 고고싱!을 해야하는데 제가 언제 포스팅을 또 할지 모르겠어요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
최대한 빠른 시일안에 포스팅 하도록 하겠습니다.
'간판없는 컴퓨터 교습소 > HTML&CSS' 카테고리의 다른 글
| HTML 기초강좌, 이미지 삽입태그 및 이미지크기 조절태그 (0) | 2014.03.29 |
|---|---|
| 이미지 삽입태그 용 소스 (0) | 2014.03.29 |
| 페이지 내에서 링크걸어 이동하기 예시 페이지 (0) | 2014.03.27 |
| HTML 기초강좌 4강, 태그로 목록을 만들어보자 [목록태그 사용법] (0) | 2014.03.12 |
| HTML 기초강좌, 기초용어정리 3탄 [강조태그,공백태그,ins태그,인용태그] (0) | 2014.03.11 |
