Visual Code 설치와 초기 html 작성
2023. 3. 7. 01:27ㆍ기술 창고/HTML
728x90
SMALL
<!--
1. visual code 다운
2. 다운 받았으면 working space를 지정하고 해당 폴더를 working space로 열어준다.
3. 초기 extends를 설치한다. (open in browser, live server)
4. 처음 html 파일을 생성. (index.html)
# html 파일을 추가하려면 New File을 선택한다.
# html 코드를 작성하고 오른쪽 마우스 클릭 후 open in default browser를 선택하면 이때까지
작성한 코드가 html에 반영되어 브라우저에 나오게 된다.
-->
<!DOCTYPE html>
<html lang="ko"> <!-- 한글 사용 -->
<head> <!-- 부가 정보, import 정보-->
<meta charset="utf-8"> <!-- 글씨가 만들어지는 공식 -->
<title>HTML 첫 문서</title> <!-- 브라우저 탭 타이틀 -->
</head>
<body> <!-- 웹 페이지 구현체들 정보가 들어감 -->
<!--
<h1><html 첫 문서></h1>
© &
<p style="color:red" onclick="alert('경고');">문단</p>
-->
<h1>HTML 구조</h1>
</body>
</html>
<!--
# <html 첫문서> 이 단어를 그대로 출력하고 싶지만 실행하면 나오지않는다.
그 이유는 html 태그로 인식하여 출력이 안되는 것인데
이를 해결하기 위해 <, > 이 두개의 기호를 없애고
< - less than 혹은 > - greater than 을 사용한다. 두 명령어는 각각 <, > 를 의미한다.
# 하단의 Spaces: 4를 눌러 indent using spaces를 눌러 들여쓰기에 대한 설정이 가능하다.
# 오른쪽 마우스 클릭 후 open with Live Server 를 누르면 가상의 서버환경으로 실행되어 실시간으로
반영되는 것을 확인할 수 있다.
# https://entitycode.com/ 원하는 기호를 entity 코드로 사용할 수 있게 정리해놓은 사이트.
# https://validator.w3.org/ W3C 에서 작성한 코드가 표준에 맞게 작성되었는지 확인하는 사이트.
1. validate by URI = URI 주소를 넣어 확인.
2. validate by File Upload = 코드를 작성한 파일을 넣어 확인.
3. validate by Direct Input = 작성한 코드를 입력하여 바로 확인.
# 웹 표준 코딩 (W3C)
html, css, javascript는 한 파일내에서 같이 기입하여 사용하는 것이 아니라 각각 다른 파일에 정리한 후
import 하여 사용하는 것이 원칙이다.
1. html = 내용
2. css = 모양
3. javascript = 동작
-->
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] 테이블 태그 (2) | 2023.03.07 |
|---|---|
| [HTML] list 목록 태그 (0) | 2023.03.07 |
| [HTML] 정형화된 텍스트 (0) | 2023.03.07 |
| [HTML] 시멘틱 (semantic) 구분 (0) | 2023.03.07 |
| [HTML] paragraph 텍스트 (0) | 2023.03.07 |