Junior開発ログ-HTML編#1

24802 ワード
テキストリンク

📘 今日習ったのは?


合成HTMLドキュメント


拡張子付きファイルと合成/読み取り専用タイプを使用してドキュメントを定義する
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="description" content="Web Tutorial">
	<meta name="keywords" content="html, css, tutorial, web">
	<meta name="author" content="AeJin Seok">
	<title>HTML, CSS Tutorial</title>
	<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico"> 
</head>

タブ


<開いているラベル>コンテンツ
<開いているタグ属性=属性値>
📌 タグを構成する基本要素
웹사이트의 간단한 한줄 요약 정보를 나타낼 때
<meta name="description" content=" ">

블로그의 태그와 같은 역할 수행
<meta name="keywords" content=" ">

문자 정의시 사용되는 기본적인 코드
<meta charset>

눈에 보이지 않는 웹사이트 정보
<head></head>

눈에 보이는 웹사이트 정보
<body></body>

본문 정보
<p></p>

브라우저 공백
<br>

단어만 표기 (디자인을 적용할 경우)
<span></span>

특정 단어 강조
<mark></mark>

목차가 있는 본문
<ol>
   <li> </li>
</ol>

목차가 없는 본문
<ul>
   <li> </li>
</ul>

파비콘 (확장명 ico)
<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">

주석 표시
<!— 태그 정보 입력 —>
📌 Webアクセス性/Web規格
  • Webアクセス性:alt情報を入力してください!
    • 視覚障害者およびユーザに画像情報を提供する
    <img src="https://pbs.twimg.com/profile_images/1377273173775806470/OiMe9so2.jpg" alt="자몽 이미지">
  • Web規格
    • 구글 검색 엔진에 노출될 확율이 높아짐
<제목>코로나 종결!</제목> 

가장 중요한 정보를 담는 태그 
하나의 문서에서 한번만 사용 
대부분 이미지(회사로고)로 처리가 됨 
<h1>기업명 또는 서비스명</h1>

<h1>→<h2>→<h3>→<h4>→<h5>→<h6> 순으로 작성해야함!
    📌 ユーザー受信時に使用するタグ
    for 속성값 = id 속성값 동일하게 매칭하는 것인 point!
<label for="name">이름</label>
<input type="text" id="name">

글자수 제한, 보통 비밀번호에 많이 사용
<input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" required minlength="6" maxlength="12">

min,max 사용하여 시작과 끝 정함 / step 코드로 얼마씩 증가할 것인지 설정 가능
<input type="number" id="num" placeholder="숫자만 입력" required min="10" max="100" step="5">
    📌 表の作成時に使用するタグ
    <td rowspan="2">아이패드 프로 12인치</td>
<td>퍼플</td>
<td>60만원</td>
</tr>
<tr>
<td>블루</td>
<td>50만원</td>
</tr>
→ rowspan="2" : 같은 항목은 하나의 항목으로 경합


<tfoot>
<tr>
<td colspan="2">총 가격</td>
<td>2천만원</td>
</tfoot>
→ 상품, 색상 칸 합칠때 사용

    ホームページを作成するときに知っている良いTip


    htmlヘッダーフッター主検索→複数のページ組織方式が出現!
    상단 본문 하단 3가지로 구성

<header></header> 상단 영역에 해당하는 태그, <h1> <nav> 태그 사용

<main role="main"></main> 본문을 만들때 사용하는 태그, 하나의 문서에서 한번만 사용됨 / role="main" : 익스플로럴에서 지원불가여서 사용함, 태그의 역할이 메인이다라는 것 알려줌

<section><h2>Serviece</h2></section>  메인태그 안에서 사용해도 무방

<article></article> 영역을 나타냄 <p>태그로 본문 내용 넣을 수 있음

<aside></aside> 본문 정보와 관계성이 떨어지는 내용을 나타냄

<footer></footer> 웹사이트에서 가장 하단에 들어가는 정보

<div></div> 작은 공간을 만들때 사용되는 태그, 임의의 작은 구역들을 나타내는 태그, 가장 많이 사용하게 됨

<form></form> 사용자한테 어떤 입력받은 정보를 담아내는 태그 , label, input 태그가 포함됨

    難しいのは？


    Web標準、Webアクセス性に対する理解が低い

    💡 解決策!


    https://nuli.navercorp.com/guideline/s01/g01
    NULY Webサイトの適切な例を参照すると、Web標準とWebアクセス性の理解が向上します.

    🌱 学習を完了し、


    生活コードの授業を聞いて、習ったことのない内容がたくさんあります.Web規格やWebアクセス性に興味があり、ホームページ作成時に知っておくと良いヒントがたくさんあります.今日の受講は構造化されたWebページを実現することができ、今後どのようなWebページを実現するかに役立ちます.どのようなページを作るかはもっと深く考える必要があります.ブログに記録されていて、復習の効果が良さそうです.記録の重要性を改めて注意した.
    [HP]PHPファイル!
    場所分雷-復習9