HTML/CSS/JS Ch 3~4. 무작정 시작

<!DOCTYPE>
html 버전 지정

<html>
문서의 전체 범위 지정
범위를 지정해주는 이유는
브라우저가 이해할 수 있는 대화수단으로 만들기 때문에
정해진 규칙에 따라서 문서의 범위를 지정해줘야 한다

<head>
문서의 정보를 나타내는 범위
브라우저가 해석해야 할
제목, 설명, 파일위치, Css 같은 정보 작성 범위
눈에 보이지 않는 정보

<body>
문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는
로고, 헤더, 푸터 등 같은 구조 작성 범위
눈에 보이는 정보

<link>
head 태그 안에 작성
보통 css파일 연결시 사용
필수속성: 가져올 문서와 관계(rel), 경로(href)

  <link rel="stylesheet" href="./main.css">

<title>
문서의 제목을 정의

<style>
스타일을 HTML 문서 안에서 직접 작성하는 경우 사용

<script>
JS 파일을 가져오는 경우,
JS를 HTML 문서 안에서 직접 작성하는 경우 사용

  <script src="./main.js"></script>
   
  <script>
  	console.log('hello world')
  </script>

<meta>
추가적인 데이터 작성
종류와 값을 명시

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

경로

상대경로
./ : 현재위치 (생략가능)
../ : 상위폴더
절대 경로
http (https)
/ (최상위경로)

./images/logo.png == images/logo.png
현재 위치 -> images -> logo.png

/images/logo.png
루트폴더 -> images -> logo.png

<a>
브라우저는 기본적으로 index.html를 찾으려고 함

<a href="/">Home</a>
의 형태로 작성하면 최상단 index.html 파일을 찾게됨

Codepen
CODEPEN

style reset
jsdelive
link 태그를 이용하여 초기화 한다

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">

emmet
자동완성 기능

Author And Source

이 문제에 관하여(HTML/CSS/JS Ch 3~4. 무작정 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hungeun/02.-무작정-시작-HTMLCSSJS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML/CSS/JS Ch 3~4. 무작정 시작

Author And Source

좋은 웹페이지 즐겨찾기