Week 1 - HTML & CSS

HTML, CSS란 무엇이며 필요한 이유

▶ HTML(Hypertext Markup Language) 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
▶ CSS(Cascading Style Sheets) HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어

HTML, CSS, JavaScript의 관계

▶ HTML, CSS 로 웹페이지의 뼈대를 만들고 디자인을 적용하며 JS를 통해 기능적 요소나 동적 요소 제어를 제공

.html, .css, .js세 종류의 파일을 연결하는 방법

1. index.html 이라는 파일을 생성.
2. html 기본구조를 입력한 후 style.css,main.js 파일을 생성.
3. CSS는 head태그 안에 link태그를 사용해서 href="style.css"로 링크를 걸어줌.
4. js는 헤드태그 안에 script태그를 넣어서 해주는 방법과, 바디태그 가장 아래에 script태그를 넣어주는 방법 2가지가 있음.

script 태그의 위치에 따른 차이점

▶ HTML에서 script 태그는 body 의 최하단에 삽입되는 것이 좋다.

▶ 자바스크립트는 스크립트 배치에 제한을 두지 않지만, 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미치기 때문이다.

웹 페이지에서 일어날 수 있는 이벤트의 종류

▶ 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때 등 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것.

1. 마우스 이벤트

2. 키 이벤트

3. 폼 이벤트

4. 로드 및 기타 이벤트

이벤트와 자바스크립트 함수와의 관계