**1) 학습한 내용
웹프로그래밍이란?
Sublimetext를 이용한 HTML실습
1.웹프로그래밍이란?
*웹사이트 구성하는 개발언어
크게 세가지 언어사용
-HTML, CSS, JS
*웹사이트 레이아웃 종류
(구글 검색 = treehouse which layout static liquid -> which layout? static,Liquid,Adoptive or responsive)
- 정적, 동적, 적응형, 반응형
1.static 정적 - 크기,레이아웃 변화가 없음
2.liquid 동적 - 크기는 변화가 있으나 레이아웃은 변화가 없음
3.Adoptive 적응형 - 크기,레이아웃 모두 변화가 있으며 기기에 따라 변화 한다. 그러나 특정 시점에서 공간의 크기가 뚝뚝 끊어지면서 바뀌는 특징이있다.
4.Responsive 반응형 - 크기,레이아웃 모두 변화하며 자연스럽게 크기가 바뀌는 특징이있다.
=> 최근은 적응형과 반응형을 섞어서 사용을 하기도 한다.
다양항 웹사이트 종류를 접할 수 있는 참고 사이트
국내
-디비컷 (레퍼런스공부하기 좋음)
-지디웹
해외
-Awwwards(수상작위주로 보는것도 좋음)
-media queri.es
-bm.straightline.jp ->두번째 all book mark
용어
-프론트엔드
-백엔드
-크로스브라우징 : 여러가지 브라우저에서도 사용에 문제가 없도록
-웹표준 : 눈에 보이는 정보성격에 맞는 태그사용, 정확한 태그에맞춰서 작성
-웹접근성 : 내가 만든 사이트가 어느 누가 사용해도 문제가 없도록 하는 기법
-FTP(=File Transfer Protocol) : 내가 만든 결과물을 서버에 올릴 수 있도록 연결해주는 역할
-라이브러리 : 개발을 할때 다른사람들이 만들어놓은 기능들을 사용할수 있도록 만들어 놓은 결과물
참고할만한 개발도구
무료
-VScode
-Sublimetext
유료
-webstorm
- 크롬브라우저
2.index.html 실습하기
실습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="Eunhye Yeo">
<title>HTML, CSS Tutorial </title>
<link rel="shortcut icon" type="image/icon" sizes="32*32"
href="favicon.ico">
</head>
<body>
<!-- a, img 태그 소개
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="apple.png" alt="사과 이미지" width="100px" height="">
<img src="https://dimg.donga.com/a/600/0/90/5/ugc/CDB/SHINDONGA/Article/5b/f2/44/f6/5bf244f61b66d2738de6.jpg" alt="사과 이미지"width="200px" height="">
-->
<!--
<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
<h1>
<a href="https://www.naver.com/">
<img src="https://dimg.donga.com/a/600/0/90/5/ugc/CDB/SHINDONGA/Article/5b/f2/44/f6/5bf244f61b66d2738de6.jpg" alt="애플" width="200px" height="">
</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/oQW9lY1ZAJA" 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2회차 HTML 강의</title>
<style>
tr, td, tr {
border: solid 1px #000000;
}
span {
width: 300px;
height: 300px;
background-color: yellow;
}
h1 {
width: 300px;
height: 300px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<!--
<form method="post">
<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="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>
<option selected disabled>직업을 선택해 주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
-->
<!--
<table>
<caption>상품 정보</caption>
<tread>
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
</tread>
<tbody>
<tr>
<td>맥북 프로 16인치</td>
<td>그레이</td>
<td>3000</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td>
<td>레드</td>
<td>1000</td>
</tr>
<tr>
<td>블루</td>
<td>2000</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">
<section>
<h2>Service</h2>
</section>
<section>
<h2>Portfolio</h2>
</section>
<section>
<h2>Article title</h2>
<p>Nice to meet you</p>
</section>
</main>
<aside></aside>
<footer></footer>
<div></div>
<form></form>
-->
<!-- Inline(한줄로출력-공간크기,좌표설정 x)
/ Block(줄바꿈,y축으로 정렬-공간크기,좌표설정o)
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
-->
</body>
</html>실습3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
</ul>
<footer>
<nav>
</nav>
</footer>
**
2) 학습내용 중 어려웠던 점
처음 접해보는 속성과 속성값들을 어떻게 다외우지하는 걱정이 컸고, 나중에 생각나지 않을때는 어떻게 해야하나 라는 걱정이 컸던것이 가장 힘들었다.
3) 해결방법
강의 중 이러한 코드값(?)들을 찾아보고 맞는지 확인할 수 있는 참고 사이트들을 알려주셔서 조금은 안심 할 수 있었다.
*참고사이트
1.google - can I use?
2.https://www.freeformatter.com/html-validator.html
4)학습소감
처음으로 만들어보는 코드가, 이렇게 배우고 시작하는게 맞는지 지금 내가 잘하고 있는지를 잘 모르겠어서 얼떨떨한 기분으로 하나하나 따라했던것같다.
그래서 조금은 불안한 마음을 가지고 강의를 들었다.
하지만 하다보니 지금 내가 배우고 있는것에 대해 점점 더 정확하게 알아가기 시작했던 것 같다. 사실 배우기 전부터 이런 웹프로그래밍이라는 것에 대해 많이 알아보고 찾아보고 했지만 이렇게 와닿지 않았기에 이번에 실습을 통해 확실히 와닿아 더 신이 나서 따라해보게 되었다.
또 수업이 나에게는 정말 빡빡하고 시간내에 따라가려면 쉬는 시간없이 해야했지만, 지루하지 않고 집중해서 배울 수 있었던 시간이었던것같다.
처음에는 막막하기만 했던 수업의 내용들이 이제는 진짜 조금 알것같다. 정말 조금..그래도 시작이라도한 것 같아 뿌듯하다!!
사실 지금도 이렇게 쓰고 있는 이 순간도 내가 잘 쓰고 있는건지 이렇게 쓰는건 맞는지.. 하나도 잘 모르겠지만 끝까지 고쳐나가며 잘 해볼 생각이다 :)
**
