얄코(HTML)

그냥차차·2022년 10월 21일

HTML

목록 보기

2/3

이미지

해당 이미지를 코딩중인 파일에 넣고
src="./이미지 경로" 넣으면 링크를 넣지않고도 이미지를 불러올수있음

해당 이미지가 코딩중인 폴더가 아닌 다른폴더에잇다면
src="../"로 .을 두번 넣으면됨ㅇ

표만들기

table>caption+(tr>td3)3 // table태그안에 caption이 있고 거기에 tr안에 td가 3개 tr이 3개있다 이걸 탭키쳐주면 밑에쳐럼 바뀜

 <table>
    <caption></caption>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

표를 위한 css 임

<link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">

thead, tpoot, scope(col세로,row 가로)

<!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="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>Document</title>
</head>
<body>
  table>caption+(thead>tr>th*4)+(tbody>(tr>(th+td*3))*3+tfoot>(tr>th+td*3) 
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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="./table.css">
	<title>HTML & CSS 01-06-02</title>
</head>
<body>
	<table>
		<caption>웹개발 공부 기록</caption>
		<thead>
			<tr>
				<th scope="col">과목</th>
				<th scope="col">월</th>
				<th scope="col">화</th>
				<th scope="col">수</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">HTML</th>
				<td>60분</td>
				<td>60분</td>
				<td>0분</td>
			</tr>
			<tr>
				<th scope="row">CSS</th>
				<td>0분</td>
				<td>30분</td>
				<td>60분</td>
			</tr>
			<tr>
				<th scope="row">JS</th>
				<td>0분</td>
				<td>0분</td>
				<td>60분</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th scope="row">총 시간</th>
				<td>60분</td>
				<td>90분</td>
				<td>120분</td>
			</tr>
		</tfoot>
	</table>
</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">
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>Document</title>
</head>
<body>
  <table>
    <tr>
      <td>1</td>
      <td colspan="2">2</td>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan="3">3</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2" rowspan="2">4</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </table>
</body>
</html>

그냥차차

개발작

이전 포스트

생활코딩(HTML)

다음 포스트