오늘 목표
Javascript ch.1_2 예제프로젝트 🙆♀️
Javascript ch.1_2 복습퀴즈 🙆♀️
Javascript ch.2
생활코딩 HTML 끝내기
생활코딩 CSS 시작
오늘 공부한 것
HTML 복습
HTML 은 Hyper Text Markup Language 의 약자로 웹 페이지의 구조와 내용을 만든다
대부분의 HTML 요소는 opening 태그 와 closing 태그 를 가진다
HTML element 는 다른 element 를 감쌀 수 있다 그 둘은 부모의 자식의 관계를 가진다
<div> //부모
<p>text</p> //자식
</div>눈에 보이는 콘텐츠들은 다 body 태그 안에 있다
h1 ~ h6 는 제목이나 부제목으로 쓰인다
h1 이 제일 크고 h6 가 작다
p, span, div 태그는 텍스트나 블럭으로 쓰인다
텍스트를 강조할때는 em 이나 strong을 쓴다 em 은 글씨를 italic 으로 나타낸다
줄바꿈은 br 태그를 쓴다 br 태그는 closing 이없다
순서가 있는 리스트는 ol(ordered list) 태그를 쓰고 순서가 없는 리스트는 ul(unordered list) 를 쓴다
ol 과 ul 안에는 li (list item) 를 쓴다
이미지는 img 태그를 쓰고 비디오는 video 태그를 쓴다
<img src="image.jpg">
<video src="video.mp4" width="300px" height="200px" constrols>
여기에는 사용자의 컴퓨터에서 비디오가 재생이 안 될 때 나오는 멘트가 들어감
</video>HTML 파일 첫 번째 라인에는 꼭 !DOCTYPE html 이 들어가야 된다
!DOCTYPE html 은 브라우저가 해당 파일의 HTML 버전을 알 수 있게 해준다
<!DOCTYPE html>그 다음에 들어갈 것이 html 태그다 모든 element 가 html 태그 안에 들어간다
title과 같은 웹 페이지의 정보는 head 안에 들어간다
title 태그안에 브라우저의 탭에 나타나는 웹 페이지의 title을 지정할 수 있다
<html>
<head>
<title>Web Title</title>
<head>
</html>a 태그(Anchor tags) 는 내부 페이지나 외부 페이지, 같은 페이지 안의 콘텐츠를 연결할 때 사용한다
웹 페이지의 섹션을 나누어 a 태그와 id를 이용해 페이지 이동을 시킬 수 있다
target="_blank" 는 링크를 연결할 때 새 창에서 열리게 한다
<a href="링크주소" target="_blank">next</a>공백과 들여쓰기는 코드를 더 읽기 쉽게 해준다
<!-- 코멘트는 이렇게 쓴다 -->표를 만드는 table 태그
table 은 세개의 섹션으로 구분된다 head, body, footer
tr 태그는 표의 행이다
tr 태그 안에 td (table data) 태그가 들어간다
th 태그는 table heading 이다
<thead>
<tr>
<th scop="row">A</th>
<th scop="row">B</th>
<th scop="row">C</th>
</tr>
</thead>
// scop 속성은 th 가 행인지 열인지 나타낼 수 있다colspan, rowspan 을 사용해서 열과 행을 확장할 수 있다
<tr>
<td colspan="2">A</td>
<td>B</td>
</tr>
//table head 는 thead , table body 는 tbody, table footer 는 tfoot 이다
어려운 부분
Javascript 공부중 벌써 목요일이라니...🤦♀️
