서식 태그
<b> : 텍스트를 굵게 표현 버전1
<i> : 텍스트를 이탤릭체로 표현 버전1
<strong> : 텍스트를 굵게 표현, 리더기에서 거쎈 발음 버전5
<em> : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음 버전5
거쎈발음?
<b>여러분 안녕하세요.<\b> 오늘은<strong>HTML</strong>에 대해서 배워볼게요 읽어줄때 H! T! M! L! 강조
목록 태그
<ul> : 순서가 없는 목록 태그, 블록 태그
· 김사과
· 오렌지
· 반하나
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<ol> : 순서가 있는 목록 태그, 블록 태그
1. 김사과
2. 오렌지
3. 반하나
<ol> 부모
<li>김사과</li> 자식
<li>오렌지</li>
<li>반하나</li>
</ol>
<dl> : 정의 목록 태그, 블록 태그
OOO 선생님
김사과 학생
오렌지 학생
반하나 학생
<dl>
<dt>OOO 선생님</dt> 형제 dt dd
<dd>김사과 학생</dd>
<dd>오렌지 학생</dd>
<dd>반하나 학생</dd>
</dl>
이미지 태그
1.비트맵 이미지 =영상
-픽셀이 모여 만들어진 정보의 집합
-"레스터 이미지"라고 부름
-픽셀 단위로 화면에 렌더링함
-그림판,포토샵등 툴로 편집
2.벡터 이미지
-수학적 정보의 형태들이 만들어내는 결과물 (수식으로 늘리거나 줄여도 이미지가 깨지지 않음)
-이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
-확대 및 축소를 해도 이미지가 꺠지지않음
-일러스트 같은 툴로 편집 (2d이미지?)
jpg(jpeg)
-압축률이 훌륭하여 사진이나 예술분야에 많이 사용
-가장 널리 쓰이는 이미지 포멧
-표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
-손실 압축 (CTRL C , CTRL V 하면 깨짐)
gif
-이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
-여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
-8비트(256색상) 컬러만 지원
-비손실 압축
png
-gif의 대체 포멧으로 개발
-8비트, 24비트 컬러 이미지 처리
-알파 채널 지원 (투명도)
-w3c 권장 포멧
webp
-jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
-gif 같은 애니메이션 지원
-알파 채널 지원(손실, 비손실)
-완벽한 포멧
이미지 태그 <img>
- 인라인 태그
<img src="이미지가 위치하는 주소 또는 파일경로" alt="이미지를 대신할 문장">
✅ 파일 경로 작성 방법
1.절대 경로
-물리적 경로(전체경로)
-http, https, file
https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png
C:\Users\dignd\OneDrive\사진\Saved Pictures
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
alt="다음로고"> <!--(O)--> 누구나 볼 수 있음
<img src="C:\Users\dignd\OneDrive\사진\Saved Pictures" alt="하늘 이미지"> <!--(X)--> 다른사람의 경로에 없음! 자기 컴퓨터의 경로에 다 있어야 볼 수 있음
2.상대 경로
-이미지가 HTML문서와 같은 폴더에 있는 경우
<img src="파일명"> ->윈도우방식,<img src="./파일명">-->리눅스 방식 둘다 사용(O)
-이미지가 하위 폴더에 있는 경우
<img src="폴더명/파일명">, <img src="./폴더명/파일명">
-이미지가 상위 폴더에 있는 경우
<img src="../파일명">,<img src="./../파일명">
-이미지가 상위 폴더의 하위 폴더에 있는 경우
<img src="../하위폴더명/파일명">,<img src="./../하위폴더명/파일명">
하이퍼링크 <a> 눌렀을때 다음페이지로 넘어가는 방법 글자? 그림?도
-다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
<a href="사이트 또는 이동할 문서의 경로">링크에 사용될 문자 또는 이미지</a>
책갈피 <a> 같은 페이지 내에 스크롤을 휙 이동
<a> 태그의 name 속성 또는 특정 태그의 id속성을 이용하여 책갈피 기능을 사용
<a href="a 태그의 name 또는 특징 태그의 id값">링크에 사용될 문자 또는 이미지</a>
<a href="#book">이동</a>
..
..
..
..
<a name="book">도착</a> 또는 <p id ="book">도착</p>
테이블 <table>
여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표
<table> tr: 박스 행만들때 사용
<tr>
<td>1</td> td:셀을 만듬
</tr>
</table>
<th>: 셀의 제목, 가운데 정렬, 굵은 글씨
<table>
<tr>
<th>1</th>
</tr>
</table>
colspan 속성
-셀을 가로로 합침(행)
<td colspan="합칠 열의 갯수">
rowspan속성
-셀을 세로로 합침(열)
<td rowspan="합칠 행의 갯수">
colgroup
<colgroup> 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
<table>
<colgroup>
<col style="css 문법">
<col style="css 문법">
<col style="css 문법">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
caption
-표에 제목을 붙일 때 사용
-기본 위치는 표의 상단 중앙
카테고리 없음