Webプログラミング#1[21.28]

24802 ワード
html 属性値 ツールバーの タブ テキストリンク
Webプログラミング入門
[学習内容]
html
<!DOCTYPE html>  html5 최신 문법을 사용하겠다는 의미로 처음에 무조건 작성
htmlはタグ、属性、属性値から構成されます.
<開いているラベル属性=属性値>
[head]:簡単な要約/Webサイトでは表示されません
<head>
<meta charset ="utf-8(기본값)"> : 문자를 세팅한다는 의미
<meta name = "description" content =""> : 한줄 요약 정보
<meta name ="keywords" content=""> : 태그 역할을 수행
<meta name = "author" content=""> : 소유자 이름 작성
<title>HTML, CSS Tutorial</title> : 상단 탭 이름 설정
<link rel="shortcut icon" 
     type="image/icon" sizes="32x32" 
     href="favicon.ico"> : 상단 탭 아이콘 넣기
</head>
[body]:Webサイトの情報源
｣a:サイトでメニューをクリックしたときに移動するタグ
｣img:画像のラベルを入れる
｣ビデオ:ビデオのラベルを入れる
｣iframe:youtube動画を挿入可能
｣audio:オーディオのラベルを入れる
｣h 1-h 6:数字順に使用すること
｣p:本文の内容は記入/スペースが多く、一度だけ書く
»span:デザインに適用したい部分を設定し、単語としてマークします.
｣mark:特定の単語を強調する
｣ol:順序付きリスト
｣ul:順番のないリスト
｣li:ol,ulを併用
⭐️ button
｣form:ユーザーが情報を入力するスペース
<a href="#" target="_blank"> </a> : 새탭열기
<img src ="#" alt ="">:웹접근성을 위해 alt 부분 꼭 작성
<img src ="#" alt ="" width="" height="">:이미지의 비율이 변형이 오지만 
					이미지가 잘리지는 않음
<ul>+<li>+<a> : 네비게이션 버튼을 만들 때 사용
<button type ="submit"> : 서버에게 내용을 전달할 때 사용
<video src="#" controls autoplay muted>:자동재생할 때 muted 필수
⭐️ label
｣input:ユーザーが情報を入力した場所(フォームとともに使用)
⭐️ text area
｣選択+オプション:併用
<label for = "n">
	<input type="text" id ="n" placeholder="" required>
 : for과 id가 동일하면 포커스가 맞춰짐
 : placeholder ➡️ 안내문자
 : required ➡️ 필수로 입력해야 하는 정보에 작성
 <label for = "num"></label>
<input type="number" id = "num" min="10" max="40" step="n">
: min, max ➡️ 숫자의 시작점을 설정, 최대 숫자 지정
: step ➡️ n씩 숫자가 증가
<label for = "upload">파일업로드</label>
<input type="file" id = "upload" accept = "imgae/png, image/jpg, imge/gif">
: accept : 파일 업로드 확장자를 지정할 수 있다
<label for = "n">
	<input type="checkbox" or "radio" id ="n" name="" value="">
: checkbox ➡️ 중복체크 가능
: radio ➡️ 단일체크
: name, value ➡️ 데이터를 서버에 전달할 때 필요함 무조건 같이 작성
」表、タイトル、thead、tr、th、thbody、tr、td、tfoot:表の作成
｣aside:本稿との関係性が悪い内容
｣div:任意の領域を作成するための共通計算(ex、リビングでソファーを置く場所を指定)
<table>
<caption> : 표 제목을 알리는 용도
<thead> ➡️ 표 상단의 내용 (ex:상품, 색상, 가격)
<tr>
<th>상품</th>
</tr>
<tbody> ➡️ 상품 상세 정보
<tr>
<td>맥북 프로 16인치</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td> : 열을 병합
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 가격</td> : 행을 병합
</tr></tfoot>
</thead></table>
[💻 Webページの上部
<header>	
<h1>
   <a href="#"><img></a>
</h1>
   <nav>
    <ul>
     <li><a></a></li>
    </ul>
   </nav>
</header>
[💻 Webページの本文]
<main role="mian"> : 익스플로러를 위해 role="main"을 작성해야 함
	<section>
		<h2>Service</h2>
	</section>
	<section>
		<h2></h2>
	</section>
    	<article>
		<h2>Article title</h2>
		<p>To the World</p>
	</article>
	</main>
[💻 Webページの下部
<footer>
[📝 終了]
授業中、先生は私に簡単な比喩をたくさん話してくれました.
今日の内容にはあまり難しい部分はありません.
途中でrowspanを使用して集計カラムのコードを記述します.
適用されません.index.htmlサイトを閉じ、コードを再起動して削除
書き直してよくマージしました.エラーが発生した場合、後でコードのリフレッシュと書き換えの方法がよく使われます.
videoファイルautoplay muddは自動再生できますが、audioはmuddプロパティを使っても自動再生できない点が少し混同されています.
ビデオ、audioはloopプロパティを使用できます.
残りの時間に、もっと丁寧にメモと整理をして、丈夫な骨格を作ります.
ジェネレータを作成-秒単位でアプリケーションを展開する
[DB]mariadbアカウントの作成と承認