開発ログ210628
開発ログの作成初日
memo
学習レポート
コード作成練習
ex1
<!DOCTYPE html>
<!-- 이 문서는 html(ver.5)로 작성된 것임을 나타낸다. 이전 버전의 기능이 일부 호환되지 않을 수 있음.-->
<html>
<!-- HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. -->
<!-- html은 요소(Element)로 이뤄진다. 이는
<여는Tag>
내용(Content)
<닫는Tag> 로 구성된다. -->
<head>
<!-- 헤드태그는 웹페이지와 웹페이지에 표시될 내용의 속성들을 설정하기 위한 영역을 설정해 준다. 아래의 태그들은 가장 기본적인 헤드태그들. -->
<meta charset="utf-8">
<!-- 문서 작성에 사용될 텍스트의 속성(?)을 설정, utf-8은 한국어 표시를 위한 일반적 속성이다. -->
<!-- 태그 옆
[보라글씨 = "초록글씨"]를
속성(Attriubutes)이라고 함. -->
<meta name="description" comtent="Web Tutorial">
<meta name="keywords" conten="html, css, tutorial, web">
<meta name="author" content="Dongsup Lee">
<!-- 위의 세 메타태그의 속성은 각각
웹페이지의 설명, 핵심표제어, 소유자. -->
<title>HTML, CSS Tutorial</title>
<!-- 브라우저상에 나타나는 웹페이지의 탭 제목 -->
<link rel="shortcut icon" type="image/icon" sizes="32x32"
href="favicon.ico">
<!-- 위 요소를 통해 탭옆의 아이콘(파비콘이라 부름)을 표시한다. -->
</head>
<body>
<!-- 내용, 웹페이지에 표시되는 부분 -->
<a href="https://www.naver.com/" target="_blank">네이버</a>
<!-- href뒤의 주소로 연결되는 하이퍼링크를 만든다. target속성을 통해 현재 탭 또는 새 탭에서 연결된 페이지를 열게 한다. -->
<img src="apple.png" alt="사과 이미지" width="100px" height="100px">
<!--
- src뒤에 이미지파일의 위치 또는 url을 입력해 이미지를 불러옴
- alt는 시각장애인을 위한 텍스트 설명을 넣는 공간으로, 웹 접근성을 위해 반드시 입력되어야 한다.(안하면 에러나 경고가 뜬다고 함) 또한 이미지가 잘렸을 때 대체하여 표시되므로 안내역을 하게 된다.
- width:폭, height:높이 / 만약 둘 중 하나만 입력한다면 원본 이미지의 비율에 맞춰 변경된다. (만약 1:1 비율의 이미지파일의 폭만 100픽셀로 변경해준다면 높이도 100픽셀이 된다)
-->
<!--
<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
-->
<!-- headline의 줄임말. 6단계까지 구성할 수 있다.-->
<h1>
<a href="https://www.naver.com/">
<img src="apple.png" alt="메인이미지">
</a>
</h1>
<!-- h1태그는 가장 중요한 정보를 담고있다. 주로 서비스명이나 기업명이 들어가고 메인 페이지로 이동하는 기능을 하이퍼링크를 담는 경우가 일반적 -->
<h2>대분류</h2>
<h3>중분류</h3>
<!-- 이하 h2~h6까지는 정보의 중요도, 계층을 잘 파악하여 일관성 있게 작성하여야 한다. 또한 특정 단계를 건너뛰지 않고 순서대로 사용하는 것이 좋다. -->
<p> 본문 내용 </p>
<!-- 일반적인 본문 내용이 들어감. 텍스트 사이의 공백을 많이 입력해도 한 개만 입력한 것과 같이 출력 -->
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<!-- span: 단어 하나만 표기하거나, 특정 단어에 CSS를 통해 디자인을 적용하려 할 떄 사용 -->
<p><mark>사과</mark>는 사과나무에서 나는 열매이다.</p>
<!-- makr: 사전적 정의 앞의 표제어, 특정 인용문에 대한 강조. -->
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<!-- ol: 순서가 있는 리스트를 작성 li: 리스트의 각 항목 -->
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<!-- ul: 순서 없는 경우(중요도 차이/ 순서가 없는 경우).
리스트 역시 하이퍼링크를 적용하는 경우가 많다.
href뒤의 주소에 #을 넣어두는 것은 개발 도중의 관행적인 임시처리 방법임.-->
<!-- ol, ul 태그 아래 내용은 반드시 li태그로 작성되어야 한다. -->
<button type="button">닫기</button>
<!-- 데이터 통신과 무관한 단순한 버튼 생성 ex)닫기 -->
<button type="Submit">확인</button>
<!-- 백엔드로 제출하는 버튼. -->
<video src="sample.mp4" controls></video>
<!-- 이미지와 마찬가지로 src이하 경로를 지정한다.
controls: 사용자가 영상을 제어할 수 있게 함
autoplay: 웹페이지 접속 시 자동 재생/ 브라우저 자체에서 갑작스러운 소리 재생을 방지하기 위해 음소거 된 영상만 자동재생을 지원하는 경우가 많다. 따라서 자동재생을 원하면
<video src="sample.mp4" autoplay muted></video>
처럼 muted속성을 함께 작성.
muted: 영상 음소거
loop: 영상이 끝난 후 다시 재생
width/height: 이미지와 마찬가지로 픽셀 조절 가능. width:500 처럼 px 단위를 생략해도 정상 작동한다.
-->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/OvuNv834ja0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<!-- iframe태그는 유튜브 영상을 가져올 때 주로 사용한다. 이외에는 보안이슈 때문에 잘 사용하지 않는다. -->
<audio src="sample audio.mp3" controls></audio>
<!--속성은 비디오 대체로 비슷하다.
역시 크롬과 같은 일반적 브라우저의 경우 자동재생은 기본적으로 안됨.
폭, 높이 조절도 당연히? 안된다.-->
</body>
</html>
<!-- 내용에 적합한 태그와 속성을 사용하는 것, 즉 적절한 요소를 사용하는 것을 웹 표준 이라고 한다. 개발 도구로서의 표준을 지키는 것 뿐 아니라 검색엔진에서의 노출을 높이기 위해서 잘 지켜질수록 좋을 것. -->
<!-- 꺽쇠를 열지 않은 상태로 태그 이름을 입력하고 tap키를 눌러 여는태그와 닫는태그를 한 번에 입력할 수 있다. -->
<!-- 메인페이지의 파일명은 index.html을 사용하는 것이 일반적이며, 따르는 것이 좋다.
네이버, 다음같은 대형 포털의 경우도 이를 따르고 있음을 확인할 수 있음. --><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2회차 HTML 강의</title>
</head>
<body>
<form method="post">
<label for="name">이름</label>
<input type="text" id="name" required
minlength="2" maxlength="8">
<!--label 이름그대로 라벨링
input 사용자가 입력할 수 있는 공간을 제공
라벨의 for와 인풋의 id에 동일한 속성값을 넣음으로써 연결시켜준다.
min/maxlength 최소/최대 글자수를 제한한다.-->
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요" id="mail" required>
<!-- placeholder 인풋 공간에 인스턴트 안내를 출력함 -->
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" required
minlength="6" maxlength="12">
<!-- password타입을 적용하면 인풋 입력란의 글자가 숨겨진다. -->
<label for="num">숫자</label>
<input type="number" placeholder="숫자만 입력" id="num" min="10" max="40"
step="5">
<!-- number타입을 적용하면 숫자만 입력 가능, 숫자를 조절하는 화살표버튼이 생성
min, max 숫자의 최소, 최댓값 지정, 조절 화살표를 누르면 최소값에서 시작
step 5를 지정해주면 조절 화살표를 통해 조절되는 양이 5로 바뀐다.-->
<label for="upload">File upload</label>
<input type="file" id="upload" accept="image/png">
<!-- file 속성은 파일 업로드 기능 제공
accept: 파일형식과 확장자를 등록해 업로드르 허용할 파일 종류를 지정 -->
<button type="submit">제출</button>
<!-- 제출 받아야 하는 필수 항목에 대해서 input태그 안에 required속성을 준다 -->
</form>
<label for="n1">Korea</label>
<input type="checkbox" id="n1" name="country" value="Korea">
<label for="n2">japan</label>
<input type="checkbox" id="n2" name="country" value="japan">
<label for="n3">USA</label>
<input type="checkbox" id="n3" name="country" value="USA">
<!-- checkbox타입은 말그대로 체크박스를 생성한다.
name="country" value="Korea" 속성은 서버에 전달하게 되는 정보를 통제한다
이 경우 country항목에서 Korea값이 선택되었음을 서버에 전달하게 되는 것 -->
<label for="n1">Korea</label>
<input type="radio" id="n1" name="country" value="Korea" checked>
<label for="n2">japan</label>
<input type="radio" id="n2" name="country" value="japan">
<label for="n3">USA</label>
<input type="radio" id="n3" name="country" value="USA">
<!-- radio타입은 여러 항목들 중 한 가지를 선택하는 체크박스를 생성한다.
checked속성값을 주면 해당 인풋값이 페이지 진입 시 지정되어 있다. -->
<label for="content">Text area</label>
<textarea id="content" cols="40" rows="8"></textarea>
<!-- textarea 말그대로 텍스트를 입력할 수 있는 공간을 표시해준다.
cols는 너비, 즉 한 줄에 들어갈 수 있는 글자 수
rows는 줄 수, 이 경우 8줄이 넘어가면 스크롤바가 생기면서 아래로 내려감 -->
<select>
<option selected disabled>select ur job</option>
<option value="student">student</option>
<option value="employee">employee</option>
<option value="etc">etc</option>
</select>
<!-- select태그는 드랍다운 메뉴를 형성할 수 있게 한다.
selectde 기본 선택값을 고정
disabled 선택할 수 없게 함.
위 경우 직업을 선택하라는 안내를 기본 선택한 상태로 사용자에게 노출되고 이후에 선택할 수 없게됨.-->
<table>
<caption>goods info</caption>
<thead>
<tr>
<th>name</th>
<th>color</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>macbook pro</td>
<td>gray</td>
<td>5000</td>
</tr>
<tr>
<td rowspan="2">ipad pro</td>
<td>rad</td>
<td>3000</td>
</tr>
<tr>
<td>blue</td>
<td>3000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">sum</td>
<td>11000</td>
</tr>
</tfoot>
</table>
<!-- table은 표를 만들어준다.
thead는 표의 색인부분 tbody는 값을 표시한다. 따라서(당연히) 각각의 tr태그 안의 항목 수가 같아야 한다.
rowspad속성은 다음 tr아래의 td에 대해 동일하게 적용한다는 뜻이며
예제의 경우 속성값이 "2"이므로 2번 반복한다.
tfood는 표의 마지막 부분, 예제에서 처럼 주로 총계에 사용될 것
colspan="2"속성을 입력해줌으로서 1,2열을 병합했다.-->
<!-- 홈페이지는 보통 상단/본문/하단
의 영역 구분을 가지는 양식이 일반적이라고 한다. -->
<header>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
</header>
<!-- 상단부분 예제 -->
<main role="main">
<section>
<h2>service</h2>
</section>
<section>
<h2>portfolio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet you---------------------</p>
</article>
</main>
<!-- 본문 예제 -->
<aside></aside>
<!-- 본문과 조금 벗어난 내용이 들어갈 수 있다고함. -->
<footer>
</footer>
<!-- footer 안쪽에 하단 부분이 들어가게 될 것. -->
<div></div>
<!-- 웹페이지에 출력되는 위치정보에 대해서, 큰 영역정보 외에 더 디테일한 배치를 위하여 사용되는 태그. 웹페이지를 만들 때 가장 많이 사용하게 될 태그라고 함 -->
<form></form>
<!-- (이미 위에서 실습했지만)인풋태그의 항목들은 항상 폼 태그 안에 위치해야 함 -->
</body>
</html>
<!-- 물론 디자인하기에 따라 헤더나 풋터 태그 등을 여러번 활용할 수도 있음, 특별히 완전히 틀린 배치는 없다고 보는게 좋다. 틀리면 고치면 된다!-->
<!-- 오늘 실습한 공간 배치를 위한 여러 태그들 중 여러가지고 html 5버전 이후에 등장한 태그로 이하 버전에서는 작동하지 않을 수 있다. 이전 강의에서 언급한 브라우저 호환성 검사를 해야할 것. -->
<!-- 모든 태그를 다 알 수는 당연히 없음. 필요한 태그를 찾아서 사용하는 것이 중요. w3schools.com 등을 활용 -->追加成果物
ex 1出力結果
ex 2出力結果
その他の学習
今日は何も理解しないところや難しいところはありません.ただ、新しい情報をたくさん知って混乱しているだけです.
未解決
x
ソリューション
x
問題距離
x
復習する
ブラウザに構造を理解させる指標言語(?)はい.
-Htmlは<ラベル>属性(attributes)で構成されています.
これらはすべて要素と呼ばれています.すなわち、Htmlは元素からなる.
学習の心得.
初めは半分の意味で、本当に初めはすべての知識を半分倒してしまうという意味でしょうか?いろいろな参考サイトを閲覧するのに時間がかかりましたが、今の業界開発者の講師がくれた本当のチップもこの部分だと思います.
授業の方式は,ウェブページ作成において,規範的な理解ではなく,実習使用頻度の高い要素である.最初はコードの入力を実践し、結果を表示し、コードの内容を個別に整理する方式で行われたが、効率は高くなかった.各コードの下に記録とコメントを行うように変更します.勉強しやすくなったと思いますが、これは完成した結果に実習する方法ではないので、ブラウザから出力された結果はめちゃくちゃに見えます.また、勉強の内容を見るのも多すぎます.もっといい方法を考え出す必要がある.
自由とネットワーク開発が2週間の学習を始めたばかりのai/機械学習/深さ学習に関連することを望んでいる.あるいはそんなにたくさんの楽しみがあることを望んでいます.
Reference
この問題について(開発ログ210628), 我々は、より多くの情報をここで見つけました https://velog.io/@xddf/개발일지-210628テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol