VS CODE 단축키:
ctrl + alt + 방향키 : 여러줄 입력
shif 방향키 : 여러 줄 상태에서 동시에 글 드래그
ctrl 오른쪽 방향키 : 줄에서 가장 오른쪽으로 이동
구조 : <시작태그> 제목 <종료태그>
문서 기본 구조 :
<!DOCTYPE html>
<html>
<head>
<title>주소이름</title> <----- webpage에 표시 X
</head>
<body>
내용 <----- webpage에 표시 O
</body>
</html>
주석 : <!--내용-->
Emmet :
<아이디>
span.item ---> <span class="item"></span>
#item ---><div id="item"></div>
<클래스>
span.title ---> <span class="title"></span>
,title ---> <div class="title"></div>
<컨텐츠>
p.container{Hello Word~!} ---> <p class="container">Hello World~!</p>
<자동 넘버링>
p.container{item$}*3 --->
글꼴태그 :
<h1> ~ <h6> : 제목태그
<p> : 문단나누기 태그
<hr> : 가로 선 태그
<br> : 줄 바꿈 태그
<i> : 이텔릭체 태그
<em> : 이텔릭체 강조 태그
<b> : 강하게 표시 태그
<strong> : 진하게 강조 표시 태그
목록태그:
<ol> : 순서 있는 목록 태그
<ul> : 순서 없는 목록 태그
<li> : 목록 하위 태그
<dl> : 용어 설명 목록 태그
<dt> : 용어의 제목 태그
<dd> : 용어의 설명 태그
Table 기본 태그:
<caption> : 표 제 태그
<tr> : 표의 행 태그
<th> : 표의 제목 열 태그
<td> : 표의 일반 열 태그
tr>td*3 : 표의 행 하나에 3개의 열 만드는 코드
Table 그룹 관련 태그
<thead> : 표의 제목 열들을 묶는 태그
<tbody> : 표의 일반 열들을 묶는 태그
Semantic 태그 --> (가독성 증가, 최적화 등의 이점이 있음)
<header> : 웹의 윗부분
<nav> : 웹의 주소 목록
<main> : 웹의 메인 콘텐츠
<footer> : 웹의 맨 아래
<section> : 웹의 메인에서 콘텐츠 구분
<article> : 웹의 섹션 안에서 다양한 이미지나 다른 내용 삽입
<aside> : 웹의 사이드
Inline 레벨요소 Block 레벨요소
<div>와 <span>의 차이 :
- <div>는 공간을 컨텐츠를 담는 박스형태로 차지 (컨테이너의 역할) <---Block
- <span>은 공간을 컨텐츠 범위만큼 차지 (아이템을 꾸미는 역할) <--- Inline
Block 요소에는 공간의 가로 세로 길이 조절이 가능하지만,
Inline 요소에서는 불가능하다.
이미지 태그
<img> : 문서에 이미지 삽입 ----> ex) <img src="경로" alt="사진이름" />
오디오 태그
<audio> : 문서에 사운드 삽입 ----> ex) <audio src="경로" controls></audio>
비디오 태그
<video> : 문서에 비디오 삽입 ----> ex) <video wdith="넓이" src="경로" controls type="video/mp4></video>
오디오 비디오 속성 태그
controls : 컨드롤 (재생 막대)를 표시
autoplay : 오디오나 비디오 자동 실행
loop : 오디오나 비디오 반복 재생
muted : 오디오나 비디오 소리 제거
width, height : 비디오의 너비나 높이 설정
poster : 비디오의 썸네일 사진 설정
하이퍼 링크 태그
<a> : 링크 태그 ----> ex) <a href="경로">링크이름</a>
--->이미지로 링크이동 ex <href="경로"><img src="경로" alt="사진이름 width="너비"></a>
target="_blank" : 링크 이동시 새탭 이용
href : 특정위치로 이동
Form 태그
Form : 사용자들이 입력할 양식
Form data : 사용자들이 입력한 내용
Input 태그
<input> : 데이터 입력 받음
ex) <input type="text" id="name">
Lable 태그
<lable> : 입력받는 필드를 설명, <input>태그랑 연결시킬 수 있음
ex) <lable>
이름 :
<input type="text" id="name">
</lable>
or
<lable for="name">이름 : </lable>
<input type="text" id="name">
type="text" : 그냥 문자 입력
type="email" : 메일의 입력
type="tel" : 전화번호 입력
type="url" : url 입력
type="number" : 숫자 선택 방식의 입력
type="range" : 범위내에 드래그 해서 선택
type="date", type="month", type="week" : 범위내에 날짜 선택 입력
type="time" : 범위 내에 시간 선택 입력
required min="최솟값" max="최댓값" : range나 number 등 에서 최솟값, 최솟값 설정
type="file" : 파일 선택 입
value="버튼이름" : 입력 내용 확인 버튼
checkbox 태그
ex) <input type="checkbox" id="아이디" value="값"> : 여러개 선택 가능
< input type="radio" name="이름" id="아이디" value="값"> : 하나만 선택 가능
Textarea
Select
Option
Button
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 심화 스터디] 신진욱 #2주차 - 반복문,조건문,함수 (0) | 2023.04.13 |
|---|---|
| [2023 신입부원 기초 스터디] 최종은 #2주차 - CSS알아가기 (0) | 2023.04.12 |
| [2023 신입부원 기초 스터디] 도승준 #1주차 - 레전드가 어쩌구.. 필드셋이 저쩌구.. (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 최종은 #1주차 - HTML알아가기 (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 박승환 #1주차 - 웹 씨앗을 심었다!(HTML 배우기) (1) | 2023.04.06 |
