웹프로그래밍이란? 1장, 2-1장

오늘 학습한 내용

<!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="Jihye Lee">

	<title>HTML, CSS Tutorial</title>

	<link rel="shortcut icon" type="image/icon" 
	sizes="32x32" href="favicon.ico">

</head>

<body>

	<!-- a, img 태그 소개 -->
	<!--
	<a href="https://www.naver.com/" target="_blank">네이버</a>

	<img src="" alt="사과 이미지" 
	width="100px" height="">
	-->
	<!--
	<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 src="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="400px"
		height="">
			
</video>
-->

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

<!--
<audio src="sampleaudio.mp3" controls muted loop
		>
		</audio>
-->

</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>2회차 HTML 강의</title>

	<style>
		tr,td,th{
			border:  solid 1px #000000;
		}
	</style>
</head>
<body>
 <!--
	<form>
		<label for="name">이름</label>
		<input type="text" placeholder="이름을 입력하세요." id="name" 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="6" maxlength="12">

		<label for="num">숫자</label>
		<input type="number" id="num" placeholder="숫자만 입력" min="10" max="45" 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="일본">
-->

<!-- country : 한국-->
<!-- country : 일본-->
<!-- country : 한국-->

<!--
<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천원</td>
		</tr>
		<tr>
			<td rowspan="2">맥북 프로 12인치</td>
			<td>레드</td>
			<td>천원</td>
		</tr>
		<tr>
			
			<td>블랙</td>
			<td>천원</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<td colspan="2">총 가격</td>
			<td>5000원</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">--> <!--role : 메인이라는 것을 익스플로러에 알려줌-->
	<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> <!--웹사이트에서 가장 하단에 있는 내용-->
	<div></div> <!-- 임의의 작은 구역들 -->

	<form>
		<label></label>
		<input type="" name="">
	</form> <!--사용자에게 입력받는 정보를 담아내는 공간. label과 input태그를 쓰려면 form안에 있어야 한다.-->
</body>
</html>

학습한 내용 중 어려웠던 점

오늘 배운 내용중에는 크게 어려운 점이 없었다. 오히려 재미있었다.
다만 article이나 section, aside, div등에 대한 간단한 설명만 듣고 직접 실행해서 구현해보지는 못해서 아쉬웠다.

해결방법

크게 어려운 내용이 없었으나 한번에 많은 양을 배우게 되었으므로 복습이 필요할 것 같다.

학습소감

웹 코딩이라는 것을 처음 배워봤는데 재미있다. 물론 기초만 해서 어렵지 않아서 그런 걸 수도 있겠지만 앞으로도 열심히 배워야겠다. 열심히 배우고 익혀서 멋진 개발자가 되어 내가 원하는 바를 이루었으면 한다.

좋은 웹페이지 즐겨찾기