[Worksheet-220415] HTML, CSS, JS

9825 단어 WorksheetWorksheet
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 코드를 생성해 준다.
-위키백과

좋은 웹페이지 즐겨찾기