- 비주얼 스튜디오 코드 설치
- https://code.visualstudio.com/download
- User Installer 64bit / Mac silicon
- 익스텐션 다운로드
- live server
-
alt + L, O → 이후 ctrl + s 저장
수정 후 저장한 데이터 새로고침 없이 바로 반영해줌
-
- Auto Rename 자동으로 시작 태그, 종료 태그를 수정
- live server
- 클라이언트 사이드 언어 (Client Side Languege)
- HTML 웹사이트의 틀을 작성하는 언어
- CSS HTML 문서를 시각적으로 만들어주는 언어
- JavaScript HTML 문서의 컨텐츠 내용을 바꾸고 동적인 페이지를 만들기 위해 사용하는 프로그래밍 언어
- HTML 웹사이트의 틀을 작성하는 언어
- HTML 문서 만들기
- HTML 문서 확장명 : .html
- 문서를 작성할 수 있는 editer 라면 어디든지 작성 가능
- 대소문자를 구별하지 않음
- 태그 형태로 괄호를 사용하여 표현 (예: <명령어>)
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 시작태그, 종료태그로 구성되어 있음 (예: <명령어> 내용 </명령어>)
- 웹 접근성 정상적인 웹 컨텐츠 사용이 가능한 일반 사용자로부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있도록 웹 컨텐츠를 제작하는 기법
- 속성
- 요소(element)에 대한 추가적인 정보를 제공
—- — ————-
요소 속성 속성값
- 요소(element)에 대한 추가적인 정보를 제공
- 특수태그
- 개행(enter) :
- 띄어쓰기 :
- < : <
: >
- 개행(enter) :
- 에밋(Emmet) HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플로그인(구 젠코딩)
- HTML 주석문
- <!— 시작해서 —> 끝남
- 문단 태그
- 문단을 만드는 태그
- 블록 태그
- 너비를 무조건 꽉 채움
- 제목 태그
- 제목을 표현할 수 있는 태그
- 가장 큰 <h1.> 태그부터 가장 작은 <h6.> 태그까지 제공
- 블록 태그
- 검색 엔진에서 키워드로 사용됨
- HTML5의 문서 구조
- <!DOCTYPE html>
- HTML 문서의 선언
- HTML 버전 5를 나타냄
- <.html lang=”en”>
- lang 속성은 웹 접근성에 관한 명시
- 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공
- 한국어로 설정하려면 lang=”ko”
- <.meta charset="UTF-8">
- meta 태그는 태그에 정보를 추가하기 위한 태그
- , Keywords, Description, … 의 값을 설정
- charset=”UTF-8” 속성은 문자를 인코딩할 때 문자 코드를 설정하는 방법
- <.meta name="viewport" content="width=device-width, initial-scale=1.0">
- 모바일로 최적화된 사이트에 포함하는 META 속성 설정
- viewport : 가상의 화면
- <!DOCTYPE html>
tistory로 이전! https://sweet-rain-kim.tistory.com/