웹프로그래밍의 시작
[학습 내용]
html
<!DOCTYPE html> html5 최신 문법을 사용하겠다는 의미로 처음에 무조건 작성html은 태그, 속성, 속성값으로 이루어진다.
<열린태그 속성="속성값"></닫힌태그>
[head] : 간단한 요약 정보/웹사이트에서 보여지지 않음
<head>
<meta charset ="utf-8(기본값)"> : 문자를 세팅한다는 의미
<meta name = "description" content =""> : 한줄 요약 정보
<meta name ="keywords" content=""> : 태그 역할을 수행
<meta name = "author" content=""> : 소유자 이름 작성
<title>HTML, CSS Tutorial</title> : 상단 탭 이름 설정
<link rel="shortcut icon"
type="image/icon" sizes="32x32"
href="favicon.ico"> : 상단 탭 아이콘 넣기
</head> [body] : 웹사이트의 정보를 담아내는 곳
⭐️ a : 웹사이트에서 메뉴를 눌렀을 때 이동되는 태그
⭐️ img : 이미지를 불러오는 태그
⭐️ video : 비디오를 불러오는 태그
⭐️ iframe : 유튜브 영상 삽입 가능
⭐️ audio : 오디오를 불러오는 태그
⭐️ h1-h6 : 숫자 순서대로 사용해야 함
⭐️ p : 본문 내용 작성/공백을 많이 찍어도 한번만 띄어쓰기가 됨
⭐️ span : 디자인으로 적용하고 싶은 부분을 설정, 단어로서만 표기
⭐️ mark : 특정 단어를 강조
⭐️ ol : 순서가 있는 리스트
⭐️ ul : 순서가 없는 리스트
⭐️ li : ol,ul과 함께 쓰여야함
⭐️ button
⭐️ form : 사용자에게 정보를 입력 받는 공간
<a href="#" target="_blank"> </a> : 새탭열기
<img src ="#" alt ="">:웹접근성을 위해 alt 부분 꼭 작성
<img src ="#" alt ="" width="" height="">:이미지의 비율이 변형이 오지만
이미지가 잘리지는 않음
<ul>+<li>+<a> : 네비게이션 버튼을 만들 때 사용
<button type ="submit"> : 서버에게 내용을 전달할 때 사용
<video src="#" controls autoplay muted>:자동재생할 때 muted 필수⭐️ label
⭐️ input : 사용자가 정보를 입력하는 곳 (form과 함께 사용)
⭐️ text area
⭐️ select + option : 같이 사용
<label for = "n">
<input type="text" id ="n" placeholder="" required>
: for과 id가 동일하면 포커스가 맞춰짐
: placeholder ➡️ 안내문자
: required ➡️ 필수로 입력해야 하는 정보에 작성
<label for = "num"></label>
<input type="number" id = "num" min="10" max="40" step="n">
: min, max ➡️ 숫자의 시작점을 설정, 최대 숫자 지정
: step ➡️ n씩 숫자가 증가
<label for = "upload">파일업로드</label>
<input type="file" id = "upload" accept = "imgae/png, image/jpg, imge/gif">
: accept : 파일 업로드 확장자를 지정할 수 있다
<label for = "n">
<input type="checkbox" or "radio" id ="n" name="" value="">
: checkbox ➡️ 중복체크 가능
: radio ➡️ 단일체크
: name, value ➡️ 데이터를 서버에 전달할 때 필요함 무조건 같이 작성⭐️ table,caption,thead,tr,th,thbody,tr,td,tfoot : 표 만들기
⭐️ aside : 본문과 관계성이 떨어지는 내용
⭐️ div : 임의의 구역 공산을 만들어 낼 때 사용(ex,거실에서 소파 위치를 둘곳 정하는거)
<table>
<caption> : 표 제목을 알리는 용도
<thead> ➡️ 표 상단의 내용 (ex:상품, 색상, 가격)
<tr>
<th>상품</th>
</tr>
<tbody> ➡️ 상품 상세 정보
<tr>
<td>맥북 프로 16인치</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td> : 열을 병합
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 가격</td> : 행을 병합
</tr></tfoot>
</thead></table>[💻 웹페이지 상단 부분]
<header>
<h1>
<a href="#"><img></a>
</h1>
<nav>
<ul>
<li><a></a></li>
</ul>
</nav>
</header>[💻 웹페이지 본문 부분]
<main role="mian"> : 익스플로러를 위해 role="main"을 작성해야 함
<section>
<h2>Service</h2>
</section>
<section>
<h2></h2>
</section>
<article>
<h2>Article title</h2>
<p>To the World</p>
</article>
</main>[💻 웹페이지 하단 부분]
<footer>[📝 마무리]
수업을 들으면서 선생님께서 차근차근 설명해주시고 비유도 쉽게 해주셔서
오늘 내용 중에서는 크게 어려운 부분이 있지는 않았다.
중간에 rowspan을 사용하여 열을 병합하는 코드를 작성했는데
제대로 적용이 되지 않았다. index.html사이트를 껐다가 다시 키고 코드를 지웠다가
다시 작성하니 제대로 병합되었다. 오류가 날때는 새로고침을 해주고 코드를 다시 쓰는 방법을 앞으로 많이 쓸것 같다.
video파일은 autoplay muted를 하면 자동재생이 가능하지만 audio는 muted속성을 사용해도 자동재생이 되지 않는다는 점이 좀 헷갈렸다.
video, audio 모두 loop속성은 사용이 가능하다.
남은 시간 동안 좀 더 꼼꼼히 필기하고 정리하면서 튼튼한 뼈대를 만들어 가야 겠다.
