학습한 내용
1. 이론
2. HTML 기본 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Web Tutorital">
<meta name="keywords" content="html, css, tutorial, web">
<meta name="author" content="Seona Kim">
<title>HTML, CSS Tutorial</title>
<link rel="shortcut icon" type="image/icon" sizes="32X32" href="favicon.ico">
<body>
</body>
</html>
- 태그를 구성하는 방법
<열린태그> <열린태그 속성="속성값"> </닫힌태그> </닫힌태그>meta태그와 같은 일부 태그는 </닫힌태그>를 사용하지 않는다.
1) Head
본문을 설명하는 태그. 웹 페이지의 정보를 링크할 때 사용. 웹페이지에서 보여지는 내용은 아니다.
-
meta : 저자 정보, 써머리 정보 등을 나타내는 태그
-
charset : 문자를 설정하는 속성
-
utf-8 : 한글로 나타내주는 속성값. 이걸 사용하지 않으면 한글이 깨져서 보일 수 있다.
-
name ="description" : 웹페이지의 설명. content에 들어있는 내용이 설명값이다.
-
name="keywords" : content에 들어있는 단어들을 검색엔진에 노출시킴
-
name="author" : 작성자
-
title : 페이지 상단 타이틀 이름 변경
-
상단탭 타일변경
link태그로 이미지로드
- rel : 속성
- type : image/(확장자명)
- sizes :32*32 / 32x32 (소문자) / 32X32 (대문자) 모두 가능
body에서 실행해보니 *는 사용이 불가능했고, 알파벳은 대소문자 관계없이 실행되었다.
- href : html을 작성중인 폴더와 같은 폴더에 들어있는 이미지파일 제목과 확장자명을 적는다. (링크주소로도 가능)
3. Body 구성
body : 웹페이지에 표시되는 본문에 해당하는 영역
1) A 태그, Img 태그
- 링크단추는 a태그를 이용한다.
<body>
<a href="https://www.naver.com/" target="_self">네이버</a>
<!-- a태그는 누르면 페이지 이동하는 태그 -->
<!--target 속성값에 "_blank"를 입력하면 새창으로 표시됨-->
<img src="apple.png" alt="애플로고" width="100px" height="">
<!--넓이나 높이 하나만 값을 입력하면 비율이 깨지지 않는다-->
<img src="https://img.favpng.com/12/15/23/red-fruit-mcintosh-green-apple-png-favpng-EetKf75dS67f0URNqmN9fChZz.jpg" alt="사과 그림">- href : 이동할 페이지의 주소입력
- target : 새 창으로 열려면 "_blank", 열린창에서 이동하려면 "_self". 타겟을 설정하지 않으면 기본값은 self이다. - img : 이미지를 불러오는 속성. 저장된 그림파일 또는 이미지의 링크로 불러올 수 있다.
- alt : 시각장애을 위한 이미지 속성을 지정. img태그를 쓸 때는 반드시 입력해야한다.
2) Headline (h태그)
<h1>title</h1>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<h5>title</h5>
<h6>title</h6>
<!-- h태그들은 headline의 약자 -->
<!--<h1>기업명 또는 서비스명</h1> -->
<!-- h1태그는 하나의 html에서 한번만 사용된다-->
<h1>
<a href="https://www.naver.com/">
<img src="apple.png" alt="애플로고">
</a>
<!-- 애플로고를 네이버로 이동하는 버튼으로 만듦 -->
</h1>
<h3>Service</h3>
<h4>Service 부제</h4>
<h5>Commerce</h5>
<h5>Design</h5>
<h5>Security</h5>
<!-- h태그는 차례로 숫자가 내려와야한다 -->
<h3>Portfolio</h3>
3) P 태그
: 웹사이트의 본문정보를 나타낼 때 사용하는 태그
<p> Nice to meet you. </p>
<!--공백을 아무리 많이 해도 브라우저에서는 한칸으로만 인식된다-->
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<!-- span 태그는 특정 단어의 디자인을 변경하기 위한 태그 (css에서 디자인)-->
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
<!--mark 태그는 특정단어를 강조. 단어의 정의를 나타낼 때
mark태그 기본은 노랑 백그라운드이지만, css에서 변경가능하다-->- span 태그를 이용하기 위해서는, head 영역에 CSS 디자인 코드가 필요하다
<style>
p span {
color: red;
font-size: 20;
background-color: pink;
}
</style>
4) Ol, Ul. Li 태그
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
순서대로 표시 ordered list (ol)
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
순서상관없는 태그. 리스트 정보이면서 등급이 없음 unordered list (ul)
<ul>
<li><a href="#">영화</a></li>
<li><a href="#">부동산</a></li>
<li><a href="#">음악</a></li>
</ul>
- #은 이동페이지가 아직 정해지지 않았을때 사용
- ol/ul/li는 네비게이션 버튼을 만들때 많이 사용됨
- ol/ul 태그 안에는 항상 li태그가 먼저 나와야함 5) Button 태그
<button type="button">닫기</button>
<button type="submit">확인</button>
- button태그 기본설정은 회색배경 검은글자
- submit : 로그인창과 같이 데이터를 서버로 넘겨야할 때 사용6) Video, Audio 태그
<video src="sample.mp4" controls autoplay muted
loop
width="400px"
height="400px">
</video>
control autoplay를 하면 자동재생이 되어야 하지만, muted 옵션을 주지 않으면 크롬에서는 자동재생이 지원되지 않는다.
<audio src="mp3.mp3" controls autoplay muted>
</audio>
오디오는 뮤트를 해도 자동플레이가 안됨. 크롬의 정책상 불가
뮤트된 채로 자동재생되고 있다.
뮤트된 채로 재생되지 않고 있다.
7) 유튜브 영상 불러오기
유튜브 동영상에서 공유를 눌러, 퍼가기를 클릭
그대로 복사해서 Sublime text에 넣어준다
4. 웹프로그래밍 2강
1) Label, Input 태그
<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="6" maxlength="12">
- type="password" : 글자 입력시 표시되지 않고 가려져서 나온다 (숫자, 문자 둘다 가능)
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력하세요" min="10" max="40" step="5">
- type="num" : 숫자만 입력가능. 숫자를 선택할 수 있게 화살표가 나온다.
- min, max : 타입이 "num"인 경우에만 사용 (숫자만 입력시 사용). 숫자 선택 버튼의 최소값, 최대값을 지정한다.
- step : 숫자 선택시 ↑ ↓ 버튼을 누를때 한번에 이동하는 값.
<label for="upload">파일 업로드</label>
<input type="file" id="upload" accept="image/png,
image/jpg, image/gif">
- accept : 속성값으로 "컨텐츠타입/확장자명"으로 지정할 수 있다.
<button type="submit">제출</button>
- 앞에 나온 label/input 상자에 입력된 내용들을 제출하는 버튼 생성
</form>- form : required 속성을 사용하기 위해서는 form태그를 해야한다.
- label, input 태그를 이용할 때는 for 속성과 id 속성값을 동일하게 지정한다. label의 글자를 클릭해도, 텍스트박스에 커서가 생긴다.
- placeholder : 텍스트 칸에 표시되는 글자. 글자를 입력하면 사라진다.
- required : 필수입력정보
- minlength : 최소입력글자수
- maxlength : 최대입력글자수
2) Checkbox/Radio
<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="중국">
1
- name, value : 서버에 데이터를 보내려고 할떄 필요한 정보
2
- type="radio" : 여러 체크박스 중 하나만 선택할 수 있음
- input 속성으로 checked을 입력해두면 페이지를 처음 열었을때 미리 체크가 되어있음. radio뿐 아니라 checkbox에서도 가능함
3) Textarea
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>- cols : 가로로 들어갈 수 있는 최대 글자수. 반각일 경우 해당되는 듯함 (숫자만 채웠을때와 문자를 함께 채웠을때 글자수가 달랐음)
- rows : 표시되는 최대 줄. 정해진 줄 수가 넘어가면 스크롤로 표시된다.
4) Select
<select name="job">
<option selected disabled>직업을 선택해주세요</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>- selceted disalbed : 어떤것을 선택하면 되는지 알려준다. disabled를 써야 선택을 해도 유효하지 않다.
- select 태그를 사용할때는 반드시 option태그를 사용해야한다.
5) Table 태그
<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>
<tfoot>
<tr>
<td colspan="2">총 가격</td>
<td>5,000원</td>
</tr>
</tfoot>
</tbody>
</table>- caption : 테이블 이름
- thead : table head. 테이블 레이블
- tbody : table body. thead와 대칭되도록 표의 값을 입력
- tr : table row. 각 열에 들어가는 내용을 입력
- rowspan="2" : 해당 열부터 2열까지 열 통합. 2열째의 같은 행은 입력하지 않아도 된다.
- tfoot : table foot. 가장 마지막열에 표시되는 내용
- colspan="2" : 해당 행부터 2행까지 행 통합. 2행째의 같은 열은 입력하지 않아도 된다. 다음행의 내용은 그 뒤부터 이어짐.
6) Header, Main, Footer 태그
<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>- header : 웹페이지의 상단
- h1 : 보통은 해당 사이트의 로고로 지정한다. 메인페이지로 이동되게끔 a태그 되어있음
- nav : 상단 메뉴를 나타내는 네비게이션 태그
<main role="main">
<section>
<h2>Service</h2>
</section>
<section>
<h2>Portfolio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet you</p>
</article>
</main>- main : 웹페이지 본문. explorer에서는 role 속성으로 역할을 부여해 주어야함.
- section : 부제가 들어가는 영역. 영역을 대표하는 h태그를 반드시 넣어야함.
- article : 본문이 실제로 들어가는 공간. 공간을 대표하는 h태그를 반드시 사용해야함. 본문은 p태그
<aside></aside>본문(main)과 관계성이 조금 떨어지는 내용을 aside에 넣음
<footer></footer>회사주소, 전화번호 등 웹페이지 가장 하단에 작성
<div></div>: 임의의 작은 영역을 지정할 때, div태그를 사용한다.
문제점 및 궁금한 점
문제점 1
상단탭의 이미지를 넣는 파비콘이 뜨지 않았음.
궁금증 1
파비콘의 사이즈를 입력할때, 곱셉기호를 *를 사용해왔는데 강의예시로는 x로 표시 되어있어서, 알파벳으로 입력해도 되는지 호기심이 들었음
궁금증 2
유튜브 영상을 가지고 오는 것만 실습했는데, 유튜브 영상도 autoplay가 되는지 알고 싶었음.
복사해온 소스안에 autoplay 라고 적혀있는듯 했는데도 자동재생은 되지 않았다.
해결방법
About 문제점 1
오타였음
About 궁금증 1
사이즈 입력할때, 곱셈기호로 *, x (알파벳 소문자), X (알파벳 대문자) 모두 가능했다
다른날 body에서 실행해보니 *는 사용이 불가능했고, 알파벳은 대소문자 관계없이 실행되었다.
About 궁금증2
복사해온 소스안에 autoplay라고 적혀있었지만 자동재생이 되지 않았음.
실습했을때는 video 태그안에 control autoplay라고 입력했는데, allow라는 속성에 들어있었음.
벨로그 작성하는데 6시간이나 걸려서 따로 더 알아보지 못했음.
