vscode를 이용한 웹구축(html)
<html태그>ul,ol ,A태그 href , table 태그
LRWoo
2023. 7. 6. 21:50
728x90
반응형
<li></li>
unordered list
순번을 매기지 않는 목록 나열
05-list.html파일 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>05-list.html</h1>
<hr>
<h3> unordered list : 순번을 매기지 않는 목록 나열</h3>
<ul type="disc"> <!--circle, square-->
<li>network</li>
<li>windows</li>
<li>linux</li>
<li>python</li>
<li>c</li>
<li>
java
<ul>
<li>data type</li>
<li>variable</li>
<li>operator</li>
<li>control statements</li>
</ul>
</li>
</ul>
</body>
</html>
<ol></ol>
ordered list
순번을 자동으로 매겨주는 리스트
<h3>ordered list : 순번을 자동으로 매겨주는 리스트 </h3>
<ol type="1"> <!--a, A,i,I,1-->
<li>객체지향 프로그래밍</li>
<li>데이터베이스 시스템</li>
<li>화면 설계 / 구현</li>
<li>서버 프로그램 구현</li>
<li>
프레임워크 개발
<ol type="a">
<li>스프링 프레임워크 개요</li>
<li>IoC (Inversion Of Control)</li>
<li>DI (Dependency Injection)</li>
<li>AOP (Aspect Oriented Programming)</li>
</ol>
</li>
<li>배포 및 테스트</li>
</ol>ordered list 태그의 type은 순번을 원하는 기호로 바꿀 수 있다.
list안에 list를 넣을 수 있다.
f12를 눌러서 소스코드를 보면
ul이나 ol 태그는 순번을 매기기 위해 왼쪽여백(padding)이 자동으로 만들어져있다.
대부분의 html요소는 화면에서 자리를 차지하는 여백이 주어져있다.
a 태그
anchor
대상을 지정하여 대상위치로 이동하기 위한 링크
fieldset 글상자. 기본으로 테두리가 그어진다
legend : 글상자의 소제목, 범례
details 상세내용을 출력하기 위한 박스. 접혀있다.
summary : details의 제목, 클릭하면 펼쳐지거나 접힌다.
a 태그에는 href 링크가 참조하는 http 상의 참조대상이 있고,
클릭하면 브라우저의 주소창에 입력된다.
<p>
<a href="https://www.google.com">구글</a>
</p>
a태그는 많은 기능들이 있다.
href로 여러가지 기능을 쓸 수 있다.
<h4>주소에 다른 정보를포함해도 그대로 이동한다</h4>
<p>
<a href="https://www.google.com/search?q=%ED%8C%80+%EB%B2%84%EB%84%88%EC%8A%A4%EB%A6%AC&oq=%ED%8C%80+%EB%B2%84%EB%84%88%EC%8A%A4%EB%A6%AC&aqs=chrome.0.0i355i512j46i512j0i512l2j0i30j0i15i30j0i30j0i15i30j0i5i15i30l2.2887j0j4&sourceid=chrome&ie=UTF-8">팀 버너스리 경</a>
</p>
<h4>target 속성을 이용하여 대상을 새 창(새탭)에서 열 수 있다.</h4>
<p>
<a href="image/iu.jpg" target="_blank">아이유 (새 탭에서 열기)</a>
</p>
<h4>유튜브 링크를 새 탭에서 열기</h4>
<p>
<a href="https://youtu.be/sN6B2ebHScE" target="_blank">유튜브 영상</a>
</p>
<h4>그림을 클릭하면 작동하는 링크</h4>
<p>
<a href="https://www.google.com/search?q=%EB%8B%A8%EB%B9%84&tbm=isch&sa=X&ved=2ahUKEwiz88m6-_n_AhUtmlYBHcdhCGQQ0pQJegQIDxAB&biw=767&bih=704&dpr=1.25">
<img src="image/danbi.jpg" height="100">
</a>
</p>
<h4>버튼을 클릭하면 작동하는 링크</h4>
<p>
<a href="https://mgr.kgitbank.com"
target="_blank"><button>수강신청</button>
</a>
</p>
<h4>링크 없는 버튼은 클릭해도 아무런 변화가 없다.</h4>
<button>그냥 버튼</button>
list 태그와 결합해서 사용할 수도 있다.
<ul>
<li><a href="https:www.naver.com">네이버</a></a></li>
<li><a href="https:www.daum.net">다음</a></a></li>
<li><a href="https:www.google.com">구글</a></li>
</ul>
링크를 누르면 웹사이트가 열린다.
현재 문서내부에서 링크 (id를 참조한다.)
상단에
<p>
<a href="#menu1"><button>지수 보러가기</button></a>
</p>a 태그로 지수보러가기 버튼을 만들어주고 #menu1이 지수의 사진 a태그와 연결될 id이다.
<h4>현재 문서 내부에서 링크 (id를 참조한다)</h4>
<p>
<a href="#">문서 맨 위로 </a>
</p>
<h4 id="menu1">상단에서 내부링크를 클릭하면 이동하는 위치</h4>
<img src="image/jisoo.png" width="800" alt="지수">상단의 링크를 클릭하면 사진으로 바로 이동된다.
똑같은 파일을 만들어서 이미지만 다르게 넣어주면
버튼 클릭시 이미지만 다르게 노출시킬 수 있다.
실제로는 파일이 3개다.
<table></table>
테이블: 가로와 세로로 데이터의 관계를 표현할 수 있는 표
table: 표의 시작과 끝을 나타내는 태그
thead : 표의 상단 부분을 표현하는 태그
tbody : 표의 중심 내용을 표현하는 태그
tfoot : 표의 하단 부분을 표현하는 태그
tr : table row , 표의 한 줄을 표현하는 태그
td : table data , 줄 내부의 한 칸을 표현하는 태그
th : table head, td와 같으나 가운데 정렬 + 굵게 처리하는 태그
<table border="1" width="500" cellpadding="10">
<thead>
<tr>
<th></th>
<th>이름</th>
<th>나이</th>
<th>그림</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>짱구</td>
<td>5</td>
<td><img src="image/짱구.png" height="100" alt="짱구"></td>
</tr>
<tr>
<td>2</td>
<td>훈이</td>
<td>5</td>
<td><img src="image/훈이.png" height="100" alt="훈이"></td>
</tr>
<tr>
<td>3</td>
<td>수지</td>
<td>5</td>
<td><img src="image/수지.png" height="100" alt="수지"></td>
</tr>
</tbody>
</table>
</body>
</html>
thead
tbody
colspan : 가로확장
rowspan : 세로 확장
<thead>
<tr bgcolor="darkgrey">
<th colspan="5">
<h3>짱구 등장인물</h3>
</th>
</tr>
<tr bgcolor="darkgrey">
<th></th>
<th></th>
<th>이름</th>
<th>나이</th>
<th>그림</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">짱구 친구들 </td>
<td>1</td>
<td>짱구</td>
<td>5</td>
<td><img src="image/짱구.png" height="100" alt="짱구"></td>
</tr>
tr태그를 추가해서 짱구 가족을 넣어보자.
<tr>
<td rowspan="2">짱구 가족</td>
<td>4</td>
<td>짱아</td>
<td>2</td>
<td><img src="image/짱아.png" height="100" alt="짱아"></td>
</tr>
<tr>
<td>5</td>
<td>흰둥이</td>
<td>3</td>
<td><img src="image/흰둥이.png" height="100" alt="흰둥이"></td>
</tr>
<전체코드>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-table.html</title>
</head>
<body>
<h1>08-table.html</h1>
<hr>
<h3>테이블 : 가로와 세로로 데이터의 관계를 표현할 수 있는 표 </h3>
<ul>
<li>table : 표의 시작과 끝을 나타내는 태그</li>
<li>thead : 표의 상단 부분을 표현하는 태그</li>
<li>tbody : 표의 중심 내용을 표현하는 태그</li>
<li>tfoot : 표의 하단 부분을 표현하는 태그</li>
<li>tr : table row, 표의 한 줄을 표현하는 태그</li>
<li>td : table data, 줄 내부의 한 칸을 표현하는 태그</li>
<li>th : table head, td와 같으나 가운데 정렬 + 굵게 처리하는 태그</li>
</ul>
<table border="1" width="500" cellpadding="10">
<thead>
<tr bgcolor="darkgrey">
<th colspan="5">
<h3>짱구 등장인물</h3>
</th>
</tr>
<tr bgcolor="darkgrey">
<th></th>
<th></th>
<th>이름</th>
<th>나이</th>
<th>그림</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">짱구 친구들 </td>
<td>1</td>
<td>짱구</td>
<td>5</td>
<td><img src="image/짱구.png" height="100" alt="짱구"></td>
</tr>
<tr>
<td>2</td>
<td>훈이</td>
<td>5</td>
<td><img src="image/훈이.png" height="100" alt="훈이"></td>
</tr>
<tr>
<td>3</td>
<td>수지</td>
<td>5</td>
<td><img src="image/수지.png" height="100" alt="수지"></td>
</tr>
<tr>
<td rowspan="2">짱구 가족</td>
<td>4</td>
<td>짱아</td>
<td>2</td>
<td><img src="image/짱아.png" height="100" alt="짱아"></td>
</tr>
<tr>
<td>5</td>
<td>흰둥이</td>
<td>3</td>
<td><img src="image/흰둥이.png" height="100" alt="흰둥이"></td>
</tr>
</tbody>
</table>
</body>
</html>
테이블을 이용해서 돼지부위 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>테이블로 가로세로 합치기</h1>
<br>
<fieldset>
</fieldset>
<style>
table{
border-collapse: collapse;
border: 1px solid #dadada;
}
th{
padding: 5px 10px;
background-color: lightpink;
border: 1px solid #dadada;
}
th.hidden {
background-color: white;
border: 0;
}
</style>
<br>
<table>
<tr>
<th rowspan="3">돼지머리</th>
<th>목살</th>
<th rowspan="2">가브리살</th>
<th rowspan="2">등심</th>
<th rowspan="4">뒷다리살</th>
</tr>
<tr>
<th>항정살</th>
</tr>
<tr>
<th>갈비</th>
<th>갈매기살</th>
<th>안심</th>
</tr>
<tr>
<th class="hidden"></th>
<th>앞다리살</th>
<th colspan="2">삼겹살</th>
</tr>
<tr>
<th class="hidden"></th>
<th>돈족</th>
<th class="hidden"></th>
<th class="hidden"></th>
<th>돈족</th>
</tr>
</table>
</body>
</html>
728x90
반응형