Day2_VSCODE_HTML 하이퍼 링크 + 책갈피 + 테이블 태그

2023. 3. 27. 12:42HTML

✔ 하이퍼링크

다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
인라인 태그

 <a href ='이동할 사이트 또는 문서의 경로'>링크에 사용할 문자 또는 이미지</a>​

✔ 책갈피

<a> 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정

	<a href = '#도착지에 쓸 name'>링크에 사용될 문자 또는 이미지</a> 
	
	도착지 만들기
	<a=name'도착지name'> 문자 또는 이미지 </a>
	
	2번째 id를 이용하여 책갈피
	<태그 id='도착지name'>문자 또는 이미지</태그>​

✔ 테이블태그

여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성

- <table> </table>
- <tr>로 행을 생성
- <td>로 셀을 생성
- <tr>셀의 제목, 가운데 정렬, 굵은 글씨 기능

<table>
	<tr>
		<tb>1</tb><tb>2</tb>

	</tr>
</table>​


- colspan(속성) : 셀을 가로로 합침  |  사용법 :<td colspan='합칠 열의 개수'>

-rowspan : 셀을 세로로 합침 | 사용법: <tb rowspan='합칠 행의 개수>

✔ colgroup

태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있는 기능

<table>
	<colgroup>
		<col style='css문법1'>
		<col style='css문법2'>
		<col style='css문법3'>
	</colgroup>
	<tr>
		<td>1</td>              <-------css문법1 적용
		<td>2</td>				<-------css문법2 적용
		<td>3</td>				<-------css문법3 적용
	</tr>
	<tr>
		<td>1</td>				<-------css문법1 적용	
		<td>2</td>				<-------css문법2 적용
		<td>3</td>				<-------css문법3 적용
	</tr>
</table>​

✔caption

표에 제목을 붙일 때 사용

기본 위치는 표의 상단 중앙

✔아이프레임

 

inline frame 의 약자

웹사이트 안에 또 다른 웹사이트를 삽입

<사용법>
<iframe src = '삽입할 페이지의 주소 또는 문서위치' style ='크기를 설정할 css 코드'>

</iframe>​
728x90