[1주차] HTML과 CSS 개념 익히기
부트캠프 사전스터디 커리큘럼을 정리한 내용입니다.
🚀 What I Will Learn
- HTML과 CSS의 역할에 대해 설명할 수 있다.
- HTML에서 자주 쓰이는 태그의 종류와 기능을 익힌다.
- CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다.
.html
파일과 .css
파일을 연결시킬 수 있다.
- 배운 개념을 활용하여 자기 소개 페이지를 만들수 있다.
1. HTML, CSS란 무엇이며 필요한 이유
.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()
메서드를 사용한다.
<참조>
https://velog.io/@lifefm_j/JavaScript-이벤트와-함수의-관계
Author And Source
이 문제에 관하여([1주차] HTML과 CSS 개념 익히기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@remon/1주차-HTML과-CSS-개념-익히기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)