VS Code 설치
- VS Code 홈페이지(https://code.visualstudio.com/) 접속 후 사용 중인 OS에 맞는 intaller 다운
- VS Code 설정(ctrl+,)
- 관리 -> 설정 -> 텍스트 편집기 -> 파일 -> Encoding 설정
- 관리 -> 설정 -> 텍스트 편집기 -> 글꼴 설정
- 관리 -> 설정 -> 텍스트 편집기 -> Tab Size 설정
- 관리 -> 설정 -> 워크벤치 -> 모양 -> Color Theme 설정
- 관리 -> 설정 -> 텍스트 편집기 -> Mouse wheel Zoom 체크 - 확장에서 필요한 Extension 검색 후 설치
- Korean Language Pack for Visual Studio Code
- Auto Rename Tag (태그 수정 시 열거나 닫는 태그도 자동으로 수정 → 동시에 수정 가능)
- Live Preview
- indent-rainbow
- Prettier - Code formatter
- ESLint
https://www.w3schools.com/ 이거 참고하면 좋음 !
HTML5 (Hyper Text Markup Language 5)
- 웹에서 정보를 표현할 목적으로 만든 마크업 언어
- 하이퍼텍스트 : 웹 문서 내에서 링크를 클릭해 다른 문서나 사이트로 이동하는 기능
- 마크업 언어 : 태그를 사용해 문서의 구조를 정의하는 언어
HTML5 태그(Tag)
- 태그는 <와 >로 묶인 부분
- 대부분의 태그는 시작태그(
<태그명>)와 종료 태그(</태그명>)가 한 쌍으로 이루어짐 - 태그는 대/소문자를 구분하지 않지만 소문자를 사용하는 것을 권장
- 태그에는 여러 기능을 추가하는 속성을 사용할 수 있다.
- 속성(Attribute)은 시작 태그에만 작성할 수 있고 속성 값은 " ", ' '를 사용하여 기술한다.
- 태그마다 사용할 수 있는 속성들이 다르기 때문에 태그와 속성을 함께 익혀야한다.
HTML 문서의 기본 구조
- HTML 문서는 정해진 형식에 맞춰 내용을 입력해야 한다.
- 파일 확장자는 반드시 html 또는 htm으로 설정해야 한다.
<!DOCTYPE html> <!-- 문서 유형 -->
<html lang="ko"> <!-- HTML 문서의 시작 -->
<head>
<!-- 문서의 각종 정보와 문서 자체에 대한 내용 -->
</head>
<body>
<!-- 화면에 출력해서 보여주는 내용 -->
</body>
</html> <!-- HTML 문서의 끝 -->- HTML 에서 주석은
<!-- -->안에 작성하는데 브라우저는 주석 부분을 해석하지 않고 넘어간다. - HTML 문서 내에서 공백은 몇 개를 입력하든 한 개만 인식한다.
- 한 개 이상의 공백을 추가하기 위해서 특수기호
를 이용해야 한다.
글자 관련 태그
- 제목 태그
- 제목을 입력할 때 사용하는 태그로 폰트의 크기가 태그마다 정해져 있다.
- Heading의 줄임말인 h와 제목 크기를 나타내는 숫자로 표현
<h1>첫 번째로 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째로 큰 제목</h3>
<h4>네 번째로 큰 제목</h4>
<h5>다섯 번째로 큰 제목</h5>
<h6>여섯 번째로 큰 제목</h6>- 단락을 구분하는 태그
target="blank" 새 탭으로 열기
표 관련 태그
- EMMET 으로 생성
table[border="1"]>(tr>td*4)*4
폼 관련 태그
- 자동완성 켜기
<form method="get" autocomplete="on"> - Emmet으로 password input 만들기
input:password
<form method="get" autocomplete="on">
<label for="">아이디 : </label>
<input type="text" name="userId" id="userId" autocomplete="off" required>
<br><br>
<label for="userPwd">비밀번호 : </label>
<input type="password" name="userPwd" id="userPwd" required>
<br><br>
<label for="address">주소 : </label>
<input type="text" name="address" id="address">
<br><br>
<input type="submit" value="회원가입">
<input type="reset" value="초기화">
</form>- autocomplete : 자동완성
- required : 필수로 입력 받아야함
→ required 돼있는 값을 입력하지 않고 회원가입을 눌렀을 경우 경고 메시지 뜸 - autofocus : 자동으로 포커스가 뜸
value 값까지 자동으로 생성 !
- input number size 조절
<input type="number" name="amount" id="amount" value="0"
min="0" max="10" step="2" size="50">
<!-- → 이 경우 크기가 변하지 않음 -->
<input type="number" name="amount" id="amount" value="0"
min="0" max="10" step="2" style="width: 100px;">input type=range
→ 바 움직이고 콘솔에 point.value 하면 값 확인 가능 !
- 바 기본 값 설정(value 사용)
<label for="point">포인트 : </label>
<input type="range" name="point" id="point"
value="30"><form enctype="application/x-www-form-urlencoded">
select 태그
→ 여기서 국적 선택하면 option에 지정해둔 값이 전달됨
→kr, ch, jp인 것을 확인 할 수 있음 !
⛧1일 1알고리즘⛧