HTML、CSS HTML、CSS

7417 ワード
preWecode CSS html テキストリンク
HTML、CSSって何?なんで?
ハイパーテキストタグ言語(HTML)とは?

  • Web情報をロードし、構造設計を行う役割

  • Webページを作成するためにブラウザで操作する言語です.
    HTMLの基本構造は以下の通りです.
    • <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
</head>
<body>
 우리 눈에 보여지는 부분
</body>
</html>
    <head> :  문서를 정의하는 데이터가 위치함
<title> : 웹 브라우저의 툴바, 즐겨찾기, 검색 엔진의 결과 페이지에 제목으로 표시되는 부분
<body> :  웹 브라우저를 통해 보이는 내용 /문서에 표시되는 컨텐츠가 위치함
    タグとは?
    情報の形式を定義することを意味します.ラベルの基本構造は以下の通りです.
    <태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>
 <link href="style.css" rel="stylesheet"> 컨텐츠 </link>
    なぜHTMLが必要ですか?
    ページをきれいにするためには、HTMLを使わずにページ全体を画像にすることができます.しかし、これはWebの核心哲学のアクセス性(accessibility)に違反している.誰もがネットワークを通じて情報にアクセスできるはずです.
    たとえば、
    視覚障害のある人は、スクリーンリーダーなどのプログラムを使って聴覚的に情報に触れる.そのため、これはHTMLが必要な重要な原因の一つです.
    https://opentutorials.org/course/3084/18488
    積層スタイルシートとは?
  • HTMLのビジュアルデコレーション
    • なぜCSSが必要ですか?
  • 情報(HTML)とデザイン(CSS)を分けることができます.
    (HTMLからデザインを分離することで、スクリーンリーダーは視覚障害者がHTMLを説明するのに役立ちます.)
  • 情報は変更せず、設計のみ変更できます.
  • 検索エンジンはHTMLの解析を許可するので、より多くのアクセス者を引き付けることができます.
  • CSSはこれらの問題を同時に解決することができ、ウェブページ情報とスタイルを分離することができ、メンテナンスを簡素化することができる.
    HTML、CSSとJavaScriptの関係
    HTMLで骨組みを積み、CSSで飾り、JavaScriptで移動

  • HTML:情報を含むWebページのスケルトンを設計します.

  • CSS:骨組みに服を着て飾ります.

  • JavaScript:スケルトンとデザインにダイナミックを追加します.
    https://blog.naver.com/dartplus/220482039444
    • .html, .css, .jsの3種類のファイルを接続する方法
  • htmlファイルheadラベルには、cssがlinkラベル、jsがscriptラベルを挿入します.
  • この方法は、「html要素にcss、jsを参照する」
    • を意味する.
      <head>
    <link href="style.css" rel="stylesheet">
    <script defer src="main.js"></script>
  </head>

    linkタグに明記する必要がある必須属性は、現在のドキュメントと外部リソースとの関連を示します.検索エンジンは、リンクに関する詳細情報を収集し、ユーザーにより正確な検索結果を与えるために使用します.
    注意:https://brunch.co.kr/@coveryou/14
    http://tcpschool.com/html-tag-attrs/link-rel
    サーブレットの構成(四)
    開発者向けワークフロー・オーケストレーションツール