웹이 어떻게 도는지 비개발자 눈높이로
13개 개념, 총 학습 약 140분
비개발자도 쉽게 배우는 디지털 환경 기초 지식
HTML, CSS, DOM, BOM 등 웹사이트를 이루는 근본적인 기초 개념들을 배울 수 있으며, 개발자가 아니더라도 어려운 개발용어와 디지털마케팅과 웹디자인, 개발, Ai, 바이브 코딩 등 디지털 환경에서 발생하는 다양한 동작과 관계를 이해할 수 있습니다.
웹 크롤링 (Web Crawling)
웹사이트의 정보를 자동으로 수집하는 기술입니다. 사람이 일일이 복사-붙여넣기 할 필요 없이, 프로그램이 웹페이지를 돌아다니며 원하는 데이터를 모아줍니다.
HTML (HyperText Markup Language)
웹페이지의 구조와 의미를 정의하는 마크업 언어입니다. 제목, 링크, 이미지 같은 요소로 페이지의 뼈대를 만듭니다.
CSS (Cascading Style Sheets)
HTML로 만든 웹페이지의 색상, 글꼴, 배치를 꾸미는 스타일 언어입니다.
JavaScript (자바스크립트) 이해하기
JavaScript는 웹사이트의 생동감을 불어넣는 주인공입니다. 장바구니, 스크롤, 비밀번호 입력 등 웹 페이지의 기능을 하는 자바스크립트를 지금 바로 알아보고 디지털마케팅과 이커머스 데이터의 세계로 발을 내딛어 보세요!
BOM (Browser Object Model)
BOM(Browser Object Model)이란 웹 브라우저 자체를 제어하는 기술입니다. 브라우저의 기능(뒤로 가기, 화면 크기, 브라우저 종류 등)을 JavaScript로 조작할 수 있게 해줍니다. BOM을 활용하여 사용자 경험을 개선하고, 다양한 환경에 최적화된 웹 페이지를 만들 수 있습니다.
DOM (Document Object Model)
브라우저가 HTML 문서를 읽어 만든 트리 구조로, 자바스크립트가 웹페이지의 요소를 찾고 조작할 때 쓰는 통로입니다.
Element (요소)
웹페이지를 구성하는 가장 작은 부품이 Element(요소)입니다. 버튼, 이미지, 텍스트 등 화면에 보이는 모든 것이 각각 하나의 Element이며, 이들이 조립되어 하나의 웹사이트를 완성합니다.
Attribute (속성)
Attribute(속성)는 HTML Element에 붙는 추가 정보입니다. 택배 상자의 송장처럼, 이름표(id), 분류표(class), 목적지(href) 등을 통해 각 Element를 식별하고 동작을 결정합니다.
Selector (선택자)
웹페이지에서 특정 Element를 찾아내기 위한 '주소'나 '이름표' 같은 것입니다. CSS에서 스타일을 적용하거나, GTM에서 클릭 이벤트를 추적할 때 '이 버튼'을 지정하는 방법입니다.
API (Application Programming Interface)
서로 다른 프로그램이나 서비스가 서로 소통하고 데이터를 주고받을 수 있도록 만들어진 '약속된 연결 통로'입니다.
Cookie (쿠키)
웹사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일로, 사용자를 기억하고 추적하기 위한 정보를 담고 있습니다.
도메인과 셀프호스팅 (Domain & Self-hosting)
도메인은 인터넷에서 내 서비스를 찾을 수 있는 고유 주소이고, 셀프호스팅은 남의 플랫폼 대신 내가 직접 서버를 운영하는 방식입니다.
JSON과 데이터 구조 (JSON & Data Structures)
JSON은 데이터를 주고받을 때 가장 널리 쓰이는 텍스트 형식이고, 데이터 구조는 정보를 담는 그릇의 모양입니다. AI에게 원하는 결과물의 형태를 알려줄 때 핵심이 되는 개념입니다.