티스토리 뷰
HTML의 약자는 HyperTextMarkupLanguage다.
여기서등장하는 HyperText는 컴퓨터용어로, 텍스트등의 정보가 동일선상에 있는것이 아닌 다중으로 연결되어있는 상태를 의미한다.
이것은 HTML의 주요기능인 Link와 연결되는데, 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있게끔 해준다.
한텍스트 -> 다른텍스트 건너뛰어서 읽을수 있게해주는 기능을 하이퍼링크 (Hyper link)라고 한다.
HTML link는 hyperlink를 의미하고 a 태그가 그 역할을 한다.
href
1. href 어트리뷰트
href 어트리뷰터는 이동하고자 하는 파일의 위치 = 경로 를 받는다.
1.1 디렉터리
파일시스템 내의 존재물로서 폴더라고도 불리운다.
작업 디렉터리
작업 중인 파일의 위치한 디렉터리이다.
./
부모 디렉터리
작업 디렉터리의 부모 디렉토리이다.
../
1.2 파일경로
- 절대경로
현재 작업 디렉토리와 관계없이 절대적인 경로
- 상대경로
현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치
href에서 사용가능한 값은 아래와 같다.
| value | Description |
| 절대 URL | 웹사이트 URL (href=”http://www.example.com/default.html”) |
| 상대 URL | 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) |
| fragment identifier | 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”) |
| 메일 | mailto: |
| script | href=”javascript:alert(‘Hello’);” |
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>
</body>
</html>target
2. target 어트리뷰트
링크를 클릭했을때, 링크가 어떻게 오픈 할 지를 지정한다.
| value | description |
| _self | 현재윈도우에서 열림 |
| _blank | 새로운윈도우에서 열림(구글크롬시 탭이 생성된다) |
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
</body>
</html>
목록
ul 태그
순서 없는 목록 (Unordered List)
<!DOCTYPE html>
<html>
<body>
<h2>순서없는 목록 (Unordered List)</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
ol 태그
순서 있는 목록 (Ordered List)
<!DOCTYPE html>
<html>
<body>
<h2>순서있는 목록 (Ordered List)</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
- type 어트리뷰트 -> 순서를 나타내는 문자 지정할수있다.
<ol type="I">
<li value="2">Coffee</li>
<li value="4">Tea</li>
<li>Milk</li>
</ol>
- start 어트리뷰트 -> 리스트 시작값을 지정할수있다.
<ol start="3">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- reversed 어트리뷰트
말그대로 역순으로 정렬해준다.
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>테이블
과거에는 table태그를 많이 사용했다고하는데 모던웹은 div를 많이 사용한다고한다.
| tag | description |
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row) |
| th | 행 내부의 제목 셀 (table heading) |
| td | 행 내부의 일반 셀 (table data) |
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Score</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML] Image & Multimedia 태그, Forms태그 (0) | 2022.04.26 |
|---|---|
| [HTML] 웹페이지를 구성하는 기본 요소, 텍스트 태그 (0) | 2022.04.16 |
| [HTML] HTML5 기본문법 , 시멘틱 요소와 검색엔진 (0) | 2022.04.14 |