하이퍼링크
<a> 태그
a태그는 anchor(닻)의 약자에서 나왔으며 마치 닻으로 지점을 찍는 것처럼 활용 할 수 있다.
링크를 통하여 다른 웹페이지로 이동하거나, 문서 내에서도 이동 할 수 있다.
태그의 속성인 href (hypertext reference) 에 주소나 경로를 넣어서 링크를 만들 수 있다.
참고
최근에는 single page application (SPA)라는 기술을 활용하여 웹 앱어플리케이션이나 웹사이트를 제작하는 비중이 높아졌다. 이 기술의 장점은 사이트를 새로고침 없이 빠르게 페이지를 전환 할 수 있는 장점이 있다.
<a>태그 속성
href 속성
href 속성은 개발자가 원하는 주소나 경로를 참조(reference)할 수 있도록 한다.
hypertext reference의 약자를 사용하였다.
href 속성의 사용방법
css를 외부 스타일시트를 가져올 때 link태그를 활용할때도 href를 사용하지만 추후 css를 공부할 때 다루겠다.
<a href = "https://velog.io/@km2535/HTML-Day-1">
//경로를 활용하여 개발자가 만든 html을 연결할 수 있다.
<a href = "../../index.html">title 속성
마우스보다 터치에 익숙한 우리에게는 거의 불필요한 속성이지만 pc에서 확인 할 수 있다.
하이퍼텍스트 레퍼렌스를 만들고 그 위에 커서를 올리면 메모처럼 개발자가 작성한 글을 확인 할 수 있는데 보통 이 레퍼렌스의 제목을 넣어 사용자가 어떤 링크인지 확인 할 수 있게 만들 수 있다.
title 속성의 사용
<a href = "https://velog.io/@km2535/HTML-Day-1" title = "나의 블로그">만들면서 고민해 봐야 할 것이 링크자체에 설명을 적으면 필요성이 저하된다.
//더욱 직관적인 형태
<a href = "https://velog.io/@km2535/HTML-Day-1">나의 블로그</a>target 속성
이 속성을 활용하면 연결된 참조사이트가 새창에서 열지 현재창에서 열지 선택 할 수 있다.
TCP 스쿨에서 확인하기
_blank는 계속 새창으로 열 수 있음.
blank는 새탭을 한번만 열 수 있음.
target 속성의 사용
<a href="https://velog.io/@km2535/HTML-Day-1" target="_blank">table
<table> 태그 사용법
여러 종류의 데이터를 보기 좋게 정리해서 보여주는 표
행과 열로 이루어져 있다.
(행과 열이 헷갈릴때.. 야! 1열로 좀 서라! >> 가로임... ㅎㅎ)
<table>
<tr> <!-- 테이블의 각 층 -->
<td>내용1</td>(또는 th)
<td>내용2</td>
...
</tr>
...
</table><table>태그 속성
table 속성
border : 테이블의 테두리 두께를 설정(기본 0)
width : 테이블의 가로 폭을 설정
align : 테이블의 정렬을 설정(left, right, center)
tr,th,td 속성
width : 셀의 가로 폭을 설정(td : 같은 열 전부 적용)
height : 셀의 높이를 설정(td : 같은 행 전부 적용)
align : 셀의 텍스트 정렬을 설정(left, right, center)
colspan 속성
가로로 열을 합침
<td colspan="합칠 열의 개수">
rowspan 속성
세로로 행을 합침
<td rowspan="합칠 행의 개수">
caption
표에 제목을 붙일 때 사용
기본 위치는 표의 상단부 중앙
<caption>제목</caption><hr> : 화면에 가로줄 만들기.
페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="styleSheet" href="./blog.css">
<title>반푼이의 블로그</title>
</head>
<body>
<h1 class="Htitle">반푼이의 블로그</h1>
<div class="Hdiv">
<p class="Hp">
<a href="https://velog.io/@km2535/series/HTML" target="_blank"><img class="htmlImg" src="./image/HTML.png"></a>
<a href="./resume.html" target="_blank"><img class="cssImg" src="./image/CSS.png" ></a>
<a href="https://velog.io/@km2535/series/%ED%98%BC%EA%B3%B5%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8" target="_blank"><img class="javascriptImg" src="./image/JavaScript.png" ></a>
</p>
<p class="Bp">
<a href="./subpage/subpage.html" target="_blank"><img class="thinkImg" src="./image/think.png" ></a>
</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>준비 중</title>
</head>
<body>
<h1>준비 중입니다.</h1>
</body>
</html>l<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="styleSheet" href="../sub.css">
<title>나의 이력</title>
</head>
<body>
<h1 style="text-align: center;">내가 걸어온 길</h1>
<table border="1" width="80%" height ="200" align="center">
<caption style="font-size: 2em;" ><b>이력표</b></caption>
<tr>
<th width="20%">연도</th>
<th width="30%">학력</th>
<th width="30%">경력</th>
<th>비고</th>
</tr>
<tr align="center">
<td>2015년</td>
<td rowspan="3" width="20%">육군3사관학교</td>
<td>소위 임관</td>
<td>-</td>
</tr>
<tr align="center">
<td>2017년</td>
<td>백령도 근무, 대위 진급</td>
<td>-</td>
</tr>
<tr align="center">
<td>2021년</td>
<td><mark>프로그래밍 언어 입문</mark></td>
<td>-</td>
</tr>
</table>
</body>
</html>