비개발자도 쉽게 배우는 디지털 환경 기초 지식
HTML, CSS, DOM, BOM 등 웹사이트를 이루는 근본적인 기초 개념들을 배울 수 있으며, 개발자가 아니더라도 어려운 개발용어와 디지털마케팅과 웹디자인, 개발, Ai, 바이브 코딩 등 디지털 환경에서 발생하는 다양한 동작과 관계를 이해할 수 있습니다.
웹 크롤링 (Web Crawling)
웹사이트의 정보를 자동으로 수집하는 기술입니다. 사람이 일일이 복사-붙여넣기 할 필요 없이, 프로그램이 웹페이지를 돌아다니며 원하는 데이터를 모아줍니다.
CSS
웹 디자인의 비밀, CSS! 웹사이트를 매력적으로 바꾸고 싶으신가요? CSS가 바로 그 해답입니다. 폰트, 색상, 레이아웃까지, CSS를 통해 웹사이트의 디자인을 완벽하게 제어해보세요. 지금 바로 CSS의 매력에 빠져보세요!
Javascript
JavaScript는 웹사이트의 생동감을 불어넣는 주인공입니다. 장바구니, 스크롤, 비밀번호 입력 등 웹 페이지의 기능을 하는 자바스크립트를 지금 바로 알아보고 디지털마케팅과 이커머스 데이터의 세계로 발을 내딛어 보세요!
BOM (Browser Object Model)
BOM(Browser Object Model)이란 웹 브라우저 자체를 제어하는 기술입니다. 브라우저의 기능(뒤로 가기, 화면 크기, 브라우저 종류 등)을 JavaScript로 조작할 수 있게 해줍니다. BOM을 활용하여 사용자 경험을 개선하고, 다양한 환경에 최적화된 웹 페이지를 만들 수 있습니다.
DOM (Document Object Model)
웹 개발, DOM이 궁금하다면? 버튼, 텍스트, 이미지까지, 웹 페이지의 모든 요소를 이해하고 다룰 수 있도록 돕는 DOM의 개념과 활용법을 지금 바로 확인하세요! 클릭 한 번으로 디지털 이해력과 실력을 성장시킬 수 있습니다.
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에게 원하는 결과물의 형태를 알려줄 때 핵심이 되는 개념입니다.
HTML
HTML은 무엇일까요?