1주차에는 전반적인 웹과 Javascript의 개요에 대해서 소개하며,
HTML, CSS, Javascript 기초 개념 및 문법에 대해 설명한다.
1) HTML + CSS + Javascript = Web Page
정적인 HTML(Hyper Text Markup Language)을 이용해 웹페이지를 만들고,
동적인 Javascript를 이용해 정적인 HTML을 동적으로 만들고,
CSS(Cascading Style Sheets)을 이용해 웹페이지에 있는 요소들의 디자인을 바꾸는 것
2) HTML과 Javascript 차이
<!-- Javascript 코드 -->
<body>
<script>
document.write(1+1);
</script>
</body>
<!-- html 코드 -->
<body>
1+1
</body>동적인 Javascript 코드의 결과값은 2가 출력될 것이고, 정적인 html 코드의 결과값은 1+1이 출력될 것이다.
3) Javascript 이벤트(Event)
이벤트(Event)는 사용자가 버튼을 클릭하면 팝업창이 뜨는 등 웹 브라우저에서 일어나는 유용한 사건을 말하며, Javascript에서는 약 10~20가지 정도의 이벤트가 존재한다.
<!-- Onclick 이벤트 -->
<input type="button" value="hi" onclick="alert('hi')">4) 우선순위 : id > class > tag
<!-- css 코드 -->
<h1 style="color: blue">Javascript<h1>
<!-- class 예제 -->
<head>
<style>
.js {
font-weight: bold;
}
</style>
<style>
#first {
color: green;
}
</style>
<style>
span {
color: blue;
}
</style>
</head>
<span id="first" class="js">Javascript</span>class 앞에는 .을 붙이고, id 앞에는 #을 붙인다. class는 그룹을 의미하고 중복 가능하지만 id는 고유하다.
'#study > 부스트코스 서포터즈 3기' 카테고리의 다른 글
| 5. Javascript 함수 (0) | 2021.01.23 |
|---|---|
| 4. Quiz 2 (0) | 2021.01.17 |
| 3. Javascript 제어문 (0) | 2021.01.17 |
| 2. Quiz1 (0) | 2021.01.11 |
| 부스트코스 서포터즈 3기 시작 (0) | 2021.01.10 |