서식 태그
<b> : 텍스트를 굵게 표현
<i> : 텍스트를 이탤릭체로 표현
<strong> : 텍스트를 굵게 표현
<em> : 텍스트를 이탤릭체로 표현, 리더기에서 거쌘 발음
<b>여러분 안녕하세요.</b> 오늘은 <strong>HTML</strong>에 대해서 배워볼게요
https://validator.w3.org/
잘못된거 체크해주는 사이트
목록 태그
<ul> : 순서가 없는 목록 태그, 블록태그(한줄 다 차지)
· 김사과
· 오렌지
· 반하나
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<ol> : 순서가 있는 목록 태그, 블록 태그
1. 김사과
2. 오렌지
3. 반하나
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<dl> : 정의 목록 태그, 블록태그
류정원 선생님
김사과 학생
오렌지 학생
반하나 학생
<dl>
<dt>류정원 선생님</dt>
<dd>김사과 학생</dd>
<dd>오렌지 학생</dd>
<dd>반하나 학생</dd>
</dl>
이미지 태그
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- "레스터 이미지"라고 부름
- 한픽셀당 1바이트인데
컬러로 찍으면 한픽셀당 3바이트
컬러는 r픽셀 g픽셀 b픽셀 이 겹쳐진 픽셀
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵등 툴로 편집가능
2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내느 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 숙소를 해도 이미지가 깨지지 않음
- 일러스트 같은툴로 편집
jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포맷
- 표현 색상(24비트, 약 1600만)이 뛰어나 고해상도 표시장치에 적합
- 손실압축(ctrl +c v 복붙많이 하면 손실됨)
gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트(256색상) 컬러만 지원
- 비손실 압축
png
- gif의 대체 포맷으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원(투명도 채널)
- w3c 권장 포맷
webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷으로
- gif 같인 애니메이션 지원
- 알파 채널 지원(손실, 비손실)
- 완벽한 포맷
이미지 태그 <img>
- 인라인 태그
<img src="이미지가 위치하는 주소 또는 파일경로" alt="이미지를 대신할 문장">
✔ 파일 경로 작성 방법
1. 절대 경로
- 물리적 경로
- http, https, file
http://t1.daumcdn.net/dautop_chanel/op/20200723055344399.png
D:\Ryuzy/HTML/DAy2/sky1.png
<img src = "http://t1.daumcdn.net/dautop_chanel/op/20200723055344399.png"
alt="다음로고"> <!-- (O) -->
<img src="D:\Ryuzy/HTML/DAy2/sky1.png" alt="하늘이미지"> <!-- (X)-->
2. 상대 경로
<img src = "파일명">,<img src="./파일명">
- 이미지가 하위 폴더에 있는 경우
<img src = "폴더명/파일명">,<img src = "./폴더명/파일명">
ex.<img src = "./images/sky6">
- 이미지가 상위 폴더에 있는 경우
<img src = "../파일명">,<img src = "./../폴더명/파일명">
- 이미지가 상위 폴더의 하위폴더에 있는 경우
<img src = "../하위폴더명/파일명">,<img src = "./../하위폴더명/파일명">
하이퍼 링크 <a>
- 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
<a href="사이트 또는 이동할 문서의 경로"> 링크에 사용될 문자 또는 이미지</a>
책갈피 <a>
<a> 태그의 name 속성 또는 특정 태그의 id 속성을 이용하여 책갈피 기능을 사용
<a href="a 태그의 #값 또는 특정 태그의 id값">링크에 사용될 문자 또는 이미지</a>
<a href="#book">이동</a>
,,
,,
,,
,,
<a name="book">도착</a> 또는 <p id="book">도착</p>
테이블 <table>
여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표
<table>
<tr>
</tr>
</table>
<tr>: 행을생성
<td>: 셀을 생성
<table>
<tr>
<td>1</td>
</tr>
</table>
<th> : 셀의 제목, 가운데 정렬, 굵은 글씨
<table>
<tr>
<th>1</th>
</tr>
</table>
colspan 속성
- 셀을 가로로 합침(열)
<td colspan="합칠 열의 갯수">
rowspan 속성
- 셀을 세로로 합침(행)
<td rowspan="합칠 행의 갯수">
colgroup
<colgroup> 태그 뒤에 나오는 칼럼(th 또는 tg)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
<table>
<colgroup>
<col style="css문법">
<col style="css문법">
<col style="css문법">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
caption
- 표에 제목을 붙일 때 사용
- 기본 위치는 표의 상단 중앙
과제1
인터넷 뉴스 페이지를 html로 문서로 작성해보자
과제2
이력서를 HTML 문서를 작성해보자.1.서식태그
<!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>Document</title>
</head>
<body bgcolor="#222222" style="color: white">
<h2>서식태그</h2>
<p> b 태그는 <b> 단순히 글자가 굵게 </b>표현됩니다</p>
<p> strong 태그는 <strong> 중요한 글자를 굴게</strong> 표현합니다</p>
<p>em 태그는 <em>중요한 글자를 이탤릭체</em>로 기울여 표현합니다</p>
<p>del 태그는 글자를 <del>지운 것</del> 처럼 표현합니다</p>
<p>ins 태그를 사용하면<ins>중요한 글자를 밑줄</ins>을 그어줍니다</p>
<p>sup 태그(윗첨자)를 사용해서 수식을 표현 : X<sup>2</sup> + y<sup>3</sup> = Z</p>
<p>sub 태그(아랫첨자)를 사용해서 화학식을 표현 H<sub>2</sub>O</p>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
</body>
</html>
2.목록태그
<!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>Document</title>
</head>
<body bgcolor="#222222" style="color: white" >
<h2>목록 태그</h2>
<ul></ul>
<hr><!--바 태그-->
<!--ol>li*3 -->
<ol>
<li>김사과 학생</li>
<li>오렌지 학생</li>
<li>반하나 학생</li>
</ol>
<hr>
<!-- dl>dt+dd*3 -->
<dl>
<dt>류정원선생님</dt>
<dd>김사과 학생</dd>
<dd>오렌지 학생</dd>
<dd>반하나 학생</dd>
</dl>
</body>
</html>
3.이미지태그
<!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>Document</title>
</head>
<body>
<h2>이미지태그</h2>
<!--상대경로-->
<img src="./sky1.png" alt="1">
<img src="./images/sky2.png" alt="2">
<img src="../sky3.png" alt="3">
<img src="../images/sky4.png" alt="4">
<!-- -->
</body>
</html>
4.하이퍼링크
<!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>Document</title>
</head>
<body>
<h2>하이퍼링크</h2>
<!-- 상대 경로-->
<a href="./3_이미지태그.html">이미지 태크 연습</a>
<a href="./3_이미지태그.html"><img src="./sky5.png" alt="하늘"></a>
<!-- 절대 경로-->
<a href="https://koreaisacademy.com"> 코리아 IT 아카데미</a>
</body>
</html>
5.책갈피
<!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>Document</title>
</head>
<body>
<a name ="menu">책갈피</a>
<!-- a태그의 name이나 id 값이 목적지 -->
<!-- a태그의 href는 이동 값앞에 # 붙여야됨-->
<p><a href="#book">아래로</a></p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla rerum laboriosam at quisquam ratione porro corporis debitis, amet quibusdam, unde eum veritatis ipsa. Laborum cum cumque sint alias incidunt iure.</p>
<p><a name="book">도착지</a></p>
<p><a href="#menu">위로</a></p>
</body>
</html>
6.테이블1
<!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>Document</title>
<style>
table {
width: 600px;
border: 1px solid white;
}
td{
border: 1px solid white;
}
th{
border:1px solid white;
}
</style>
</head>
<body bgcolor="#222222" style="color: white">
<h2>테이블 1</h2>
<table>
<tr>
<td>첫번째 셀</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>첫번째 셀</td>
<td>두번째 셀</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>첫번째 셀</td>
<td>두번째 셀</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>첫번째 셀</td>
<td>두번째 셀</td>
</tr>
<tr>
<td>첫번째 셀</td>
<td>두번째 셀</td>
</tr>
</table>
<br>
<table>
<tr>
<th>이름</th>
<th>국어점수</th>
<th>수학점수</th>
</tr>
<tr>
<td>김사과</td>
<td>100</td>
<td>20</td>
</tr>
<tr>
<td>짜장면</td>
<td>50</td>
<td>100</td>
</tr>
</table>
</body>
</html>
7.테이블2
<!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>Document</title>
<style>
table {
width: 600px;
border: 1px solid white;
}
td{
border: 1px solid white;
}
th{
border:1px solid white;
}
</style>
</head>
<body bgcolor="#222222" style="color: white">
<h2>테이블 2</h2>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td rowspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>15</td>
<td>16</td>
</tr>
</table>
</body>
</html>
8.테이블3
<!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>Document</title>
<style>
table {
width: 600px;
border: 1px solid white;
}
td{
border: 1px solid white;
}
th{
border:1px solid white;
}</style>
</head>
<body bgcolor="#222222" style="color: white">
<table>
<caption>
<p>웹서버 기반 ai 응용 블라블라 제목</p>
</caption>
<colgroup>
<col style="width: 100px; background-color: yellowgreen">
<col style="width: 100px; background-color: pink">
<col style="width: 100px; background-color: skyblue">
</colgroup>
<tr>
<th>이름</th>
<th>연락처</th>
<th>주소</th>
</tr>
<tr>
<td>김사과</td>
<td>010-6328-9574</td>
<td>서울 특별시 양양</td>
</tr>
<tr>
<td>고길동</td>
<td>010-1232-2222</td>
<td>서울 특별시 남구</td>
</tr>
</table>
</body>
</html>반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
|---|---|
| HTML&CSS | 선택자,텍스트,배경 (1) | 2022.10.27 |
| HTML&CSS | CSS,스타일,선택자,상속 (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
