[Worksheet-220415] HTML, CSS, JS

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Ch 3. 무작정 시작하기

Doctype(DTD)


<!DOCTYPE html>

문서의 HTML 버전을 지정
마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다.

HTML, HEAD, BODY

<html>
  <head>
  </head>
  
  <body>
  </body>
</html>

<html>

문서의 전체 범위
HTML문서가 어디에서 시작하고 끝나는지 알려준다.

<head>

문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 눈에 보이지 않는 정보이다.

<body>

문서의 구조를 나타내는 범위
웹페이지의 보여지는 구조를 작성하는 범위

CSS, JS 연결하기

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

html 파일에서 head 태그(정보) 안에 link 태그로 css 파일과 연결해준다.

<script src="main.js"></script>

html 파일에서 head 태그(정보) 안에 script 태그로 js 파일과 연결해준다.

정보를 의미하는 태그 살펴보기

<title>
HTML 문서의 제목을 정의
웹 브라우저의 탭에 표시된다.

<title> Bang </title>

<link>
외부 문서를 가져와 연결할 때 사용.
- rel
  가져올 문서와의 관계
- href
  가져올 문서의 경로

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

<style>
스타일(CSS)를 HTML 문서 안에서 작성하는 경우 사용

    <style>
        div {
            text-decoration: underline;
        }
    </style>

<script>
1. 자바스크립트 파일을 가져오는 경우에 사용
2. 자파스크립트를 HTML 문서 안에서 작성하는 경우에 사용

<script src="main.js"></script>

<meta>
HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공
위의 태그들로 표현하지 못하는 정보들을 작성할 때 사용

<meta name="" content="">

화면에 이미지 출력하기

<img src="./images/hi.png" alt="">`

src
이미지 경로
alt
대체 텍스트

상대 경로와 절대 경로

상대 경로
- ./
  주변에서 찾기 (생략 가능)
- ../
  상위 폴더
절대 경로
- http(https)
  원격
- / (//)
  루트 경로

페이지 나누고 연결하기

<a href = "url">TEXT</a>

<a>
해당 경로로 이동하게 한다.

if 폴더 경로만 입력해주어도 브라우저는 자동으로 index.html 파일을 찾게 된다.

개발자 도구 사용하기

브라우저에서 제공하는 개발자 도구(F12)를 사용해보자.
HTML, CSS의 내용을 확인해볼 수 있다.

Elements
- styles
  element.style {}
  임시로 css 스타일을 적용해볼 수 있다.
  -computes
  기능들이 어떻게 적용되어 있는지 수치화 되어 있는 모습 을 확인할 수 있다.

Ch 4. 웹에서 시작하기

Codepen.io

로컬에 개발환경을 따로 구축하지 않아도 온라인에서 코드를 편집할 수 있는 도구

브라우저 스타일 초기화

브라우저에서 기본적으로 제공하는 CSS 규격을 초기화해서 개발하도록 하자.

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

resetcss

Emmet

What is Emmet?

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.
-위키백과

Author And Source

이 문제에 관하여([Worksheet-220415] HTML, CSS, JS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aurpo1/Worksheet-220415-1

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