*48일차 (html - 1.text / 2.list)

@HTML5

• File - Preferences
• Workspace 저장 : File - Save Workspace As..
• live server 꼭 설치하기

 

 

*live server

• html을 브라우저에서 확인하는데, 변경사항을 자동으로 반영해줌

 Extension(왼쪽네모) - live server 검색 후 설치

 

 

테스트할 내용 작성

 

작성한 파일 우클릭 - Open with Live Server

 

실행화면이 잘 뜬다

 

 

vs에서 ㅎㅎㅎ메롱ㅎ으로 작성 후 - Ctrl+S - 브라우저에서 변경내역 확인 가능 

 

 

---

🔥🔥🔥브라우저에서 안 뜰 경우🔥🔥🔥

 

Extension - live server 오른쪽 톱니바퀴 클릭 - Extension Settings 

 

검색창에 local IP 검색  - Use~ 체크

 

🔥🔥🔥위 방법으로도 해결 안 된 경우🔥🔥🔥

 

 

Window+R - cmd - ipconfig 입력 - ip주소확인 

live server 설정 - ip 입력

 

 

 

+)폴더가 날라가서 최근 workspace에서 불러왔다.

→ ctrl+R 

 

 

 

 

 

 

 

*단축키

• !+tab = 문서틀 작성해줌
• 태그명+tab = 태그 자동완성
• h${Hello World}*6 = h1~6까지 Hello World 출력
• ctrl + / = 주석
• alt+shift+↓ = 복사

 

**html에서 개행문자,공백문자는 모두 하나의 공백문자로 처리

• br 태그 : 개행 (엔터)
•   : 공백 (띄어쓰기)
• pre 태그 : pre-formatted 개행,공백,들여쓰기 모두 시각화 처리
• &문자 : 특수문자 표현 

 

 

 

 

 

 

 

**사이트

https://docs.emmet.io/cheat-sheet/

Cheat Sheet

http://kor.pe.kr/util/4/charmap2.htm (유니코드 특수문자)

https://developer.mozilla.org/en-US/docs/Web/HTML

HTML: HyperText Markup Language | MDN

https://www.w3schools.com/