コード状態第1週/HML

▼Achivement Goals/htmlベース

𕼧CSSを適用し、JavaScriptを使用して開発するためにProgrammableを作成することができます.
HTMLはMarkup言語であることが理解できます.
-自分の言語で「構造的な言語を表す」という意味を表すことができます.
HTMLの構造や構文を理解して適用することができます.
よく使われるHTML要素を理解し、説明します.
動的Webアプリケーション開発のためのHTML構造を作成することができます.

📝summary

htmlはブラウザで実行できるファイルで、寸法言語で構造的にタグで表示されます.
マークには大きなhead bodyがあります.
headは詳細に説明され、bodyはユーザーが見たタグで構成されています.

サマリ
html-Web構造を担当する寸法言語
(データがどのようにどこに置かれているかを示す言語です.
字の用途と目的を理解しなければならない.
css-デザイン要素を可視化するためのスタイルシート言語
js-簡単なWebページをプログラムに変え、ユーザーと対話できるプログラミング言語です.

ex)
子犬の家を建てると言ったとき.
家屋の構造を簡単に描く-html
壁の色とマテリアルを記録-css
電球を取り付け、夜に開く-js

html要素
htmlはhtmlの基本コンポーネントであり、タグのセット(tag:不等号(<>)からなる)

🔥必要なラベル

div vs span

<div>한줄</div>
// 한줄
// 한줄
<span>단어</span>
// 단어단어

div 태그는 블록 레벨 요소로 줄바꿈이 일어나 한줄을 차지한다
웹사이트 화면 전체의 레이아웃을 잡을때 효과적으로 사용되고
=> Float속성을 사용하여 div태그로 전체 레이아웃을 조정할수있다

span 태그는 인라인 엘리먼트로 컨텐츠 크기만큼 공간을 차지한다

ul/ol

<ul>
    <li>변수</li>
    <li>타입</li>
    <li>함수</li>
</ul>

<ol>
    <li>변수</li>
    <li>타입</li>
    <li>함수</li>
</ol>
ul : Unordered list 순서가 없는 데이터를 표현하는 경우에 적절
ol : Ordered list 순서가 있는 데이터를 표현하는 경우에 적절

a:リンク

を挿入

<a href="동작"></a>
<a href="https://www.naver.com/">네이버</a>
클릭하면 미리 지정한 URL로 이동할 수 있다

img:挿入画像

<img src="profile.png" width="500" height="300">
src: 이미지 경로
width: 이미지 가로 크기
height: 이미지 세로 크기

textbox
radio-1つしか選択できません
checkbox-複数選択可能
textarea-改行を許可(開くラベルと閉じるラベルが必要)
ボタン-ボタン実装
上記の機能を使用して、簡単なログインフォームを作成できます.

📖 シンボルマーク

人々がウェブページを見ると、タイトルと内容が簡単に区別されます.
コンピュータはどのマークがどのような機能を持っているかを区別するのが難しい.
効果的にインポートできません.
この問題を解決するために、心理マークを使いました.header:ページまたは一部のタイトル(タイトル)を指定します.nav:ページメニューを作成するときに使用するラベルは、一般的に内部の無秩序なリストを表すulラベルとリスト要素を表すliラベルを使用します.aside:クイックメニューやスクロールボタンなど、コンテンツやページの周辺をマークする要素section:複数の中心コンテンツを囲む空間を示すタグarticle:複数の段落のラベル、独立した内容を定義する際に使用される、文字の多い部分を意味するfooter:Webページの下部に作成するときに使用されるラベルで、主にレイアウトライト領域を表現するために使用されます.