HTML(Hyper Text Markup Language)
- HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것)기능을 가진 문서를 만드는 언어 / 즉, 마크업 언어
-
콘텐츠의 의미를 설명하는데 유일한 목적을 가짐
-
역할
- 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 구조와 의미를 부여하여 정적 언어로 웹의 구조를 담당
- 웹 페이지의 기본 틀(뼈대) 구성
HTML 용어
- 엘리먼트(element) - 요소 : 콘텐츠(요소 포함)를 감싸는 태그
<div>콘텐츠</div> -> div부터 div안에 내용(콘텐츠)까지 즉, 전체가 엘리먼트- open tag : 여는 태그 / close tag : 닫는 태그 -> 얘네가 있는 이유? 콘텐츠를 감싸기 위해서 또는 요소가 다른 요소를 감싸기 위해서이다.
<div> - 여는 태그 </div> - 닫는 태그- 애트리뷰트(attribute) - 속성
- 밸류(value) - 값
<nav class="menu-box-1"> 콘텐츠 </nav> - class=" " -> 속성CSS
웹 페이지의 스타일을 정의하는 데 사용
- 역할
- 마크업 언어(HTML,XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당
- CSS를 사용하는 이유?
- 명확한 구조적 디자인과 표현적 디자인을 분리할 수 있다.
- 다양한 장치에 접근이 좀 더 용이하게 할 수 있다.
- 웹 사이트의 많은 수정사항을 보다 빠르게 수정이 가능하다.
- 다수의 페이지가 있더라도 공통된 스타일(디자인)이 있기 때문에 해당 CSS파일만 수정하면 작업에 용이하다.
- 코드의 가독성, 성능 최적화, 사용자가 자신의 기호에 맞게 디자인을 커스텀하는데 좋다.
- 사이트를 운영하는 자에게는 유지보수 측면, 관리의 용이성이 좋다.
CSS 속성 및 분류
JavaScript(JS)
동적인 웹페이지를 만들기 위한 프로그래밍 언어(HTML,CSS와 완전히 통합이 가능)
웹페이지를 조작하고, 클라이언트-서버 간 상호작용에 관한 모든 일을 관여한다.브라우저뿐만 아니라 서버에서도 실행이 가능하며, JS엔진이 들어있는 모든 디바이스에서도 동작한다.
JS의 역할
- 브라우저에서의 역할
: JS는 안전한 프로그래밍 언어로, 메모리나 CPU같은 저수준 영역의 조작을 허용하지 않는다.- 페이지에 새로운 HTML을 추가하거나 기존 HTML 및 스타일 수정
- 사용자 행동에 반응(ex. 마우스 클릭, 포인터 움직임, 키보드 눌림 등)
- 네트워크를 통해 서버에 요청을 보내거나 파일 다운로드/업로드
-쿠키를 가져와 설정 or 사용자에게 질문을 건네거나 메시지 보여주기 - 클라이언트 측에 데이터 저장(로컬 스토리지)
- 브라우저에서 할 수 없는 일
: 보통 보안에 위협이 가는 기능에 제약이 있다.- 디스크에 저장된 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받는다.
- 카메라/마이크와 같은 디바이스와 상호작용 시, 사용자의 허가가 있어야 한다.
- 브라우저 내 탭과 창은 서로의 정보를 알 수 없다.
- 타 사이트나 도메인에서 데이터를 받아오는 것이 불가능하다.
JS의 특징
-
인터프리터 언어
: 인터프리터 언어이지만, 웹 브라우저 대부분에는 JIT 컴파일러가 내장되어 있어 실행 속도가 매우 빠르다. -
객체 기반의 script 언어
-
동적 프로토타입 기반 객체 지향 언어
: 클래스가 아닌, 프로토 타입을 상속
-
일급 객체 함수
: 고차 함수를 구현이 가능해 함수형 프로그래밍이 가능
-> 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현이 가능하다. -
동적 타입 언어
: 변수 타입이 없기 때문에, 프로그램 실행 도중 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있다.
-
single thread 기반 언어
: stack 위에 함수를 올려 실행하고, 끝나면 stack에서 제거한다. -
non-bloking 언어
: event loop와 callback queue가 있기 때문에, single thread 기반이어도 다른 이벤트를 비동기적으로 처리할 수 있다.
