Web Development (3)

33322 ワード
html テキストリンク

Web Development (3)


1.HTML(1):ラベル

태그 
태그 : <태그> 내용 </태그> 
= 요소(element) : <요소> 내용 </요소>
ㅤ
<시작(열린)태그>  </종료(닫힌)태그>
부모요소 자식요소 
<태그>
  <태그> 내용 </태그>
</태그>
상위(조상) 요소 하위(후손)요소条件親/子のすべての要素빈 태그閉じていないタグ
HTML 1-5:スラッシュX
XHTML/HML 5:スラッシュO속성과 값 
<태그 속성 = "값"> 내용 </태그>
속성(attribute), 값(value)
*空のラベルには、原則として属性と値を含める必要があります.
*各ラベルには必須の属性があります
*
改行ラベル-空のラベルで属性X
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

2.HTML(2):文字と枠


1)inline(文字)span 
<span>Hello</span>
<span>World</span>
本質的には何も表示されません
コンテンツ領域の設定
*注意:を使用する場合の改行文字はスペースです(アルファベットとみなされるため)
要素の主な水平スタック
横寸法と縦寸法は、コンテンツを含むサイズに自動的に縮小されます.
文字はスタイル属性として水平、垂直寸法を指定できません
同様に、外部余白(margin)と内部余白(padding)は適用されません.
反応しない!
<span style="width: 100px;">Hello</span> 
<span style="height: 100px;">World</span>
ㅤ
<span style="margin: 20px 20px;">Hello</span> 
<span style="padding: 20px 20px;">World</span>
*ブロック要素は行の要素には適用されません.
ㅤㅤ
ㅤㅤ
2)ブロック(枠)div 
<div>Hello</div> 
<div>World</div>
コンテンツを設定するための領域(実際には何も表示されません)
上から下へ垂直に積み重ねたフィーチャー
親要素のサイズに自動的に幅を追加(幅を最大化)
+inlineと同様に縦に減少
スタイルプロパティは、水平(width)、垂直(height)サイズを指定します.
外部マージン、内部マージンにも適用されます!
適用!
<div style="width: 100px;">Hello</div> 
<div style="height: 100px;">World</div>
ㅤ
<div style="margin: 20px 20px;">Hello</div> 
<div style="padding: 20px 20px;">World</div>
*ブロック要素のブロック/行の要素が使用可能です.
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

3.HTML(3):キー要素


1)基本
<html> : 문서의 전체 범위 
<head> : 문서의 정보 (제목, 설명, 사용할 파일 위치, 스타일 등 보이지 않는 정보)
<body> : 문서의 구조 (로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등 보여지는 구조)
2) !DOCTYPE
<!DOCTYPE html> : 문서의 HTML 버전을 지정 (HTML5)
<!DOCTYPE html PUBLIC> : 문서의 HTML 버전을 지정 (XHTML)
3) meta
<meta> : HTML 문서(웹페이지) 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공
<meta charset="UTF-8" /> : 문자인코딩 방식
<meta name="author" content="ANTHONY" /> : 정보의 종류와 값
<meta name="viewport" content="width=device~ /> : 정보의 종류와 값
4) title
<title> : HTML 문서의 제목
5) link
<link> : 외부 문서를 가져와 연결할 때 사용
<link rel="stylesheet" href="./main.css" />
<link rel="icon" href="./image123.png" />
rel: 가져올 문서와의 관계
href: 가져올 문서의 경로
6) style
                  [HTML문서 안에서만 작성]
<head>
  <style> : HTML 문서의 제목
    div {
      color: red;
      }
  </style>
</head>
7) script
1) 자바스크립트(JS)파일 가져오는 경우
    <script src="./main.js"></script>
2) 자바스크립트(JS)를 HTML문서 안에서 작성하는 경우
    <script>
      console.log('Hello world!')
    </script>
