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

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 3. 무작정 시작하기 입니다.

패스트캠퍼스 Online 강의를 통해 프론트엔드를 학습하고 있습니다.
본 블로그의 TIL은 해당 강의에 대한 내용 정리를 목적으로 합니다.

Docytype(DTD)이란
DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도로 사용됩니다.
여기서, 마크업 언어란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지를 말합니다.
HTML1, HTML2, HTML3, HTML4, XHTML, HTML5(표준)

<!DOCYTPE html> <!--문서의 HTML 버전을 지정-->
<html> <!--문서의 전체 범위 -->
  <head> <!--문서의 정보를 나타내는 범위-->
    	
  </head>
  <body> <!--문서의 구조를 나타내는 범위-->
    
  </body>
</html>

HTML, HEAD, BODY
<html></html>태그는 문서의 전체 범위를 정해주며, HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을 합니다.
<head></head>태그는 문서의 정보를 나타내는 범위이며, 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은, 웹페이지의 보이지 않는 정보를 작성하는 범위입니다.
<body></body>태그는 문서의 구조를 나타내는 범위이며, 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위입니다.
CSS, JS 연결하고 정보를 의미하는 태그 살펴보기

<!DOCTYPE html>
<html lang="ko"> <!--지정할 문서의 언어(ISO 639-1)를 명시하는 HTML 속성-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
  <link rel="icon" href="./facicon.png">
    <!--Favorite Icon을 줄여서 Favicon(파비콘)이라고 부릅니다.
     HTML Favicon를 적용할 때는 이름을 facicon이라고 지정하는 것을 권장하며, 
     facicon.ico 혹은 favicon.png 파일이 주로 사용됩니다.-->
  <script src="./main.js"></script> 
</head>
<body>
  <div>Hello world!</div>
</body>
</html>

HTML에 CSS를 연결하기 위해서는 문서의 정보를 나타내는 범위인 <head></head>태그 안에 <link rel="stylesheet" href="파일명.css">를 기입해야 합니다.
- rel(Relationship)은 가져올 외부 문서(대표적으로 CSS 파일)가 현재의 HTML과 어떤 관계인지를 명시하는 HTML 속성(Attribute)입니다.
- href(Hyper Text Reference)는 브라우저가 참조할 특정 경로(Path)를 지정하는 HTML 속성(Attribute)입니다.
HTML에 JS를 연결하기 위해서는 문서의 정보를 나타내는 범위인 <head></head>태그 안에 <script src="파일명.js"></script>를 기입해야 합니다.
- src(Source)는 사용할 소스 코드(파일)를 지정하는 HTML 속성(Attribute)입니다.
<meta />는 HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게 제공합니다.

  <meta charset="UTF-8"> <!--문자인코딩 방식-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

name="viewprot"에서 name은 정보의 종류를 뜻하며, 모바일 장치에서 웹 페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 확대/축소 정도를 결정하겠다 등의 정보를 content에 기재합니다.
charset(Character Set)은 문자 인코딩 방식을 지정하는 HTML 속성(Attribute)입니다. 문자 인코딩(Encoding)이란 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말하며, 웹에서는 UTF-8의 사용을 권장합니다.

화면에 이미지 출력하기

<!DOCYTPE html> 
<html> 
  <head> 
    	
  </head>
  <body> 
    <img src="./images/logo.png" alt="starrypro">
  </body>
</html>

alt(Alternate)는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부릅니다. img태그의 필수 속성으로서 반드시 기입해야합니다.

상대 경로와 절대 경로
상대 경로
./(생략가능): 현재 속해있는 위치 주변에서 찾습니다
.../ : 현재 속해있는 위치에서 상위 폴더로 올라가서 찾습니다.
절대 경로
http (https) : 해당 주소를 가리킵니다.
/ :최상위 경로를 의미합니다.

Author And Source

이 문제에 관하여(Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@starrypro/Part-1.-HTMLCSSJS로-만드는-스타벅스-웹사이트-3k9c2jq1

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

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

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 3. 무작정 시작하기 입니다.

패스트캠퍼스 Online 강의를 통해 프론트엔드를 학습하고 있습니다.본 블로그의 TIL은 해당 강의에 대한 내용 정리를 목적으로 합니다.

Author And Source

좋은 웹페이지 즐겨찾기

패스트캠퍼스 Online 강의를 통해 프론트엔드를 학습하고 있습니다.
본 블로그의 TIL은 해당 강의에 대한 내용 정리를 목적으로 합니다.