1강(웹프로그래밍이란?)
웹 사이트를 구성하는 요소 (정보영역-HTML, 디자인 영역-css, 기능담당-자바스크립트)
, 앞으로 공부하면서 참고할만한 사이트, 기초적인 개발용어(프론트엔드-고객이 보는 영역, 백엔드-고객이 못보는 영역, 크로스브라우징, 웹표준, 웹접근성, FTP, 라이브러리), 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="Gyeongshin Choi">
<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="150px" height="80px">
<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지">
-->
<!--
<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="https://img.icons8.com/emoji/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>
-->
<!--
<span>사과</span>
<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>
<ul>
<li></li>
<li></li>
<li></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="800px" height="700px"
src="https://www.youtube.com/embed/_ysomCGaZLw"
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 muted loop>
</audio>
-->
</body></html>
<!-- a, img 태그소개 -->
<!--
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="" alt="사과 이미지" width="150px" height="80px">
<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지">
-->
<!--
<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="https://img.icons8.com/emoji/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>
-->
<!--
<span>사과</span>
<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>
<ul>
<li></li>
<li></li>
<li></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="800px" height="700px"
src="https://www.youtube.com/embed/_ysomCGaZLw"
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 muted loop>
</audio>
-->
</body>
</html>
2강(HTML)
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2회차 HTML 강의</title>
<style>
tr, td, th {
border: solid 1px #000000;
}
span {
width: 300px;
height: 300px;
background-color: yellow;
}
h1 {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!--
<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="숫자만 입력">
<label for="upload">파일 업로드</label>
<input type="file" id="upload" accept="image/png, image/jpg">
<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 rol="main">
<section>
<h2>service</h2>
</section>
<section>
<h2>Portfokio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
</article>
</main>
<aside></aside>
<footer></footer>
<div></div>
-->
<!-- Inline / block -->
<!--
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
-->
</body>
</html>
처음 접하는 단어들이 많아서 낯설었고 작성하는데 오랜시간이 걸렸다.
천천히 강의를 반복적으로 보면서 배워나갔다.
아직은 어렵게만 느껴져서 용어들과 친숙해지는 과정이 필요할 것 같다.