학습한 내용
진도와 학습한 내용을 작성, 소스파일을 실행한 결과 첨부
맨 아래 첨부
학습한 내용 중 어려웠던 점 또는 해결못한 것들
동영상 재생 부분에서 샘플 영상과 유튜브 영상이 모두 재생되지 않고
유튜브는 동영상을 재생할 수 없음이라고 떴다.
해결방법 작성
샘플 영상은 해결하지 못했다.
유튜브 영상은 해당 링크 영상이 퍼가기를 허락하지 않은 게시물이기에 재생이 되지 않았다.
다른 동영상으로 대체하니 재생이 잘 되었다.
샘플 영상은 다른 동영상으로 변경해도 변함이 없네... 미해결
학습 소감
생활코딩에서 html 부분은 수업을 들어본 적이 있어서 크게 어려운 점은 없었다.
html 자체가 난이도가 낮은편이기도 하고. 하지만 운동 처럼 체화하는 과정이 필요할 것 같다.
태그를 열고 닫고하는 기본적인 작업 환경이 곧 눈에 익숙해질 것이라 기대한다.
-------------필기 기록-------------
##1강##
#강사 소개
웹 퍼플리싱 4년
프론트엔드 2년
경영학과 출신-비전공자 출신이라고 함
사스 형태 제공? 구매 관리 힘든 기업의 SaaS를 말하는 건가?
#크로스 브라우징
#웹 반응형
#웹 접근성 = 시각 장애인을 위해 작성(온라인에서도 시각 장애인을 위해 코딩을 한다는 것이 놀라움)
#동적 정적 적응형 반응형
#FTP - 데이터 이동 통로
#라이브러리 - 클릭할 때 바뀌는 효과, 슬리아드 클릭 효과 등 이미 다른 고수들이 만들어 둠(근데 이런건 마음데로 써도 되는 건가?)
=다른 사람들이 미리 만들어 놓은 효과 모음집, 모든 코딩을 0에서 시작할 필요 없다.
#개발도구
웹스톰 유료 버전 ( 강사님은 실무에서 이걸 쓴다고 함)
비쥬얼스튜디오 무료 (마이크로소프트에서 만든 것)
서브람텍스트 무료 (웹 개발에서 많이 쓰이는 에디터) << 실습 환경으로 당첨
#얄팍한 코딩사전-어려운 개발 용어 쉽게 해석
#이고잉(생활코딩은 자바 스크립트 까지) 강사님도 생활코딩에서 시작하셨다고 함.
#thenewboston 얼마전에 다시 컴백하셨다고 함 html 튜토리얼 ,css 추천 xhtml은 무시
#wes bos - 자바 스크립트 많이 배움, 자바 스크립트 30 강좌 추천
#프리코드 캠프
비영리 사이트
여러가지 코스가 있음, 텍스트 기반
#w3schools.com
최근에 사이트 개선됨
#모던 자바스크립트
한글로 자바 스크립트 공부할 수 있는 사이트
난이도가 있기 때문에 중급 부터
#애드 위드(네이버에서 진행하는 무료 강의 사이트)
#statcounter 전 세계 웹사이트 브라우저 점유율 볼수있음 (크롬이 1등~), 지역 별로 통계 조회 가능, 네이버 웨일은 없네?
#caniuse[캔아이유즈] 명령어? 단어? 적용가능한지 해당 브라우저에 확인하는 사이트(크로스 브라우저 개발시에)
단어 버전 호환성 확인용
#네이버 NULI : 웹 사이트 제작 다양한 내용 설명
#validator.w3.org : 내 코드가 웹 표준에 맞게 잘 작성되었는지 확인 할 수있는 사이트, 코드 파일이나 바로 코드 입력해서 확인 가능
#코드 펜 : 다른 사람이 만든 코딩 공유 확인하는 사이트
##2강##
#개발 환경 셋팅
서브 라임 텍스트 설치
메인페이지 파일 이름은 index.html 통일한다. 관례
<meta charset="utf-8">
<meta name="description" content="Web Tutorial">
<meta name="keywords" content="html, css, tutorial, web"> <!--검색 태그 -->
<meta name="author" content="GunHo Sung">
<title>HTML, CSS Tutorial</title> <!--브라우저 탭 이름 변경, 작은 아이콘 = 파비콘 -->
<link rel="shortcut icon" type="image/icon" sizes="32x32"
href="favicon.ico">
<!-- 기타 head 정보 github.com/inkweon7269/HEAD --><!--a, img 태그 소개
<a href="https://www.naver.com/" target="_blank" >네이버</a>
#a 태그 클릭시 링크 여는 태그
#_blank = 새탭, _self 현재창, 기본값은 self
<img src="apple.png" alt="사과 이미지" width="100px" height="80px">
#img 속성 사용시 무조건 alt 값 사용, 시각 장애인에게 정보 제공 목적(웹 접근성), 이미지로딩 실패시 해당 정보 제공 역할도 가능
#한 가지 이미지 크기만 입력하면 브라우저 창 크기 조절시 자동 변경됨(이미지가 잘리지는 않는다)
#src는 이미지 값, 이미지 주소 가져오는 속성값
<img src="https://e7.pngegg.com/pngimages/779/788/png-clipart-apple-logo-%E4%BF%83%E9%94%80-heart-logo.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="apple.png" alt="애플">
</a>
</h1>
<h3>Service</h3>
<h4>Servce 부제</h4>
<h5>Commerce</h5>
<h5>Design</h5>
<h5>Security</h5>
<h3>Portfolio</h3>
-->
<!--
<p>Nice to meet you</p>
#브라우저는 공백 1칸만 무조건 인식
-->
<!--
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
#태그 + Tab키 열린, 닫힌 태그 자동 작성
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>
<!-- helbak.com 만들어볼 사이트
ol, ul태그 안에는 항상 li 태그가 항상 먼저 나와야한다.
-->
<!--
<button type="button">
닫기
</button>
<button type="submit">
확인
</button>-->
<video scr="pubg.mp4" controls autoplay muted loop
width=""
height="">
</video> <audio src="U.R.F.mp3" controls 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"
>
<lavel for="mail">이메일</lavel>
<input type="email" placeholder="이메일을 입력하세요." id="name" required>
<label for="pw">비밀번호</label>
<input type="password" 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, image/jpg">제출
한국
일본
중국
한국
일본
중국
문의내용
직업을 선택해주세요. 학생 회사원 기타
| 상품 | 색상 | 가격 |
|---|---|---|
| 맥북 프로 16인치 | 그레이 | 30억 |
| 레드 | 30조 | |
| 총 가격 | 5,000원 |
Service
Protfolio
Article title
본문 내용입니다
<aside></aside><!--메인 내용 등 별개의 내용-->
<footer></footer><!--맨 아래 정보-->
<div></div><!-- 임의의 작은 구역 많이 사용한다고 하네-->
<form><!--입력값을 받을 떄-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/qBbgp2Q_wDM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>