1일차
HTML, CSS, Javascript 기초
각각의 언어마다 담당하는 부분(?)이 다르다.
- html: 정보(data) / UI 나열
- css: 디자인(design) / 깔끔하고 예쁘게 꾸미는 역할
- javascript: 언어적인 부분, 동작 (language, action) / 필요시 수행할 동작을 미리 준비함
<HTML, CSS, Javascript 예제2>
<!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>hello.html</title>
<style>
/* 여기는 css 영역에서의 주석입니다. */
/* 선택자 {
css 속성 : 값 ;
css 속성2 : 값 ;
css 속성3 : 값 ;
}
- 사용할 수 있는 css 속성은 이미 정해져 있다. (마음대로 지어낼 수 없다)
- css 속성에 적용할 값은 이미 정해진 카테고리 내에서 고르는 것도 있고,
또는 크기나 색상같은 값은 정해진 단위에 맞춰서 원하는 값을 지정하면 된다.
*/
h1{
color: blue;
background-color: beige;
}
p{
color:green;
background-color: aqua;
font:bold;
}
</style>
</head>
<body>
<!--
여기는 html 영역에서의 주석입니다.
웹브라우저가 해석하지 않습니다.
-->
<h1>제목 입니다.</h1>
<p>안녕하세요.</p>
<script>
// 여기는 javascript 영역입니다. 한줄 주석
/* 여러줄 주석
하나
둘
*/
//페이지 로딩시에 HI!가 알림창에 나오도록 해 보세요.
alert("HI!");
console.log("javascript가 로딩됩니다.");
// greet이라는 이름의 함수 만들기
// 특정 시점에 일괄 실행할 javascript를 함수 안에 미리 준비해 놓을 수 있다.
function greet(){
alert("안녕하세요");
alert(2);
alert(3);
}
</script>
</body>
</html>
- HTML 주석: <!-- (무시되는 값) -->
- CSS 주석: /* (무시되는 값) */
- Javascript 주석: // (무시되는 값:1줄) or /* (무시되는 값:여러 줄) */
- 하단의 function alert는 바로 실행되지 않음.
검사-console에 들어가서 함수명() greet() 입력하면 실행된다!
→ 특정 시점에 일괄 실행할 v를 함수 안에 미리 준비해 놓을 수 있다.
→ 이후 특정 시점에 해당 함수를 불러내(call) 실행한다.
<style>
aa{
bbb: ccc;
}
</style>a: 요소, b: 속성명, c: 속성값
- <style> 요소 안쪽은 CSS의 영역이므로, 이 요소 안에는 css의 형식을 따라 작성해야 한다.
markup 언어의 작성법과는 다르다!
- 디자인을 바꾸고 싶은 요소명을 명시하고, {} 안에 어떤 디자인을, 어떤 값(value)을 쓸것인지 작성한다.
- 요소 뒤에서 ctrl+space: css의 다양한 속성명을 볼 수 있다.
<script>
aa("bb");
alert();
console.log("");
</script>
- <script> 요소 안쪽은 javascript의 영역이므로, 이 요소 안에는 javascript의 형식을 따라 작성해야 한다.
- javascript에서의 알림창 작성법:
- console.log(""); 에 적으면 웹브라우저의 검사-console 창에 출력된다.
- 검사-Console은 javascript의 영역으로, 입력하면 바로 해석되어 나온다.
→ Element에서 확인되는 내용은 웹페이지 로딩 시점에 먼저, Console의 내용은 그 다음에 해석한다.
<HTML, CSS, Javascript 예제3> : 특정위치에 마우스가 올라왔을때 알림창을 띄우고 싶다면
<!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>Step01_example</title>
<style>
div{
background-color: yellow;
}
</style>
</head>
<body>
<div onmouseover="mouseover()">
div 입니다.
</div>
<script>
/*
위의 div에 mouseover가 되었을때
알림창에 "마우스가 올라왔네?"라고 출력되도록 프로그래밍
*/
function mouseover(){
alert("마우스가 올라왔네?")
}
</script>
</body>
</html>
- function 함수명 (){ } 형태로 작성
- <div onmouseover="alert('마우스가 올라왔네?')"> </div> 와 같이 쓸수도있다.
하지만 복잡하기 때문에, javascript 함수들을 아래에 따로 모아놓고 필요할 때 call하는 방식으로 사용
[ javascript 에서 웹브라우저의 동작을 프로그래밍하는 pattern ]
1) 특정 시점에
2) 일괄 실행할 javascript를 함수에 미리 준비해놓고
3) 그 시점이 되면 미리 준비된 함수를 call 하게 함으로써
4) 동작하게 한다.
- 특정 시점이란?: 페이지 로딩시점, 버튼 클릭 시점, 링크 클릭 시점, 어떤 영역에 마우스가 들어온 시점, 어떤 영역을 더블클릭한/드래그한 시점 ... )
- 함수를 call하는 방법 : 함수명()
각각 실행되는 시점이 다르다.
1) 웹페이지를 로딩하는 시점
2) a 라는 함수가 콜되는시점
3) 마우스가 오버되는 시점(마다)
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |
|---|---|
| 2일차(1)/HTML 기초 : ul, ol, dl (0) | 2022.10.06 |
| 1일차(4) CSS : Block, Inline 요소 예제 (0) | 2022.10.06 |
| 1일차(3)/HTML, CSS, Javascript 기초 (0) | 2022.10.06 |
| 1일차(1)/HTML, CSS기초 (1) | 2022.10.05 |