前の4日間

14519 ワード
htmlベース Box Model CSSベース PREコース テキストリンク

TIL


html基本構造と基本文法

	<!DOCTYPE html>                         <!-- 이것은 주석이고  이 줄은 이문서가 html 문서임을 명시합니다 -->
	<html>                                  <!--html 시작 태그로 문서 전체의 틀을 구성 -->
    	<head>                              <!-- head 태그는 문서의 메타 데이터를 선언-->
          	<meta charset="utf-8">
        	<title> page title</title>      <!-- 문서의 제목 브라우저의 탭에 보여짐-->
    	</head>                             <!-- </태그이름>은 해당 태그가 끝났음을 의미합니다. -->
    	<body>                              <!-- body 태그는 문서의 내용을 담는 곳입니다.-->
        	<h1> Hello Wolrd</h1>           <!-- heading을 의미하며, 크기에따라 h1부터 h6까지 있습니다.-->
        	<div>Contents here              <!-- content division을 의미하며 줄바꿈됩니다.-->
            		<span>Here too!</span>      <!-- 줄바꿈이 없는 content 컨테이너-->
        	</div>
    	</body>
	</html>
  • <div>と<span>違い(前者は1行消費、後者は所与の領域のみ消費)
  • <ol>シーケンス表あり<ul>シーケンス無関係リスト<li>単一リストの使い方
  • 複数入力タイプ
    • <div>
	Name <input type="text" >
</div>
<div>
    Password <input type="password" >
</div>
<div>
	<input type="checkbox" > 이것은 체크박스
</div>
오늘은 날씨가 좋은가요?
<div>
	<input type="radio" name="choice" value="Yes"  > Yes
  	<input type="radio" name="choice" value="No"  > No
</div>
적고 싶으신 말이 있으시다면 여기에
<div>
<textarea>

</textarea>
</div>
<button>
	send
</button>
    Name
    Password
    チェックボックス
    今日は天気がいいですか.
    Yes
    No
    書きたいなら、ここに書いてください.
    send

    css基本要素とボックスモデル

    body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
    body => selector{ }=>宣言ブロックdisplay: flex;=>宣言display=>属性名flex=>属性値;=>区切り記号の宣言
  • エロ
    • .box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}
  • フォント
    • .emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
  • 大きさ
    • .title {
  font-size: 24px;
}
    単位は2種類(絶対単位(px,pt),相対単位(%,em,rem,ch,vw,vh)=>
  • その他の造形
  • 太さ:font-weight
  • 下線、横線:text-decoration
  • ピッチ:letter-spacing
  • 行間:line-height

    • box model



    すべてのコンテンツには、上図に示すようにボックスで表される独特の領域があります.これらの箱の特性は、改行可能な箱(block)と信頼できるエッジの箱(inline,inline-block)の2つに大きく分けることができます.
    例:<h1>・<p>ブロックボックス<span>inlineボックス

    ボックスアセンブリ


  • border枠線
    • p {
  border: 1px solid red;
}
  • margin外距
    • p {
  margin: 10px 20px 30px 40px;
}
    top・right・bottom・left意味
    p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
    個別のプロパティも使用できます
  • padding内側空白
    • p {
  padding: 10px 20px 30px 40px;
}
  • height高さ
    • p {
  height: 40px;
  overflow: auto;
}

    カセット測定基準



    Box測定基準のデフォルトcontent-boxまたはCode Statesのコースはborder-boxを基準としており、この基準の使用を推奨します.

    今日は


    今日のスケジュールの大部分は個人指導で手配されています.内容自体は、前の過程(1日目から3日目)の残り時間に再度復習して読んだ内容を確認し、ブログで再整理して再確認します.
    ES 6の関数
    Javascript for Moon