웹 브라우저 언어 (사용자측)
** html
- 확장자 html → 뼈대
- 장점 : 배우기 쉽다
- <a> </a>
- <> 시작태그, </> 닫기태그
- 태그 안에 적는 것 → 속성
- = : 속성 값, " " 로 감싸기
- a : 여기서부터 여기까지야~
- 시작부터 끝까지 → 요소 (가장 큰 단위)
- 속성, 태그, 요소 : 정확히 알고있어야됨
** css → 꾸며줌(포토샵처럼)
** javascript → react
웹 서버 언어 (실질적인 내용)
- php
데이터 베이스
- mysql
HTML
- (.html) 꼭 적어주기
- F12 → Elements : 개발자 창
- ctrl + f : 검색
- href : 필수
- title : 마우스 올렸을 때 말풍선
- target : 새로운 페이지에서 링크열림
- body
- head
- meta charset ★ (제대로 안되면 한글 깨짐)
- title (맨위 창 이름)
- h : 제목 태그
- p : 공간 안의 글
- <br> : 강제 줄 바꿈 (태그열기만하면됨, 열기태그안 셀프클로징 <br/>)
- pre : 텍스트 그대로 표현
- hr : 가로 선
- <!DOCTYPE html>
- html5를 사용중이야~,
- 웹브라우저에게 정확히 알려줌
- lang(언어) ★ : lang="ko" : 한국어야~
- 목록태그, 순서형 목록
- ol : 순서 o
- ul : 순서 x, 굉장히 많이씀
- li : 리스트
- dl : 정의리스트
- dt : 이름
- dd : 정의
- 텍스트 관련
- p
- strong : 두껍게
- em : 기울기
- mark : 형광펜
- small : 작게
- sub : 아래천 / sup : 위천
- ins : 밑줄
- del : 중간줄
테이블 태그
- 가로 행 / 세로 열 / 한칸 셀
- 행 : tr
- 열 : td
- 제목 : th
- title border
- cellspacing : 셀들 사이 여백
- cellpadding : 글자, 셀 사이 공간여백
- colspan : 행 합치기
- rowspan : 열 합치기
하나의 그룹으로 묶기
- caption : 제목
- thead
- tbody
- tfoot : 순서상관없이 테이블 아래에 나타남
상대경로
<img src="?? / ??.jpg" alt="텍스트">
- 내 위치에서
- ../ : 한단계 앞 ★
- ./ : 현위치 (생략가능)
** 절대 경로 : 주소 복사 / https://
이미지요소
<img>태그
: html 문서안에 이미지를 넣을 수 있음, 빈요소이다.
- src 속성 : 이미지 경로를 지정함
- alt 속성 : 이미지를 지원하지 않는 환경에서 이미지를 대체하는 텍스트
비디오 태그
- videl controls
- width= : 크기 조절
- autoplay : 자동재생
- muted : 음소거
- loop : 계속 반복
<source src="../?/?.mp4" type="?/mp4">
비디오 요소
- <source>태그 : video요소의 원본파일에 대한 파일 형식 및 파일 주소를 명시함
- <videl>태그 : 비디오와 영화 등 비디오 파일을 명시함
- src속성 : 비디오 파일의 경로를 명시함
- width속성 : 비디오 파일의 너비를 명시함
- height속성 : 비디오 파일의 높이를 명시함
- loop속성 : 비디오 반복재생 여부를 명시함
- controls속성 : 비디오의 기본적인 동작을 조절할 수 있는 패널을 명시함
- muted속성 : 비디오의 음소거를 명시함
- 형제요소(같은 레벨)
- 부모, 자식요소(바로 한단계 안)
- 상위, 하위요소(모든 것)
1) html
l
2) body / head
l
3) ol, ul / h1 / h2
l
4) li / li / li
[ 정 리 ]
- <html lang="ko">
- <head> 웹 페이지의 정보나 스타일시트 자바스크립트 파일 연결
- <mata> : 웹 페이지의 정보를 웹 브라우져에게 명시함
- <title> : 웹 페이지의 제목
- <style> : html문서 내에서 스타일 언어를 명시함
- <script> : html문서 내에서 스크립트 언어를 명시함
- <body> 실제 웹 페이지의 본문 영역
- h1~h6 : 제목 태그
- p : 문단 태그
- ol : 순서형 목록
- ul : 비순서형 목록
- li : 리스트 (ol, ul의 유일한 자식)
- dl
ㄴ dt : 용어의 제목
ㄴ dd : 용어 설명글
'HTML' 카테고리의 다른 글
| [HTML] script 태그의 위치 (0) | 2023.05.08 |
|---|---|
| [HTML] 필기2 (0) | 2023.03.09 |
