1) 학습한 내용
1. 웹프로그래밍 언어의 종류
- HTML : 정보영역을 담당하는 언어
- CSS : 디자인적인 영역을 담당하는 언어, 폰트나 색상 등
- Java Script : 기능적인 영역을 담당하는 언어, 클릭했을 때 컨텐츠가 바뀌는 등
---> 건물에 비유하자면 HTML은 설계 도면, CSS는 내부 인테리어 작업,
Java Script는 지문인식으로 문을 열거나 박수를 치면 불이 켜지는 등의 기능적인 작업
2. 웹사이트의 4가지 종류
- 정적인 웹사이트 : 원래의 틀을 유지
- 동적인 웹사이트 : 브라우저 크기에 맞춰서 사이즈가 조절,
접근하는 기기의 다양성으로 인해 공간의 크기가 유동적으로 변경됨
- 적응형 웹사이트 : 뚝뚝 끊기며 공간의 크기가 달라짐,
접근하는 기기의 다양성으로 인해 레이아웃 구조 변경
- 반응형 웹사이트 : 끊기지 않고 자연스럽게 리사이징, 레이아웃 구조 변경
---> 최근에는 적응형과 반응형을 섞어 웹사이트 제작
* 국내외 다양한 웹사이를 볼 수 있는 곳
:디비컷, 지디웹, awwwards(winner탭 참고),mediaqueri.es, bm.straightline.jp3. 개발용어
- 프론트엔드 : 웹사이트 or 웹서비스를 만들고 서버와의 연결통신을 하는 작업, 다양한 인터랙션을 구현하는 개발자,
사용자(고객)이 보는 페이지를 만드는 개발자
- 백엔드 : 뒷단의 영역, 로그인을 할 때 아이디가 등록된 아이디인지 확인하는 등
- 크로스 브라우징 : 다양한 모든 브라우저에 동일하게 출력이 되도록 앞단의 작업을 하는
- 웹표준 : HTML 언어를 사용해 정보의 성격에 맞는 일종의 태그를 사용해야 하는데 그 태그에 맞춰서 작성하는 과정
- 웹접근성 : 장애인들도 불편함 없이 사용가능하게 하는
- FTP : 서버와 PC를 연결해주는 역할
- 라이브러리 : 웹사이트를 제작할 때 다른 사용자들이 등록해놓은 효과 등이 등록되어져있는 곳4. 개발도구
- vs code : HTML, CSS, Java Script를 입력하는 무료 에디터
- Sublime text : HTML, CSS, Java Script를 입력하는 무료 에디터
- Web Storm : 유료 에디터
* 독학 추천 콘텐츠
: 생활코딩 (Web1,2), 얄팍한 코딩사전, Thenewboston(HTML,CSS), Web Bos(Java Script 30), Freecodecamp, W3school,
모던 자바 스크립트 튜토리얼, 에드위드, Statcounter(전세계 웹사이트 점유율), Can i use(브라우저 버전에 영향을 받는 단어 체크),
NULI(웹접근성), HTML Validation Service(웹표준, 웹접근성 체크), CodePen(다른 사람들이 만든 결과물을 공유, 복사 가능)5. 실습
<!DOCTYPE html> : HTML5 최신 문법
<html>
<head> : 목차
<meta charset="utf-8"> : 글자 깨짐 방지, 디폴트값으로 지정
<meta name="description" content="Web Tutorial">
<meta name="keywords" content="html, css, tutorial, web">
<meta name="author" content="Rona Kim">
<title>HTML, CSS Tutorial</title>
<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">
<style>
p span{color: red;font-size: 20px;background-color: pink;}
mark {background-color: gray; }
</style>
</head>
<body>
<a href="https://www.naver.com/ " target="_blank">네이버</a>
<img src="apple.png" alt="사과 이미지" width="150px" height="80px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTV8-bt-8yQ6DTXbykUG95aHnJ4wg-XW4moUg&usqp=CAU" alt="사과 이미지">
<body> : 정보를 담는 태그
<a></a> : anchor , 다른 페이지로 이동시켜주는 이동버튼을 만들 때
<a href="https://www.naver.com/ " target="_blank">네이버</a> : blank 를 누르면 현재 탭이 아니라 새 탭으로 이동,self는 현재 탭에서 이동, 타겟 값 설정을 안 하면 기본적으로 self로 설정됨
<img src="" alt=""> : src 파일명 or 이미지 주소 alt 웹접근성과 관련된 이미지에 관련된 설명, 디폴트로 지정, width, 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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTV8-bt-8yQ6DTXbykUG95aHnJ4wg-XW4moUg&usqp=CAU" alt="애플">
</a>
</h1>
<h3>Service</h3>
<h4>Service 부제</h4>
<h5>Commerce</h5>
<h5>Design</h5>
<h5>Security</h5>
<h3>Portpolio</h3>
<h1>Title</h1> : headline의 약자, 문서 안에서 타이틀, <h1>은 한 html에서 하나만 사용, 가장 중요한 내용, 안에 a태그, img태그, 회사로고 등, 동급의 내용들은 같은 태그, 순차적으로 작성해야함(h3->h5 이런식으로는 불가<p>Nice to meet you</p>
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다. </p>
<p> 본문 내용, 공백은 한칸으로만 인식을 함
<span> : 단어만 표기할 때, 문장 내에서 특정 단어에 디자인을 적용하고자 할때
<mark>: 특정 단어를 강조할 때, 백과사전 같은 의미의 강조, 특정 단어에 대한 정의를 할 때 특정 단어를 강조할 때 <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>
<ol> : ordered list 순서가 있는 리스트 정보, 목차, 이 태그 안에는 <li>태그가 항상 먼저 나와야함, 안에 list태그만 존재
<ul> : unorded list, 순서가 없는 리스트, 이 태그 안에는 <li>태그가 항상 먼저 나와야함, 안에 list태그만 존재
<a href=”#”> : 아직 넘어갈 링크가 없을 때 디폴트 값으로 #<button type="button">닫기</button>
<button type="submit">확인</button>
"submit" : 입력한 내용을 서버에게 전달할 때<video src="sample.mp4" controls autoplay muted
loop
width="400px"
height="100px"
></video>
<iframe width="800" height="700"
src="https://www.youtube.com/embed/ucAxIXWrbpw"
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>
<video src="sample.mp4" controls></video> : 반드시 같은 폴더 안에 있는 동영상, 재생을 하려면 controls 속성
controls autoplay muted : 자동 재생을 시키고 싶을 때는 muted를 넣어줌
loop : 반복 재생
width=""
height="”
유투브 영상 가져올 때 공유 – 퍼가기 – 복사 붙여넣기
<audio> : 비디오와 다르게 자동 재생은 안됨 <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" id="pw" placeholder="최소 6글자, 최대 12글자" 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">
<button type="submit">제출</button>
</form> 
<label for> : 입력칸을 만들게 됐을 때 입력칸을 대표하는 제목이나 이름, for을 넣어줘야함
<input type="text" id=””> : type에 따라 칸이 달라짐
<label for="name">이름</label>
<input type="text" id="name"> : 이름을 클릭하면 name이라는 id를 갖고있는 영역에 포커싱이 됨, for = id 같은 속성값으로 설정해야함
minlength="2" maxlength="8" : 최소길이, 최대길이 설정
placeholder를 없애버리면 사용자가 어떤 것을 입력해야하는지 모르기 때문에 사용, 안내문구를 넣는 역할, 글자를 입력하는 순간 사라짐, 일종의 노티스
<label for="pw">비밀번호</label>
<input type="password" id="pw" placeholder="최소 6글자, 최대 12글자">
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력"
min="10" max="40" : 숫자의 시작점과 최대값
step=”5” : 5씩 증가 감소
<input type="file" id="upload" accept="image/png"> : accept 업로드할 파일의 확장자를 지정, 여러 확장자를 추가할 때는 , image/jpg, image/gif
*required="" : 사용자한테 필수로 입력을 받을 때 (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>
<input type="checkbox" id="n1" name="country" value=”한국”> : name은 country라고 하는 체크박스 항목에서 한국이라고 하는 데이터를 서버에게 전달, 중복체크, checked 라고 하면 초기에 체크되어 있음
<input type=”radio”> : 단일체크, checked 라고 하면 초기에 체크되어 있음
<label for="content">문의내용</label>
<textarea id="content" cols=”” rows=””></textarea> : input보다 장문의 내용을 입력받을 때 , cols – 너비 한 줄에 최대 몇 글자까지 넣을 것인지에 따라 textarea의 크기가 결정됨, rows – 글자를 기준으로 해서 textarea 안에 최대 몇 줄까지 넣을 수 있는지
<select name="job">
<option selected disabled>직업을 선택해 주세요.</option> : 선택은 불가능, 맨위노출
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select> : 드롭다운 형식, select 태그 안에는 option속성만 넣어야함<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>
<table>
<caption></caption> : 테이블에 대한 정보
<thead> : 테이블의 머리
<tr>
<th>상품</th>
</tr> : 줄바꿈
</thead>
<tbody> : head를 지정해줬으니 body도 지정해야함
<td rowspan=”2”>맥북프로</td> : 2번째 줄까지 병합하겠다.
<td>맥북프로12</td>
</tbody>
<tfoot></tfoot> colspan="" : 가로로 병합
</table>
웹의 구성
<header>
<nav></nav>
</header>
<main></main> : 본문, 하나의 문서 안에서 한번만 사용 가능, 익스플로러에서는 적용이 안되기 때문에 roll=”main”속성을 넣어야함
<article> : 실제 정보가 들어가는 공간
<aside>: 본문의 내용과 관계성이 떨어지는 내용들을 넣는다.
<footer>:가장 밑단의 부분
<div></div> : 구역이 정해져 있지 않은, 임의의 작은 구역들
<form></form> : 사용자에게 입력을 담아내는 폼2) 학습내용 중 어려웠던 점
오늘은 기초에 대한 강의라서 그런지 전반적으로 이해가 금방되어서 어려운 부분 없었다. 3) 해결방법
기초라 이해가 금방 되었지만 헷갈리는 것은 동영상을 정지하고 한번 더 생각해보면서 해결하였다.4) 학습소감
이제 매일 개발일지를 써야한다고 생각하니 당황스럽고
오늘 강의 들은 것 만큼이나 개발일지 쓰는데 힘을 다 뺐다.
내일부터는 좀 더 체계적으로 강의를 듣고 개발일지를 써야겠다.
본격적으로 웹프로그래밍에 대해 배우게 되어서 매우 기대가 된다. 
Hello!