Part 1. HTML/CSS/JSで作成したスタバサイト

12398 ワード
テキストリンク

Part 1. HTML/CSS/JSで作成したスタバサイトCh 3。無計画に始める。


クイックチャネルオンラインカリキュラムでフロントエンドを学習します.このブログのTILは、レッスン内容の整理を目的としています.
  • Docytype(DTD)は
    DOCTYPE(DTD,Document Type Definition)は、注釈言語でドキュメントフォーマットを定義し、WebブラウザがどのようなHTMLバージョンの解析でページを理解すべきかを示すために使用されます.
    ここで、寸法言語は、ドキュメントやデータの構造、例えばタグを記述する言語です.HTML1, HTML2, HTML3, HTML4, XHTML, HTML5(표준) 
    • <!DOCYTPE html> <!--문서의 HTML 버전을 지정-->
<html> <!--문서의 전체 범위 -->
  <head> <!--문서의 정보를 나타내는 범위-->
    	
  </head>
  <body> <!--문서의 구조를 나타내는 범위-->
    
  </body>
</html>

  • HTML, HEAD, BODY<html></html>タグは、ドキュメントの全範囲を決定し、HTMLドキュメントがどこから開始され、どこから終了するかを示すことができる.<head></head>タグは、Webブラウザが解析するWebページのタイトル、説明、使用するファイルの場所、スタイル(CSS)、Webページの非表示情報を含むドキュメントの情報を表します.<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>

  • CSSをHTMLに関連付けるには、文書情報を表す範囲<head></head>ラベルに<link rel="stylesheet" href="파일명.css">を記入する必要があります.
  • rel(Relationship)は、インポートする外部文書(CSSファイルを表す)と現在のHTMLとの関係を示すHTML属性(Attribute)です.
  • href(Hyper Text Reference)は、ブラウザが参照する特定のパスを指定するHTML属性(属性)

  • JSをHTMLにリンクするには、文書情報を示す範囲<head></head>ラベルに<script src="파일명.js"></script>を記入する必要があります.
  • src(Source)は、使用するソースコード(ファイル)を指定するHTML属性(属性)
  • <meta />検索エンジンまたはブラウザには、HTMLドキュメント(Webページ)の作成者、コンテンツ、キーワードなどの複数の情報が提供されます.
    •   <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は情報の種類を表し、モバイルデバイス上のウェブページ幅をモバイル環境の水平幅と一致させるか、コンテンツにスケーリングの程度を決定するなどの情報を含む.
  • charset(Character Set)は、文字符号化方式を指定するHTML属性(属性)である.文字コード(Encode)とは、文字や記号をコンピュータで利用可能な信号にすることを意味し、WebではUTF-8の使用を推奨する.
  • 画面に画像を出力
    • <!DOCYTPE html> 
<html> 
  <head> 
    	
  </head>
  <body> 
    <img src="./images/logo.png" alt="starrypro">
  </body>
</html>
    alt(Alternate)画像を代替テキスト(画像が出力できない場合は出力するテキスト)と呼びます.imgタグの必須属性を入力する必要があります.
  • 相対パスと絶対パス상대 경로./(省略可能):現在の場所の周囲を検索
    .../: 現在の場所から親フォルダに移動し、参照します.절대 경로http(https):アドレスを指します.
    /:トップ・パスを示します.
    • 反復バイナリフォーマットコピー[プログラマ]
    マシンラーニングファイル格納コード