8)その他の重要要素
<div> : 구분을 위한 요소 (블록)
<h1> : heading, 제목, 1~6, 숫자가 작을수록 더 중요한 제목
<p> : paragraph, 문장, 단일 글자가 아닌 블록요소 (블록)
ㅤ
<img> : (필수속성: scr, alt) (인라인)
<img src="img/weather.jpg" alt="12호 태풍" />
src : 삽입할 이미지 경로
alt : 삽입할 이미지 이름
ㅤ
<ul> : 순서가 필요없는 목록의 집합 (블록)
<li> : 목록 내 각 항목, 리스트 (블록)
ㅤ
<span> : 특별한 의미 없는 구분 요소 (인라인)
- head <style> span {color: red;} </style>
- body <span>가나다</span>
ㅤ
<br/> 줄바꿈 요소 (인라인)
9) a
<a> : anchor, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">Google</a>
href: 링크 URL
target : 링크 URL의 표시(브라우저탭)위치
_blank = 새탭에서 열기
10) input + label
<input> : 사용자가 데이터를 입력하는 요소 (인라인-블록 요소)
<input type="text" value="Anthony16" />
type = 입력받을 데이터의 타입 / text입력
value = 미리 입력된 값
ㅤ
<input type="text" placeholder="이름을 입력하세요" />
placeholder = 사용자가 입력할 값(데이터)의 힌트
ㅤ
<input type="text" disabled />
입력요소 비활성화
ㅤ
<label>
  <input type="checkbox" checked /> Apple
</label>
label : 이름 붙이기 가능 (인라인)
type = 체크박스
checked = 이미 체크된 상태로 화면 출력
ㅤ
<label>
  <input type="radio" name="fruits" /> Apple
</label>
<label>
  <input type="radio" name="fruits" /> Banana
</label>
type = 체크 여부 같은 그룹(name이 같은)에서 택1
11)table(表要素そのもの)
<table>
  <tr>
    <td>A</td> <td>B</td>
  </tr>
  <tr>
    <td>C</td> <td>D</td>
  </tr>
</table>
출력
A B
C D
table : 표 요소 (행과 열의 집합)
tr : 행 요소 (row)
td : 열 요소 (column)
12)コメント
<!--Comment-->
ctrl + /
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ
ㅤㅤ

4.HTML(4):エンベロープ(Wrapping)

랩핑(Wrapping)特定の文字にのみ影響するCSSスタイル

5.HTML(5):グローバル属性

전역속성領域全体で使用可能なすべてのプロパティ
<태그 title="설명"></태그> : 요소의 정보나 설명을 지정
<태그 style="스타일"></태그> : 요소에 적용할 스타일 지정
<태그 class="이름"></태그> : 요소를 지칭하는 중복가능한 이름 (.red)
<태그 id="이름"></태그> : 요소를 지칭하는 고유한 이름 (#abc)
<태그 data-이름="데이터"></태그> : 요소에 데이터를 지정 (JS에서 사용)
ex)
HTML
<div data-frutit-name = “apple”>사과</div>
<div data-fruit-name = “banana”>바나나</div>
ㅤ
JS
const els = document.querySelectionAll(‘div)
els.forEach(el => {
	el.dataset.fruitName(하이픈 허용하지않음)
	console.log(el.dataset.fruitName)
})
(説明)
器名がels(elements略)で割り当てられた値はdocument/querySelector Allですべての要素を検索し、見つかった要素はdiv/elsで使用されます.各コンテナで見つかった要素についてデータ処理を繰り返します.繰り返した各要素にはelという個別のコンテナが含まれ、内部使用に使用されます.各コンテナでデータセットデータを抽出するコンセプトでfruitNameの内容をコンソールに記録し、作成したコードをコンソール->ドキュメントクエリーユニットに書き込みます.html内のすべてのdivタグをallで検索し、見つけた要素をels内の複数の単語に含め、forEachで繰り返し検索し、datasetのコマンドで実際のデータ名foultNameのデータを抽出し、consoleウィンドウに1つずつ記録するJSコード.
JSからHTMLを取得する際に以下の内容にナビゲートできないという問題を解決する
<script defer src = “./main.js”></script>
defer속성: HTML구조가 준비된 후 (문서분석이후) js 해석
四種類のCSS声明
1)link romain.css
2)styleラベルを使用してラベルに直接cssを入力する
3)styleプロパティの使用
4)以降본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.
Cocos 2 d-x学習(三):タッチスクリーンイベント(単点タッチスクリーン)
Unityモバイル開発適応スクリーン