Web_base
Search
Duplicate
Share
🌐
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)
[소스코드 참고 사이트]
vanilla-spa
SantiagoGdaR
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