[1주차] HTML과 CSS 개념 익히기

부트캠프 사전스터디 커리큘럼을 정리한 내용입니다.

🚀 What I Will Learn

  1. HTML과 CSS의 역할에 대해 설명할 수 있다.
  2. HTML에서 자주 쓰이는 태그의 종류와 기능을 익힌다.
  3. CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다.
  4. .html 파일과 .css 파일을 연결시킬 수 있다.
  5. 배운 개념을 활용하여 자기 소개 페이지를 만들수 있다.

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요소에 마우스를 움직였을 때 이벤트가 발생
contextmenucontext menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생
  • 키 이벤트
keydown키를 눌렀을 때 이벤트가 발생
keyup키를 떼었을 때 이벤트가 발생
keypress키를 누른 상태에서 이벤트가 발생
  • 폼 이벤트
focus요소에 포커스가 이동되었을 때 이벤트 발생
blur요소에 포커스가 벗어났을 때 이벤트 발생
change요소에 값이 변경 되었을 때 이벤트 발생
submitsubmit 버튼을 눌렀을 때 이벤트 발생
resetreset 버튼을 눌렀을 때 이벤트 발생
selectinput이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생
  • 로드 및 기타 이벤트
load페이지의 로딩이 완료되었을 때 이벤트 발생
abort이미지의 로딩이 중단되었을 때 이벤트 발생
unload페이지가 다른 곳으로 이동될 때 이벤트 발생
resiez요소에 사이즈가 변경되었을 때 이벤트 발생
scroll스크롤바를 움직였을 때 이벤트 발생

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

사용자가 실제 이벤트를 발생시켰을 때 그 이벤트를 자바스크립트에서 사용하기 위해서는 이벤트 핸들러(event handler)를 사용해야 한다

이벤트 핸들러(리스너) 추가/제거
이벤트 핸들러(리스너)란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리킨다.

DOM객체.addEvnetListner('이벤트명', 함수명);
button.addEvnetListner('click', shangeColor);

리스너 제거는 removeEventListener() 메서드를 사용한다.

<참조>
https://velog.io/@lifefm_j/JavaScript-이벤트와-함수의-관계

좋은 웹페이지 즐겨찾기