Introduction
day 01차.
id 및 class 명으로 객체를 지정하고 접근해 보았다.
정리
HTML5의 주요 기능
시맨틱
- 검색 엔진 같은 프로그램이 정보를 분석, 자료를 검색 및 처리해서 제공하는 지능형 웹
CSS3 스타일시트
- CSS3 스타일시트를 사용하면 3차원 변환과 애니메이션 효과 적용 가능
웹의 성능 극대화 및 통합
- HTML5의 추가 기능으로 기존에 이용하던 웹의 성능을 극대화할 수 있음
- 웹 워커를 이용하면 사용자 화면을 멈추지 않으면서 연산 도 처리 가능
- HTML5 표준을 적용한 웹 브라우저를 사용해 간단한 워드 작업이나 게임 가능
스타일시트 작성과 실행
내부 스타일
-HTML 페이지 내부에서 style 태그를 사용해 스타일시트를 직접 입력
- 스타일시트가 짧은 경우
외부 스타일
- 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 불러옴
- 협업 업무나 프로젝트의 규모가 클 경우 사용
DOM
- 원본 HTML 문서의 객체 기반 표현 방식
즉, 원본 HTML 문서를 객체를 기반으로 표현하는 방식(노드 트리 형태로 표현됨)
출처 : https://wit.nts-corp.com/2019/02/14/5522
실습 예제 완성
test.js
// id 속성이 clickBtn인 요소의 DOM 셀렉트
var clickBtn = document.getElementById("clickBtn");
// id 값이 같은 요소는 1개 뿐이다.
var heading = document.getElementById("heading");
var aa = document.getElementsByClassName("aa");
console.log(clickBtn);
console.dir(clickBtn);
// 선택된 DOM 요소에 이벤트 핸들러 걸기
clickBtn.onclick = function(event) {
// 클릭이벤트가 발생하면 이벤트를 console에 출력.
//console.dir(event);
console.dir(document);
document.bgColor = "yellow";
document.title = "Hello";
console.log(heading);
heading.style.backgroundColor = "red";
}
// 문서의 거의 모든 요소가 객체가 될수 있다.
// 함수를 변수에 참조 시킨다.
// 함수를 배열에도 담을 수 있다.
// 함수를 다른 함수의 인자로 사용. (callback 함수)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="clickBtn">Click</button>
<h1 id="heading">Hello world</h1>
<!-- 내부 선언 방식 (Internal)
외부 선언 방식 (External) : 외부 .js파일에 구현 -->
//
<script src="./test.js"></script>
</body>
</html>과제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width : 100px;
height : 100px;
background-color: yellow;
border : 2px solid red;
/* left는 요소가 레이어여야 한다 */
position : absolute;
left : 0px;
transition: left 0.5s, top 0.5s;
}
</style>
</head>
<body>
<button id = "PlayBtn0">0,0</button>
<button id = "PlayBtn1">0,200</button>
<button id = "PlayBtn2">200,200</button>
<button id = "PlayBtn3">200,0</button>
<div id="box">Box</div>
<script>
var playBtnArr = [];
var BoxPos = [[0,0],[0,200],[200,200],[200,0]];
var playBtn = document.getElementById("playBtn");
var Box1 = document.getElementById("box");
var colors = ['blue','orange','brown','pink'];
for(var i = 0; i < 4; i++)
{
playBtnArr[i] = document.getElementById("PlayBtn"+eval("'"+i+"'"));
}
for(var i = 0; i < 4; i++)
{
playBtnArr[i].i = i;
playBtnArr[i].onclick = function(event)
{
Box1.style.left = BoxPos[this.i][0] + 0 + 'px';
Box1.style.top = BoxPos[this.i][1] + 30 + 'px';
Box1.style.backgroundColor = colors[this.i]
console.log(this.i);
}
}
</script>
</body>
</html>Github
해당 깃허브에서또한 확인 할 수 있다.
Day 01
후기
여담으로 Velog가 XML문법을 따르다 보니까, HTML 방식으로 코드를 첨부하니 다음과 같이 버튼이 Velog에 바로 나와서 당황스러웠다..
Document Click
<script src="./test.js"></script>또한 실습에서 동적인 서버를 사용하지 않고 Open In Browser 방식을 사용했을 때는 외부 선언 방식의 .js 스크립트를 인식하지 못했다.
아무래도 HTML 컨텐츠만을 브라우저 내에 표현한 것이므로 .js 파일을 못 찾는것이 당연하다.
붉은 배 오색 딱다구리 개발자 🦃Cloud & DevOps