210628開発ログ

11336 ワード

1)学習内容
HTMLタグと実践
<meta charset="utf-8">

<meta name="description" content="web Tutorial">
<meta name="keywords" content="html, css, tutorial, web">
<meta name="author" content="Hyunji Lee">

<title>HTML, CSS TUtorial</title>

<link rel="shortcut icon" type="image/icon" sizes="32*32"
		href="favicon.ico">
<!--
<style>
	p span {
		color: red;
		font-size: 20px;
		background-color: pink;
	}

	mark {
		background-color: gray;
	}
</style>
-->
<!-- a, img 태그 소개 -->
<!--
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="" alt="사과 이미지" width="150px" height="80px">


<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>

<h1>기업명 또는 서비스명</h1>

<h1>
	<a href="https://www.naver.com/">
		<img scr="https://img.icons8.com/emji/452/red-apple.png" alt="애플">
	</a>
</h1>


<h3>Service</h3>
<h4>Service 부제</h4>

<h5>Commerce</h5>
<h5>Design</h5>
<h5>Security</h5>

<h3>Portfolio</h3>


<p>Nice to meet you</p>

<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
-->

<!--
<ol>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ol>

<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>

<ul>
	<li><a href="#">영화</a></li>
	<li><a href="#">부동산</a></li>
	<li><a href="#">음악</a></li>
</ul>
-->

<!--
<button type="button">닫기</button>
<button type="submit">확인</button>
-->
<!--
<video src="sample.mp4" controls 
		autoplay muted
		loop
		width="300px"
		height="300px">
</video>
-->


<!--
<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/3WOwa0lWEz4" 
		title="YouTube video player" 
		frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
-->

<!--
<audio src="sample_audio.mp3" controls autoplay muted loop>
</audio>
-->
第2期HTML講座
<style>
	tr, td, th {
		border: solid 1px #000000;
	}
</style>
<!--
<form method="post">

	<label for="name">이름</label>
	<input type="text" id="name" placeholder="이름을 입력하세요." required
				minlength="2" maxlength="8">

	<label for="mail">이메일</label>
	<input type="email" placeholder="이메일을 입력하세요." id="mail" required>

	<label for="pw">비밀번호</label>
	<input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" required minlength="10" maxlength="15">

	<label for="num">숫자</label>
	<input type="number" id="num" placeholder="숫자만 입력" min="10" max="40" step="5">

	<label for="upload">파일 업로드</label>
	<input type="file" id="upload" accept="image/png, image/jpg, image/gif">

	<button type="submit">제출</button>

</form>
-->

<!--
<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">
-->


<!--  #단일 버튼
<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">
-->


<!--
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
-->

<!--
<select name="job">
	<option selected disabled>직업을 선택해 주세요.</option>
	<option value="학생">학생</option>
	<option value="회사원">회사원</option>
	<option value="기타">기타</option>
</select>
-->
<!--
<table>
	<caption>상품 정보</caption>
	<thead>
		<tr>
			<th>상품</th>
			<th>색상</th>
			<th>가격</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>맥북 프로 16인치</td>
			<td>그레이</td>
			<td>3,000원</td>
		</tr>
		<tr>
			<td rowspan="2">아이패드 프로 12인치</td>
			<td>레드</td>
			<td>1,000원</td>				
		</tr>
		<tr>
			<td>블루</td>
			<td>1,000원</td>				
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<td colspan="2">총가격</td>
			<td>5,000원</td>
		</tr>
	</tfoot>
</table>
-->

<!--
<header>
	<h1>
		<a href="#">
			<img>
		</a>
	</h1>

	<nav>
		<ul>
			<li><a href="#">메뉴1</a></li>
			<li><a href="#">메뉴2</a></li>
			<li><a href="#">메뉴3</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 youNice to meet youNice to meet youNice to meet you</p>
	</article>
</main>

<aside></aside>

<footer></footer>

<div></div>
-->

<!-- Inline / Block -->
2)学習内容の難点
HTMLのタグ要素
3)解決方法
https://www.w3schools.com/tags/default.aspサイトの利用
4)勉強の心得
Webフレームワークの作成過程が面白い