부트캠프 사전스터디 커리큘럼을 정리한 내용입니다.
🚀 What I Will Learn
- HTML과 CSS의 역할에 대해 설명할 수 있다.
- HTML에서 자주 쓰이는 태그의 종류와 기능을 익힌다.
- CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다.
.html파일과.css파일을 연결시킬 수 있다.- 배운 개념을 활용하여 자기 소개 페이지를 만들수 있다.
1. HTML, CSS란 무엇이며 필요한 이유
HTML (HyperText Markup Language)
- 디지털 정보의 담는 웹페이지를 만드는 컴퓨터 언어이다.
- 저작권이 없는 퍼블릭 도메인이다. 그렇기 때문에 웹브라우저를 통해 여러 사용자가 똑같은 페이지를 볼 수 있다.
- HTML은 기본문법은 태그를 사용한다.
- HTML 태그를 의미론적으로 잘 사용해야한다.
- 정보사회에서 HTML을 검색엔진의 검색결과에 노출되게끔 의미에 맞게 사용하는 것은 비즈니스적인 측면에서 매우 중요하다.
- 누구나 차별없이 정보에 접근할 수 있어야 한다는 접근성을 강조한다. 신체적인 장애가 있는 사람도 웹을 통해 정보에 접근할 수 있어야한다.
CSS (Cascading Style Sheet)
- HTML으로 만든 전자문서(웹페이지)를 좀 더 아름답게 만드는 것이 목적인 HTML과는 다른 컴퓨터 언어이다.
- HTML이 정보에 전념하기 위해서 HTML로부터 디자인에 대한 기능을 뺏어온 것 언어이다. 시각적인 기능을 담당한다.
- 중복의 제거을 제거하여 유지보수가 편리해지고 가독성이 높아졌다. 따라서 CSS로 작업하는 것이 HTML을 통해서 디자인하는 것보다 훨씬 더 효율적이다.
2. HTML, CSS, JavaScript의 관계
HTML 웹페이지의 구조를 담당
CSS 웹페이지의 시각적인 부분을 담당
JavaScript 웹페이지의 동적인 부분을 담당
3. .html, .css, .js세 종류의 파일을 연결하는 방법
.html에 .css와 .js를 연결한다.
.css 연결 방법
<link>태그로 연결
<head>
<link rel="stylesheet" href="경로/css파일명.css">
</head>@import url()사용
<style type="text/css">
@import url("경로/CSS파일명.css");
</style>두가지 방법 중 <link> 태그를 사용하는 것이 속도가 더 빠르기 때문에 대부분은 <link> 를 사용한다.
.js 연결
<script type="text/javascript" src="script2.js"></script>4. script 태그의 위치에 따른 차이점
<head> 태그 내부 위치
- HTML은 파싱 도중,
<script>태그를 만나게 되면 중간에 파싱을 멈춘다.<script>태그를 읽느라 body 내부의 UI들은<script>태그를 읽은 후에 사용자에게 보여지게 될 것이기 때문에 사용자 경험에 좋지 않은 영향을 미칠 것이다. - HTML 파싱이 완료 되기 전에 script 파일을 실행하기 때문에 존재하지 않은 DOM 요소에 접근을 시도하다 문제가 발생할 수 있다.
<body> 태그 최하단에 위치
- HTML 다운받고 파싱을 마친 후 script 태그를 읽기 때문에 빠르다
✨ <head> 태그 내부 위치 - defer
<script **defer** src="script.js"></script>HTML을 파생하다 script 태그를 만나면 HTML을 파생하는 동시에 script를 다운로드만 시켜둔다. HTML 파싱이 완료된 후에 script를 실행 시킨다. 이 방법이 가장 이상적인 방법이다.
<참조>
https://jae04099.tistory.com/entry/HTML-script-태그는-어디에-위치-해야-할까
https://junhobaik.github.io/js-script-position/
https://velog.io/@takeknowledge/script-태그는-어디에-위치해야-할까요
5. 웹 페이지에서 일어날 수 있는 이벤트의 종류
- 이벤트란?
웹페이지에서 마우스를 클릭했을 때, 스크롤을 움직였을 때와 같이 특정 요소에 포커스가 이동됐을 때 어떤 사건을 발생시키는 것
- 마우스 이벤트
| click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
|---|---|
| dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
| mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
| mouseout | 요소에 마우스를 아웃했을 때 이벤트가 발생 |
| mousedown | 요소에 마우스를 눌렀을 때 이벤트가 발생 |
| mouseup | 요소에 마우스를 떼었을 때 이벤트가 발생 |
| mousemove | 요소에 마우스를 움직였을 때 이벤트가 발생 |
| contextmenu | context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 |
- 키 이벤트
| keydown | 키를 눌렀을 때 이벤트가 발생 |
|---|---|
| keyup | 키를 떼었을 때 이벤트가 발생 |
| keypress | 키를 누른 상태에서 이벤트가 발생 |
- 폼 이벤트
| focus | 요소에 포커스가 이동되었을 때 이벤트 발생 |
|---|---|
| blur | 요소에 포커스가 벗어났을 때 이벤트 발생 |
| change | 요소에 값이 변경 되었을 때 이벤트 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트 발생 |
| reset | reset 버튼을 눌렀을 때 이벤트 발생 |
| select | input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 |
- 로드 및 기타 이벤트
| load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
|---|---|
| abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
| unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
| resiez | 요소에 사이즈가 변경되었을 때 이벤트 발생 |
| scroll | 스크롤바를 움직였을 때 이벤트 발생 |
6. 이벤트와 자바스크립트 함수와의 관계
사용자가 실제 이벤트를 발생시켰을 때 그 이벤트를 자바스크립트에서 사용하기 위해서는 이벤트 핸들러(event handler)를 사용해야 한다
이벤트 핸들러(리스너) 추가/제거
이벤트 핸들러(리스너)란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리킨다.
DOM객체.addEvnetListner('이벤트명', 함수명);
button.addEvnetListner('click', shangeColor);리스너 제거는 removeEventListener() 메서드를 사용한다.
프론트엔드 개발자 가보자고~!!