1. 관련링크

w3c	https://html.spec.whatwg.org/
html유효성검사	https://validator.w3.org/
css유효성검사	https://jigsaw.w3.org/css-validator/
MDN reference	https://developer.mozilla.org/ko/

2. VSCODE

2.1. 설치

포터블 다운로드
!button variant='primary' icon='play' text='실행화면' target='blank'

포터블 설치
압축 푼 디렉토리에 data 디렉토리 생성하기 (윈도우, 리눅스 = data / 맥 = code-portable-data)
확장프로그램 설치

vscode 에서 ctrl+shift+x 를 눌러 확장프로그램 패널을 열고 검색창에 아래 3개의 프로그램을 검색하여 설치한다.

Live Server

LiveServer오류발생시 :페이지가 작동하지 않습니다

open in browser
prettier

2.2. 환경설정

2.3. lang 속성 ko로 변경하기

ctrl + shift + p

설정에서 Emmet:Variables를 검색

Add Item 선택
item - lang, Value - ko로 입력 ok 후 프로그램 재실행

2.4. wrap with abbrevition 단축키 등록

2.5. 화면 줌인아웃

ctrl + shift + p

2.6. 자동줄바꿈

1.3. 단축키

사이드패널 열고닫기: ctrl B
환경설정 열기 : ctrl + shift + p
자동정렬 : alt + shift + f
줄복사 : ctrl + shift + ⬇
행번호검색: ctrl + g
단어이동 : ctrl + ➡, ctrl + ⬅
라이브서버로 열기 : alt + L -> alt + o
다른 브라우저로 열기 : shift + alt + b

2. 개발자도구 (Inspector)

개발자도구란?HTML, CSS, JavaScript 작업을 도와주는 다양한 도구
모든 웹브라우저에는 개발자 도구가 있다
웹페이지에서 우클릭 > 검사 를 클릭하거나 단축키 ctrl + shift + c 를 눌러 실행할수 있다.

개발자 도구 열기

열릴 창의 위치를 조정할수 있다.

Elements 탭에는 웹페이지의 html 문서를 표시합니다. 아이콘을 클릭하여 ctrl + shift + c 궁금한 화면을 선택하면 해당 태그가 마크업된 줄로 이동.

강아지를 누르면 <h1>이 강조되어 나타난다 <h1> 태그 안에 <a> 가 있다. 이렇게 태그 안에 태그가 있을때는 1번 삼각형을 클릭하여 확장/축소 할수 있다.

h1의 '강아지' 글씨를 우클릭> edit text 메뉴를 선택하거나 해당 글씨를 더블클릭하여 수정할수 있다.

모두가 보는 웹 페이지를 수정한 것이 아니고 우리의 컴퓨터의 화면에만 적용되는 것이므로 새로 고침을 하거나 뒤로 가기를 하면 다시 사라진다.

이렇게 개발자도구를 사용하여 서비스 중인 웹페이지의 소스를 참고하면 다양한 요소와 문법에 대해 학습할수 있다.

3. 더미텍스트

옛날 옛날에 모두의 사랑을 받는 작고 귀여운 소녀가 있었습니다. 하지만 그 소녀를 가장 사랑하는 것은 그녀의 할머니였습니다. 할머니는 소녀에게 무엇을 줘야 할지 몰랐습니다. 한번은 할머니가 소녀에게 붉은 벨벳으로 만들어진 모자를 선물했습니다. 소녀에게 그 모자가 잘 어울렸고, 소녀가 그 모자가 아닌 다른 것은 쓰지 않으려고 했습니다. 그래서 그 소녀는 '빨간 모자'라고 불렸습니다. 어느 날, 소녀의 엄마가 그녀에게 말했습니다. "빨간 모자, 여기로 와보렴. 여기 케이크 한 조각과 와인 한 병을 할머니에게 가져다 주렴. 할머니가 편찮으시니까 네가 가면 기뻐하실 거야. 더워지기 전에 출발하렴. 그리고 할머니 댁에 갈 때, 조심해서 가고 길에서 벗어나지 마렴. 그렇지 않으면 네가 넘어져서 병을 깨뜨릴 거야. 그러면 할머니는 아무것도 받지 못하신단다. 그리고 할머니 방에 가면, 먼저 인사하고 방 안 구석구석을 살펴보는 것을 잊지 말아라!"
"엄마 말 잘 들을게요." 빨간 머리가 엄마에게 말했습니다. 하지만 할머니는 마을에서 30분 떨어진 거리에 있는 숲에 사셨습니다. 빨간 모자가 숲에 같을 때, 그녀는 늑대를 만났습니다. 하지만 빨간 모자는 늑대가 얼마나 나쁜 동물인지 몰랐고 늑대를 무서워하지 않았습니다. "안녕, 빨간 모자!" 늑대가 말했습니다. "고마워, 늑대!" – " 빨간 모자야, 이렇게 일찍 어딜 가니?" – "할머니께" – "무엇을 가져가니?" – "케이크와 와인. 어제 우리가 편찮으신 할머니께 좋은 것을 드리고 기운 내게 해드리려고 케이크를 만들었어." – "빨간 모자야, 너희 할머니는 어디 사시니?" – "여기서도 15분 더 숲 속으로 가야 해. 3개의 오크 나무 아래에 할머니 집이 있어. 그 아래에는 개암나무가 있어. 너도 거기를 알거야." 빨간 모자가 말했습니다. 늑대는 혼자 생각했습니다. '저 어리고 상냥한 한입거리가 노인보다 훨씬 맛있을거야. 둘 다 잡아먹으려면 빨리 꾀를 생각해내야 해.' 늑대가 빨간 모자 옆으로 가서 말했습니다. "빨간 모자야, 여기 주변에 있는 예쁜 꽃들 좀 봐. 왜 주변을 둘러보지 않니? 내 생각엔, 너가 새들이 얼마나 아름답게 노래하고 있는지 듣지 않는 것 같아. 너는 학교 가는 것처럼 바쁘게 가는구나. 여기 숲을 둘러보는 건 정말 재미있어."