반응형
<!DOCTYPE html>
<html>
<head><!--왼쪽(캐릭터 셋)에 우측(속성값)을 대입(적용)시켜준다.-->
<meta charset="utf-8">
<title>a태그/속성(attribute)</title>
</head>
<body>
<h1>절대경로</h1>
<p><mark>웹페이지 주소를 그대로 복사해서 가져온 것</mark><span style="color:blue">(절대 변하지 않는 경로)</span></p>
<h2>텍스트 링크 만들기</h2>
<a href="http://www.naver.com">네이버로 바로가기</a>
<h2>텍스트 링크가 새 탭으로 넘어가기</h2><!--속성은 여러가지를 넣을 수 있다. 띄어쓰기+속성명+=+"속성값"을 넣으면 된다.--><!--타이틀 값을 적으면 마우스를 갖다 대면 가이드 내용이 표시됨-->
<a href="http://www.unsplash.com" target="_blank" title="해당 페이지로 이동하는 링크입니다.">스플래쉬 바로가기</a><!--a태그는 b,em,i,strong 태그처럼 줄바꿈이 안된다.--><!--#는 임시경로-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <a href="#">dolore</a> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>상대경로</h1>
<p>현재 파일 위치부터 목적지까지의 경로</p><!--.은 현재위치를 의미, /는 폴더를 연다는 의미로 ./합치면 현재위치(study1 파일이 있는 위치)의 폴더를 연다-->
<a href="./study2.html">서브페이지1로 바로가기</a><br><!--네이버나 다음은 온라인 상에 주소가 있으나, Study2 html 파일은 내 컴퓨터에만 있는 거라서 상대경로로 입력해야한다.--><!--상대경로는 현재파일의 위치 기준으로 경로를 정하는 거라서 유연하다-->
<a href="./sub/sub1.html">서브페이지2로 바로가기</a><br><!--서브2와 서브3 html 파일은 서로 같은 레벨의 폴더에 있으므로 한단계 위로 올라갔다가 하위 폴더로 내려와야함(교재 97page 참고)-->
<p>폴더안에 하위 폴더를 생성하여 페이지 이동 링크 걸기</p>
<a href="./sub/sub2/sub2.html">서브페이지3으로 바로가기</a>
<a href="./sub/sub3/sub3.html">서브페이지4로 바로가기</a>
<!--
. -> 현재 파일의 위치를 불러옴
.. -> 상위 폴더의 위치를 불러옴
/ -> 폴더를 연다
-->
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>서브페이지1</title>
</head>
<body>
<h1>서브페이지1</h1>
<p>환영합니다 서브페이지1입니다.</p>
<a href="./study1.html">메인페이지로 바로가기</a>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] 탭제목_기초(2021-08-17) (0) | 2021.11.07 |
|---|---|
| [HTML] 기본프레임 만들기(2021-08-17) (0) | 2021.11.07 |
| [HTML] 이미지/영상/유튜브 링크 올리기(2021-08-24) (0) | 2021.11.07 |
| [html] 리스트 태그(2021-08-26) (0) | 2021.11.07 |
| [html] 리스트 활용(2021-08-26) (0) | 2021.11.07 |