<!DOCTYPE html> // HTML의 버전을 설정
<html> //문서의 전체범위, Html 문서가 어디에서 시작하고 끝나는지 알려주는역할.
<head> // 문서의 정보를 나타내는 범위,
웹브라우저가 해석해야할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹페이지의 보이지않는 정보를 작성하는 범위.
<body> //문서의 구조를 나타내는 범위,
사용자 화면을 통해 보여지는 로고,헤더,푸터,네비게이션,메뉴,버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는범위.
HTML 문서에 CSS 문서 연결하는 방법
<head> //head 태그 안에 link 태그 추가.
<link rel="stylesheet" href="./main.css">
</head>
HTML 문서에 JS문서 연결하는 방법
<head> //head 태그 안에 script 태그 추가.
<script src="./main.js"></script>
</head>
* 웹사이트가 열릴때 영어/한국어 번역 선택하도록 나오는 경우,
일반적으로 한국어 사이트를 제작하기때문에 번역을 묻는 팝업이 나오지않도록 하는 방법.
<html lang="en"> // lang(language의 약어)은 지정할 문서의 언어를 명시하는 HTML 속성.
<html lang="ko"> // 한국어로 동작시키는 경우 lang을 ko로 수정할 것.
정보를 의미하는 태그 살펴보기(feat. head 태그)
<head>
<title></title> // HTML 문서의 제목을 정의
<link rel="stylesheet" href="./main.css"/> // 외부문서를 가져와 연결할 때 사용.(대부분 CSS파일)
<link rel="icon" href="./favicon.png"> rel : 가져올 문서와의 관계, href : 가져올 문서의 경로
<style> div { color:red; } </style> //스타일(CSS)를 HTML 문서안에서 작성하는 경우 사용.
<script src="./main.js"></script> // JS 파일을 가져오는 경우나 JS를 HTML 문서 안에서 작성하는 경우 이용.
//위의 title, link, style, script로는 표현할 수 없는 나머지 정보를 meta 태그를 이용해 표현.
//meta 태그는 HTML 문서의 제작자, 내용, 키워드같은 여러 정보를 검색엔진이나 브라우저에 제공.
<meta charset="UTF-8"/> //문자 인코딩 방식을 지정하는 HTML 속성.
<meta name="author" content="HEROPY"/> //author : 제작자는 HEROPY
<meta name="viewport" content="width=device-width, initial scale=1.0">
// viewport : 웹페이지가 표시되는 영역, 일반적으로 모바일 장치에 해당하는 설정.
</head>
화면에 이미지 출력하기
<img src="이미지경로" alt="이미지에대한설명"> 의 형태로 코드 작성.
(프로젝트 폴더에서 사용할 이미지파일들을 images 폴더를 별도로 생성하여 관리하는 것을 권장.
상대경로
./ (작성된 파일 기준 주변파일 찾기, 생략가능)
../ (작성된 파일 기준 상위경로 검색) Ex:) css파일에서 image를 불러오는 경우, ../images/heropy.png
절대경로
http, https (원격주소)
/ (최상위경로.루트)
페이지를 나누고 연결(링크)하기
<a href="https://naver.com">Naver</a>
브라우저는 html파일을 호출할때 html 파일명이 지정되어있지않으면 기본적으로 index.html파일을 찾는다.
때문에 아래 예제를보면 <a href="/about">으로 별도의 파일을 지정하지 않고 폴더명만 지정하여도 about 폴더 안에 index.html을 자동으로 찾아 실행시키는 것을 볼 수 있다.
그리고 about폴더의 index.html에도 <a href="/">Home</a> 이라고 추가하면 경로를 / 로만 설정했는데도 TEST(메인프로젝트) 폴더의 index.html이 실행된다.
'Spec UP - Frontend > 패스트캠퍼스_FrontEnd' 카테고리의 다른 글
| HTML (문법/빈태그/inline/block/태그/주석/전역속성) (0) | 2021.10.16 |
|---|---|
| 브라우저 스타일 초기화 (0) | 2021.10.16 |
| codepen.io / HTML,CSS,JavaScript 학습 (0) | 2021.10.16 |
| VS Code Extensions / 단축키 (0) | 2021.10.16 |
| 프론트엔드/기본개념/특수문자 정리 (0) | 2021.10.16 |
댓글