Do it! 인터랙티브 웹 페이지 만들기 도서 공부를 정리하는 글입니다.
DOCTYPE, head, body 태그 코드 및 설명
<!-- html 영역은 head와 body 영역으로 나뉜다.
head: 웹 브라우저에 보이지 않는 문서 설정이나 CCS, javascript같은 외부 파일 연결
body: 다양한 html 태그로 웹 브라우저에 출력할 콘텐츠 입력-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"> <!-- 웹 문서의 인코딩 방식. 세계 표준 인코딩 방식인 UTF-8 기본 지정-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 사용자가 익스플로러를 이용한다면 최신 버전인 엣지로 화면을 보여주는 기능.
잘못해서 구버전 브라우저가 실행되어 비정상적인 화면 출력 방지. (항상 최신 브라우저 출력)-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--디바이스 종류별 출력 방식. viewport가 있어야 반응형 웹 페이지 제작 시 모바일에 결과 출력 가능-->
<title>Document</title>
</head>
<body>
안녕하세요.
</body>
</html>
코드 작성 후 웹 브라우저에서 결과 확인하기
Live server 실행
Live server 확장을 설치하면 웹 브라우저에서 결과 확인을 더 쉽게 할 수 있다.
코드 작성 후 에디터 오른쪽 아래에 있는 Go live 버튼을 누른다.
웹 문서가 크롬에 나타나서 입력한 내용을 확인할 수 있으며, head의 title에서 설정해준 문서 제목인 Document를 탭에서 확인할 수 있다. 또한 body의 내용도 볼 수 있다.
Live server를 종료하려면 다시 오른쪽 아래에 있는 Port를 선택하면 된다.
'Web: html ccs javascript react' 카테고리의 다른 글
| [react] 가짜 데이터 사용해 보기: chance (0) | 2023.08.29 |
|---|---|
| [react][npm] 리액트-node.js-npm-프런트엔드 개념 알기 (0) | 2023.08.29 |
| [react] 웹팩과 빌드/개발모드로 실행하기 (0) | 2023.08.28 |
| [react] 첫 번째 리액트 프로젝트 만들기 (0) | 2023.08.28 |
| [CSS] css display: inline-block 예시 (0) | 2023.08.21 |