🌐

Web_base

목차(클릭하세요)

알면 도움이 되고, 아님 말고?

1. 파비콘

1-1. 파비콘이란?

브라우저 탭, 즐겨찾기, 모바일 홈화면 등에서 웹사이트를 대표하는 작은 아이콘

 기본 규격

1-2. 유용한 파비콘 생성 도구

2. 반응형 웹

2-1. 반응형 웹이란?

어떤 크기의 디스플레이든(태블릿, PC, 스마트 폰 등) 웹페이지를 그에 맞춰 보여주는 웹 페이지

 사용자의 화면 크기나 기기에 따라 자동으로 레이아웃과 디자인이 조절되는 웹사이트를 의미

2-2.왜 필요한가?

[번외]웹페이지 구조를 위한 잡지식

목차(클릭하세요)

코드박스가 초보자를 위한 미래다!!

1. 웹(web)의 3대 기본 언어 이해하기

HTML = 집의 뼈대와 구조 (벽, 문, 창문의 위치)

CSS = 집의 인테리어와 디자인 (색깔, 가구 배치, 조명)

JavaScript = 집의 전기와 자동화 시스템 (스위치, 자동문, 스마트홈)

1-1. HTML

핵심 개념: 웹페이지에 나타나는 모든 요소의 배치와 내용을 기술하는 언어

태그(Tag): <div>, <p>, <h1> 등으로 요소를 감싸는 방식

시맨틱: 의미있는 태그 사용 (<header>, <nav>, <main>)

구조화: 논리적인 문서 구조 만들기

1-2.CSS( Cascading Style Sheets)

핵심 개념: 웹 페이지 요소의 스타일을 정할 때 사용하는 언어

선택자(Selector): 어떤 요소를 꾸밀지 선택

1.자바스크립트 기초

목차(클릭하세요)

DOM: (Document Object Model)

[소스코드 참고 사이트]

1. DOM이란?

HTML 문서를 객체의 트리 구조로 표현한 것

•

HTML: 가족 구성원들의 이름이 적힌 종이

•

DOM: 가족 관계를 나타내는 실제 가계도 (부모-자식 관계가 명확한 트리 구조)

•

JavaScript: 가계도를 보고 "김철수의 아버지는 누구지?" 같은 질문에 답하거나, 새 가족 구성원을 추가하는 사람

1-1. 왜 필요한가?

브라우저는 HTML 문서를 읽어서 DOM 트리를 만들고, 자바스크립트로 DOM에 접근하여 내용을 바꾸거나 추가/삭제할 수 있음

•

웹 페이지를 프로그래밍적으로 조작할 수 있게 해주는 인터페이스

1-2.DOM 구조 예시

4.JS 구현을 위한 핵심개념_DOM

목차(클릭하세요)

1. JS만의 함수 특징

1-1. 함수와 호이스팅

호이스팅(Hoisting)은 변수와 함수 선언이 해당 스코프의 최상단으로 "끌어올려지는" JavaScript의 독특한 동작

함수 선언문 호이스팅

이게 왜 될까? 

무슨 장점이라도?

1-2.함수 표현식

함수를 변수에 할당하는 방식으로, 함수를 값처럼 다룰 수 있음

[함수표현식에서 무슨 차이?]

함수 표현식 = 기본적으로 익명 함수를 변수/상수에 할당하는 방식.

3.함수와 객체

목차(클릭하세요)

console출력은 답답 그 잡채 화면으로 직접 보는 방식으로

1. 파이썬과 비교해보는 JS문법 특징

1-1. 4가지 관점에서

세미콜론: JS는 필요, Python은 불필요

중괄호 vs 들여쓰기: JS는 {}, Python은 들여쓰기로 블록 구분

변수 선언: JS는 let/const, Python은 바로 사용

타입: 둘 다 동적 타입이지만 표현 방식이 다름

한줄 주석: 파이썬은 # , JS는 //

1-2.코드 비교

2개는 동일한 출력결과

[변순선언과 출력]

2.JS기본문법 및 코드샌드박스 연습용코드

[번외]웹페이지 구조를 위한 잡지식

1.자바스크립트 기초

2.JS기본문법 및 코드샌드박스 연습용코드

3.함수와 객체

4.JS 구현을 위한 핵심개념_DOM