1회차 강의
1.기본적인거
1.사이트 형식?(생김새?)
:https://blog.teamtreehouse.com/which-page-layout
2.프론트엔드
- 크로스브라우징 : 웹사이트가 모든 브라우저에서 똑같이 작동하게 하는것
- 웹표준: ~ 정확한태그에 맞춰서 작성
- 웹접근성: 모든대상에 맞춰서 제작
- FTP: 제작후 서버등록 도메인등록
- 라이브러리: 다른사람이 만들어놓은것 사용
3.추천프로그램
-vs code
-sublime text
-web storm(유료)
4.Head
2.실습
1.기본작성
HTML, CSS Tutorial 네이버
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="web Tutorial">
<meta name="keyword" content="html, css, tutorial, web">
<meta name="author" content="JunYeup Kwon">
<title>HTML, CSS Tutorial</title>
<link rel="shortcut icon" type="image/icon" sizes="32x32"
href="0606_______1_UDh_4.ico">
<body>
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="20190904_000536.jpg" alt="이미지" width="100px" height="">
-a는 기본적으로 링크 넣을때 사용
-target으로 새탭(_blank)or페이지 넘어갈지 결정 (기본값은_self)
-img로 이미지 삽입, src="이미지경로(이름.확장자)"or " 이미지url주소"
-alt="그림에관한설명넣기(이미지정보)
-크기 조절은 width , height , 하나의값만 넣으면 알아서 비율맞춤
2.타이틀넣기
Title
Title
Title
Title
Title
Title
Service
Service 부제
Commerce
Design
Security
Portfolio
<h1><a href="http://www.naver.com">
<img src="https://blog.kakaocdn.net/dn/YZiGz/btqxdqHsg3G/TmrEpyujNbbtNtOsiFpkik/img.jpg" alt="이미지" width="100px" height=""> </a></h1></h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
<h3>Service</h3>
<h4>Service 부제</h4>
<h5>Commerce</h5>
<h5>Design</h5>
<h5>Security</h5>
<h3>Portfolio</h3>```
-제목다는거,3.본문정보를 담을때사용하는태그 p
<p>브라우저는 공백을 한개만 인식한다.</p>span, mark 태그
apple
동해물과 백두산이 마르고 닳도록
사과는 사과 나무에서 나는 열매이다.
<span>apple</span>
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
- span 태그는 특정단어만표기하거나 단어에 디자인할때,4.리스트정보를 보여줄때 ol, ul, li
- M1
- M2
- M3
- M1
- M2
- M3
<ol>
<li>M1</li>
<li>M2</li>
<li>M3</li>
</ol>
<ul>
<li>M1</li>
<li>M2</li>
<li>M3</li>
</ul>
<ul>
<li><a href="#">영화</a></li>
<li><a href="#">부동산</a></li>
<li><a href="#">음악</a></li>
-아직 정해지지 않은값에 defalut로 #사용5.버튼
닫기
확인
<button type="button">닫기</button>
<button type="submit">확인</button>6.비디오, 오디오 플레이어
<video src="https://youtu.be/Pnwc0gJsKz0" controls=""></video>
<video src="https://youtu.be/Pnwc0gJsKz0" controls autoplay></video>
<video src="https://youtu.be/Pnwc0gJsKz0" controls autoplay muted></video>
<video src="https://youtu.be/Pnwc0gJsKz0" controls autoplay muted loop></video>
<video src="https://youtu.be/Pnwc0gJsKz0" controls autoplay muted loop width="500" height=""></video>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/cl44-wNGavs"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<audio src="sampleaudio.mp3" controls=""></audio>
<audio src="sampleaudio.mp3" controls="" autoplay=""></audio>
<audio src="sampleaudio.mp3" controls="" autoplay="" muted=""></audio> <audio src="sampleaudio.mp3" controls="" autoplay="" loop=""></audio>
</li>
-크롬은 오토플레이안됨
-controls로 미디어컨틀로러를 제공
-autoplay로 자동재생
-mute음소거,loop반복재생어려운부분
2,3주차에 진행했던 jupyternotebook Python과 헷갈린다.
중간에 나왔던 pl,ol,ul부분이 정확히 어떤곳에 사용되고 어떻게 해야하는에 대한부분과
지금 작성하고 있는 이글의 포스트도 html로 작성중인데 매 끝부분에 닫힌태그를 넣는걸 반복중인데 이부분에 대해서도 잘작성하고 있는지 모르겠다. 일단은 구글링을 해봤을때 지금 배우는 정말 간단한부분보단, 더 자세하고 상세히 설명되있어서 많은정보가 있는건 맞지만, 오히려 더 많은정보라 어렵기도하고 혼동되기도한다.
오전 부분 소감
실시간 강의와 다르게 본인이 놓친부분이 있다면 돌아가서 다시 볼수도있고, 급하지 않게 일시정지도 되고 그런부분은 편하지만 막상, 모르는부분이 생기거나 막히게되면 실시간으로 물어볼수 없단 점은 답답한거 같다.
