2023년 05월02일 수업 내용 정리
● HTML&CSS
(1) <link rel="icon" href=""> : favicon(favorite icon) 네이버 접속시 네이버 왼쪽에 있는 아이콘 말함
(2) HTML 틀 자가설정 방법
! 떴을때 필요없는거 안쓰기 위해 수정후 -> 왼쪽 톱니바퀴 -> User Snippets 클릭
-> html 선택 -> 주석 나옴 -> // "Print to console": { 밑에부분 전체 복사
-> 전체 밑에 붙여넣기 -> 주석 해제 (CTRL+/) 해주기
-> ★
"Generate HTML Basic structure": { <- 키의 이름을 지어줌
"prefix": "log", <- log 부분을 사용할 이름을 지어줌 (불러올 값제목)
"body": [
"<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>Document</title>\n</head>\n<body>\n\n</body>\n</html>"
],
],
=> 1.수정할 indext 텍스트를 붙여주고 양쪽 끝에 "(큰따옴표 설정) , 근데 오류 뜸
오류 해결은 "(큰따옴표) 오류난 부분에 따옴표 앞부분에 \(역슬래시) 붙여 줘야함
ex) <html lang=\"ko\"> 이렇게 설정해야함!
2.밑으로 갈 부분에 \n 넣어주면 밑으로 넘어감
3.앞에 공백을 주고 싶다 \t 넣어주면 공백이 생김
"description": "Generate HTML Basic structure" <- 맨위 키의 이름값과 동일하게 설정
}
-> 새로운 index.html 에 html 쳐주면 설정해놓은 값들이 나옴!
(3)
li(명령어)*3 하면 명령어 3줄뜸 , <태그> 가운데에 alt키 누르고 클릭하면 동시 입력 가능
(4)
tr*5 >td*3 하믄 행5개 열3개 만들어짐!!!
(5) ch4_table -> test03.html 확인~
rowspan은 행을 합쳐준다!
colspan은 열을 합쳐준다!
(6)
<a href="http://www.naver.com" target="_blank">
=> target="_blank는 새탭을 열어줌!
=> target="_parents는 나의 부모탭을 열어줌!
(7)
<ul>
<li><a href="#vincent">Vincent</a></li>
/ul>
<h3 id="vincent">Vincent</h3>
<p>
노래가사
</p>
=> #안에 있는 vincent의 아이디를 h3태그 옆에 id를 줌으로서 그 위치로 이동
=> example: 다른 html에 id에 move를 주었다~ 클릭시 이 페이지로 오고 싶으면 ~
<a href="다른 경로#move"> <- 참고~
(8)
iframe 기법
(9)
<video src="./poodle.mp4" controls width="500"></video>
=> vidio! 컨트롤스는 재생뜨게함 그냥 참고~
<video src="./poodle.mp4" width="500" controls autoplay muted loop></video>
=> autoplay는 muted가 있어야 실행됨. loop는 동영상 무한재생 그냥 참고~
● js(자바스크립트)
(1) - html -
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">버내너</div>
- js -
1. const els = 10; = document -> 변수 상자라고 보면됨 , 10을 els에 집어 넣는다~
2. const els = document.querySelectorAll(html 안에 있는 태그); -> html에서 가져오고 싶은 태그나 요소들을 가져올 수 있음
els.forEach(el => { -> 하나씩 꺼내
console.log(el.dataset.fruitName);
}) -> console창에 출력을 해라 el.dataset에 있는 fruitset을 출력을 해라