김기지의 코딩노트

🔖 객체 사전적인 의미는 실세계에 존재하는 대상 또는 생각할 수 있는 어떤 개념 🔍 자바스크립트에서의 객체란? 값 또는 기능을 가지고 있는 데이터 즉, 소프트웨어적 사물로써 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단이다. 🏷️ 최초의 객체 : 웹 브라우저 웹 브라우저는 소프트웨어에 세계에 존재하는 사물, 즉 객체이다. 자바스크립트는 웹 브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어로, 사용자가 웹 브라우저에게 명령을 내릴수 있도록 돕기 위해 웹 브라우저와 관련된 다양한 객체들을 제공한다. 그 중 대표적인 객체는 window객체이다. 📎 자바스크립트 코드 내에서 window를 입력하면 웹 브라우저에 접근할 수 있다. 🏷️ 객체 사용하기 객체는 값 또는 기능을 가지고 ..

(유노코딩의 자바스크립트 기초 영상을 보고 공부한 내용 정리) ◎ DOM이란? 브라우저는 HTML문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTMLZ코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. 🔍 렌더링에서는 무슨 일이 일어날까? 더보기 브라우저는 HTML코드를 해석해서 요소들을 트리형태로 구조화해서 표현하는 문서(객체)를 생성한다. 이 객체를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. ● DOM의 존재 목적 DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의 할 수 있도록 제공되는 프로그래밍 인터페이스이다. 자바스크립트가 웹 문서에 대한 어떤 동작을 구현하고 ..

◎ 임베디드 요소 (외부의 소스를 불러와 페이지에 삽입) 1. 이미지 ○ : 이미지 삽입 요소(빈요소). 내부에 코드 입력이 아닌 속성으로 이미지 형태를 정의. ● 웹에서 사용하는 이미지 유형 브라우저마다 지원하는 형식이 다르기때문에 이미지가 안나오는 경우도 있음. 약어 MIME타입 파일 확장자 요약 래스터이미지 JPEG image/ jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp 정지 이미지의 손실 압축에 적합(압축률이 좋을수록 로딩이 빠름) PNG image/ png .png 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한경우(아이콘, 제품사진 등) JPEG보다 선호됨 GIF image/ gif .gif 여러장의 이미지로 이루어진 애니메이션 표현 가능. 사용되는 컬러는 제한..

◎ 구조를 타나내는 요소 1. 컨테이너 ○ : 컨텐츠 분할요소. css로 꾸며주기 전에는 컨텐츠나 레이아웃에 어떠한 영향도 주지 않음. 순수 컨테이너로 아무 의미도 갖지 않음. 블럭레벨로 작동함. ○ : 구문 컨텐츠를 위한 통용 인라인 컨테이너. 2. 시멘틱 웹 (Semantic web) ● 시멘틱 : 의미의, 의미론적인 ↔ non-semantic ● 요소의 의미를 고려하여 구조를 설계하고 코드를 작성 로 구역을 나눈다면 해당 구역이 의미하는 바가 잘 보이지 않음. → 시멘틱 태그로 나타내기 ▶ 의미론적인 마크업 사용시 이점 검색엔진은 의미론적 마크업을 분석하여 중요한 키워드로 간주하기 때문에 필요한 정보를 바로 찾을 수 있음 스크린 리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용하므로 웹 접..

◎ 실습환경세팅하기 메모장에서도 코딩은 가능하지만 왜 안할까? → 가독성이 떨어지기 때문 ○ 웹 에디터 (편집기) - HTML문법에 맞추어 편리하게 작성할 수 있도록 도와주는 편집기 - 문법에 따라 색, 들여쓰기 등을 구분할 수 있음 - 온라인 웹 에디터 : jsbin, replit, condepen 등 ○ 통합 개발 환경(IDE) - 개발을 할 때 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록함 코드를 작성하기 위한 소스코드 편집기 작성한 코드에 문제가 없는지 체크해주는 디버거 추가적인 기능을 제공하는 플러그인 - Visual Studio Code, IntelliJ, X code, Eclipse 등 (실습에는 VScode를 사용) ○ VScode 확장 프로그램 있으면 유용한 확장 프로그램을..

◎ HTML : Hypertext Markup Language (웹페이지를 이루고 있는 마크업 언어) HTML은 웹을 이루는 가장 기초적인 구성 요소로, 요소의 구조를 나타내는 역할을 한다. ○ HTML작성법 웹 페이지를 구성하고 있는 요소(element) 하나하나를 "태그(tag)"라는 표기법으로 작성 태그를 통해 어떤 요소인지(제목, 본문, 이미지, 비디오 등) 명시 태그의 이름은 HTML5 웹 표준에 맞게 작성 ● 태그의 구성 여는 태그 (opening tag) : 닫는 태그(closing tag) : ( 요소의 이름은 여는 태그와 일치해야함) 내용(content) : 요소의 내용 → 브라우저에 표시됨 요소(element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 함 - 빈 요소(Empt..