2024. 11. 5. 09:41ㆍHTML
HTML
HTML <-> HTTP
텍스트 형태의 HTML을 주고받는것을 HTTP라고 한다.
※ 서버와 클라이언트를 구분하는게 우선사항
- 클라이언트단에서 동작하는 걸 배울 예정 (오늘은 서버 상관 없음)
<!DOCTPE html>
<html XXX="A" > <!-- 여는 태그 -->
<head>
</head>
<body>
이 안에 내가 쓰고싶은거 쓰면 됨
<h1> 나는 h1이야
<p>나는 h1의 자식요소</p>
</h1>
<button> 안녕 나는 버튼이야 </button>
</body>
<!-- 컨텐트 영역 -->
</html> <!-- 닫는 태그 -->
여는태그와 닫는태그 한쌍: 요소
XXX : 속성
표 관련 태그
표(table): row + cell로 구성됨
문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용
표를 구성하는 요소: <table>, <tr>, <th>, <td> // <thead>, <tbody>, <tfoot>
<table></table> : 기본적으로 표를 생성해주는 태그
<tr></tr> : 표의 한 행(가로로 한 줄)을 나타내는 태그
<td></td> : 표의 일반 셀(한칸)을 나타내는 태그
<th></th> : 열의 제목 셀을 나타내는 태그
표의 행과 열을 합치는 속성 :
- colspan= "2" : 2개의 열을 합치겠다.
- rowspan= "2" : 2개의 행을 합치겠다.
테이블 제목을 다는 태그:
<caption>제목입니다</caption>
이미지 및 멀티미디어 관련 태그
이미지 img
<img src="이미지의 경로(필수)" alt="이미지 설명 문구" width="이미지의 가로길이(px/%)" height="이미지의 세로길이(px/%)" />
ex) <img src="resources/image/bono.jpg" id="bono" alt="보노보노"/>
alt
- 사진의 경로가 존재하지 않거나 이미지를 올바르게 표현할 수 없는 경우 대체 택스트
- 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구
웹접근성 → 사용자의 신체적 특징이나, 지역, 나이, 지식수준등을 고려하여
가능한 최대한 많은 사용자가 불편함없이 이용할 수 있도록 서비스를 만들어서 제공하는 것
오디오 관련 태그
<audio src"" controls autoplay Loop />
controls : 플레이어를 보일것인지 숨길것인지
autoplay : 자동 재생 여부 지정
Loop : 반복 재생 여부 지정
<audio src="resources/audio/major.mp3" controls autoplay loop></audio>
비디오 관련 태그
<video src="" controls autopaly Loop width="" height="">
src: 비디오파일의 경로
controls autoplay Loop : audio랑 동일
width, heigth: 가로 세로 길이 지정 가능
poster: 썸네일 이미지 지정 가능
<video src="resources/video/sample.mp4" width="400" height="200" controls poster="resources/image/bono.jpg"></video>