CSS, JavaScript 기초

 

CSS

• Cascading Style Sheets
• HTML 꾸며주는 언어
• 문서 통째로가 아닌, HTML 하나하나 꾸며줌

HTML에 CSS 적용 방법 3가지

• 인라인 (inline): HTML 태그 안에 같이 작성
• 내부 스타일 시트 (internal style sheet): HTML 문서 안에 같이 작성
• 외부 스타일 시트 (external style sheet): HTML 문서 밖에 작성하고 연결

* HTML 태그 한쌍을 element라고 부른다. 

 

JavaScript

특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어

스크립트 언어란?

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌, (프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어

-> 런타임의 발전으로, 스크립트 언어만으로도 프로그래밍이 가능해져 역할이 확장되었다.

 

HTML에 JavaScript 적용 방법 3가지

• 인라인 (inline): 사용자와의 상호작용이 있을 때만 가능. (버튼을 클릭했을 때, 키보드 눌렀을 때 등등)
• 내부 스타일 시트 (internal script): HTML 문서 안에 같이 작성
• 외부 스타일 시트 (external script): HTML 문서 밖에 작성하고 연결

 

함수

특정 기능을 수행하는 코드 덩어리. 

 

JavaScript가 특정 태그(element)를 찾는 법

• id로 찾기: document.getElementById('아이디')
• class 이름으로 찾기: document.getElementsByClassName('클래스 이름')
• tag 이름으로 찾기: document.getElementsByTagName('태그 이름')

 

자바스크립트 변수 선언 3가지

var, let, const

단 var은 ES5 까지의 문법이므로, 현재로서는 웬만하면 ES6문법인 let과 const을 활용하여 선언하자. 

var을 사용하면 함수 스코프와 호이스팅으로 인해 예기치 않은 버그가 발생할 수 있다. 

• let: 재선언 불가, 재할당 가능
• const: 재선언 불가, 재할당 불가

var 키워드의 여러 단점 중 가장 대표적인 것은 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생할 수 있다.

『모던 자바스크립트 딥다이브』

 

실습 화면 

 

배운 점

 

JavaScript는 본래 웹 페이지의 동적인 요소를 제어하기 위해 만들어진 스크립트 언어였다. 하지만 이후 몇 가지 중요한 발전을 거치며, 현재는 웹을 넘어 다양한 환경에서 사용되는 범용 프로그래밍 언어가 되었다. 여러 발전 중 가장 결정적인 계기는 Node.js라는 자바스크립트 런타임 환경의 등장이다. 이를 통해 자바스크립트는 웹을 넘어 서버와 다양한 플랫폼에서 사용할 수 있는 언어로 발전했다. 

 

var 키워드의 여러 단점 중 가장 대표적인 것은 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생할 수 있다.