1. HTML
브라우저란?
브라우저는 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다.
쉽게 말하자면 우리가 인터넷을 통해 어떤 검색을 할때 사이트에 접속해 필요한 정보를 검색해 얻고자 하는데, 이때 이 접속을 돕는 도구를 '웹 브라우저'라고 한다.
대표적으로 익스플로어, 파이어폭스, 사파리, 크롬 등이 브라우저에 속한다.
HTML
HTML (Hyper Text Markup Language) 은 프로그래밍 언어가 아니라, 웹페이지에서 다른 페이지로 이동할 수 있는 기능을 가진 문서를 만드는 언어이다.
즉, hyper link system을 갖춘 웹 페이지를 위한 마크업 언어다.
-MDN
Hypertext -> 서로 연결 될 수 있고
Markup -> 정보를 구조적으로 표현하는
Language -> 프로그래밍 언어
HTML과 브라우저의 관계
HTML은 구조적 설계를 맡는 역할로 웹디자인의 기초이다. 즉, 모든 브라우저에는 HTML을 포함하고 있으며, HTML 파일을 통해 뭘 어떻게 그리면 되는지 파악해 웹 페이지를 생성한다.
HTML의 구조
✔ 계층형 구조 (상속관계 : inheritance)를 갖추고있다.
<html>
<head> : 부가정보를 담는 태그(기능, 속성 기술)
<body> : 문서의 컨텐츠를 담는 태그 HTML의 특징
- HTML은 웹에서 쓰는 문서일 뿐 코딩이 아니다.
- 메모장 → 브라우저 “브라우저를 통해 HTML마크업으로 랜더링”.
- 가독성을 위해 개행과 들여쓰기가 중요하다.
- 혼자 사용되는 태그 br, hr등은 자식이 없다.
- HTML은 나무와 같다. (branch: 나무가지, node: 마디)
ex) <body> - 부모 parent
hello - 자식 child
</body>
html은 tree 구조이자 최상위 태그는 root라고 한다 2. CSS
CSS
CSS ( Cascading Style Sheet )는 HTML로 부터 디자인적인 요소를 분리해 정의하는 기능을 수행한다 .잘 정의된 css는 서로 다른 여러 웹페이지에 적용할 수 있으며, 자바스크립트와 연계해 동적으로 콘텐츠를 표현하거나 디자인을 적용할 수 있습니다.
CSS 할당 방식
1. Inline 인라인 방식
장점 : HTML에 직접 사용하기때문에 한번 읽기는 편하다
단점 : 수정이 어렵고, 전체적으로는 읽기 힘들다
2. Internal style sheet 내부스타일 시트 방식
<style>태그를 이용한 방식
<head>의 자식으로 ‘약속, 규약’장점 : 수정에 용이하다
단점 : 선택자 ‘지정’에 어려움이 있다
3. External style sheet 외부 스타일 시트방식
<link> 하이퍼링크를 통해 연결해 외부.css를 연결하는 방식
상위, 하위 파일 개념이 생긴다
부모 자식 디렉토리를 구분하는 방식: 경로 (path)
* 상대경로 찾는 법
a. 하위 디렉토리 검색: . /
b. 상위 디렉토리 검색: ../4. 부트스트랩 컴포넌트 / Bulma
미리 만들어놓은 css 모음집
3. Js
JavaScript
객체 기반의 스크립트 프로그래밍 언어로 주로 웹 브라우저에서 사용되며 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 갖추고 있다. 브라우저에서 웹 콘텐츠를 동적으로 바꾸며, 애니메이션 추가, 멀티미디어 제어 등의 기능을 수행한다.
과거: 클라이언트에서만 작동하던 언어
현재: 노드.js를 같이 사용하는 경우 백엔드언어처럼 서버에서도 작용가능JS 핵심 구성 요소
변수 , 자료형 , 함수 , 조건문 , 반복문
JS 객체
자바스크립트는 배열부터 js위에 구축된 브라우저 APIs에 이르기까지 대부분의 것에서 객체 지향적인 언어이다. 여기서 객체(Object)란 쉽게 말해 실생활에서 우리가 인식할 수 있는 사물로 이해하면 된다.
📚 Reference
