확장프로그램
1. Live Server : 결과 미리보기
2. Auto Rename Tag : 앞 뒤 태그를 같게 만들어 줌
3. Elm Emmet : 코드를 빠르게 입력 가능
설정 - Setting 클릭 - [zoom] : 휠 마우스 줌에 체크 해준다.
: Ctrl + 마우스 휠 돌리면 VSC 에디터 내용만 크기 조절
#하이웹개발
프로그램 시작 : https://cafe.daum.net/goodtraining
html : 데이터를 표현해 주는 언어
css : 데이터를 디자인 해 주는 언어
<!DOCTYPE html> // 웹표준(html5) 문서임을 알려줌
<html lang="ko"> // html 시작(한국)
<head> // 문서에 정보를 알려주는 태그
<title> // 문서 제목
<meta charset="utf-8" /> // meta : 관련 인지 정보 utf-8 (유니코드-전 세계 언어 표현)
부모태그 : 상위에 있는 태그
자식태그 : 부모태그 안에 있는 태그
손자태그 : 자식태그 안에 있는 태그
형제태그 : 부모태그 안에 있는 자식 태그들
<br> : 줄 바꿈 태그
<p>문장태그</p>
<p> 안에 <p>를 쓸 수 없다.
<p> 안에 <div>를 쓸 수 없다.
<p>는 줄바꿈 2개와 같다.
<img src="./img/img1.jfif" alt=""> : 그림 태그
src : 경로 지정
alt : 웹접근성
※ 속성 : 태그의 성질, 상태를 의미한다.
shift + alt + 화살표 아래 : 줄 복사
inline style : 태그 안에 스타일을 지정
내부 스타일 : <head>와 </head> 사이에 스타일 지정
외부 스타일 : 독립된 파일을 만들어서 <link>로 연결한 스타일
block 요소 : 한 줄에 하나의 태그만 오는 요소(p, div, ul,
inline 요소 : 한 줄에 여러 개의 태그가 오는 요소(img, span, a
<div>항목 구분 태그 / 공간 구분 태그</div>
div 안에 div 쓸 수 있다.
div 안에 p 쓸 수 있다.
-------------------------------------------------------
<table> : 표 만들기 태그
<tr> : 줄 만들기
<td> : 칸 만들기
margin : 바깥쪽 여백
UI/UX 디자인
UI 디자인 : 사용자 인터페이스(편하게 사용, 흥미있는 레이아웃)
UX 디자인 : 사용자 경험(만족, 정보제공, 유익함)
<h숫자> : 제목 태그
(숫자가 1~6, 작을 수록 글자가 크다)
자동 줄바꿈 기능이 있다.
자동으로 진하게 나온다.
선택자 : 태그를 지정하기 위해 사용하는 속성
선택자 종류 : class, id, Tag, ,(콤마-다중선택자)
class : .(점)으로 표시한다.
중복 사용 가능
i d : #(샵)으로 표시한다.
중복 사용 불가