개발자 데뷔!

DOM : 문서 객체 모델 (Document Object Model) XML, HTML 문서의 각 항목을 계층으로 표현해 생성, 변형, 삭제할 수 있도록 돕는 인터페이스. (W3C 표준) HTML 문서의 요소를 tree 구조로 표현한다. 웹브라우저는 HTML 문서를 읽고 DOMTree를 생성한다. 직관적으로 위의 DOM Tree 그림은 다음과 같은 html 코드로 부터 생성된 것이다. A heading Link text 이를 liveserver로 실행시키면 다음과 같은 화면이 뜬다. DOMTree 요소 접근하기 위의 기본 코드에, 위 코드에서 변수 a는 body의 첫번째 자식의 content, 즉 태그를 가리키는 것이고, 변수 b는 body의 두번째 자식의 content, 즉 태그를 가리킨다. 변수a(=..

브라우저에서 관리자탭 열기 이용중인 웹페이지의 관리자 탭을 열면, 이용중인 웹페이지의 html 코드를 바로 확인할 수 있다. chrome 기준 F12 단축키 누르기 or 마우스 우클릭 > 검사 페이지 해상도에 따른 웹페이지 확인 관리자탭의 상단에 두번째 아이콘 'Togle device toolbar'클릭 왼쪽 브라우저 화면의 상단 select에서, 디바이스 기기 종류 (ex) 아이폰, 데스크탑, 등등) 선택 가능

CSS의 디스플레이 요소에는 네가지 종류가 있다. inline block inline-block flex 차례대로 살펴보자. flex 기능 연습 사이트) https://flexboxfroggy.com/#ko Display 요소 1. inline 요소 → span 태그 / a태그 줄바꿈 X 계속 이어서 나란히 배치 width, height 속성 지정 불가 margin, padding-top, padding- bottom 등 모든 여백 간격지정 불가 2. block 요소 → div 태그 / p 태그 / h1 태그 줄바꿈 O 한 요소당, 한 줄 차지 margin, padding 모든 여백 간격 지정 가능 3. inline-block 요소 → button 태그 / select태그 줄바꿈 X width,heigh..

CSS : Cascading Style Sheets : 마크업 언어가 실제 표시되는 방법을 기술하는 '스타일 언어'(style sheet language) 레이아웃, 스타일 (ex_ 컬러, 폰트) 등을 정의한다. HTML, XHTML에 주로 쓰인다. (+ XML) '마크업 언어' ex: HTML 로 웹사이트의 개략적인 몸체를 구성하고, '스타일 언어' ex: CSS로 웹사이트 각각의 구성요소를 디자인한다고 생각하면 된다. css 속성값이 궁금할 경우, css교과서와 같은 다음 링크에서 검색해 자세한 내용을 찾아볼 수 있다. [MDN (CSS사전)] https://developer.mozilla.org/ko/ CSS 기본구조 다음 기본구조를 Declaration(선언)이라 하며, 선택자(selector) ..

HTML은 기본적으로, '태그 구조'로 이루어진다. 다음을 따라가보자 태그 구조 기본적으로, 다음과 같이 한 쌍의 태그 사이에 콘텐츠가 표시되는 형태이다. 이 형태를 하나의 'element, 요소' 라고 한다. 콘텐츠 태그 : type을 나타냄 속성 : 태그가 가진 속성 콘텐츠 : 실제 표시될 내용물 html 코드는 기본적으로 이같은 태그 구조로 이루어져있고, 태그구조 간에 포함관계가 성립될 수 있다. = 즉, 한 태그가, 다른 태그 내부의 '콘텐츠'로 사용될 수 있다. 여러개의 속성이 한 태그안에 들어갈 수 있다. 태그 종류 태그 역할 사용 제목(heading) - h1~h6까지 사용할 수 있다. - h1이 가장 큰 제목, 숫자가 커질 수록 작은 제목 링크(anchor) - 인라인 요소 - href 속..

VSCode : 소스코드 편집기. 기본 디버깅 지원 및, git제어, JavaScript, TypeScript, CSS, HTML 또한 기본으로 지원한다. 그 외에 '확장(extension)'기능을 통해 다운로드 받아서 언어및 기능 확장을 할 수 있다. 기본 사용방법 바탕화면 등 원하는 곳에 '새폴더'를 생성해, 다음 기본화면 (시작하기 탭)에, 1. 드래그& 드롭을 통해 간단히 프로젝트 파일을 열 수 있다. 이후 좌측 메뉴바 에서 폴더 구조를 확인할 수 있는데, 2. 좌측 메뉴바 상단의 아이콘에서, 파일&폴더를 추가할 수 있다. 파일 이름설정 할 때 확장자를 .html, .js, .txt 등등 으로 지정해 해당 언어로 작업할 수 있음 Extension : VSCode 에서는, '확장' 탭에서 검색을 통..

웹을 공부하려면 필수적으로 알아야 하는 개념을 정리했다. UI/UX UI : User Interface 유저가 사용할 인터페이스 (시각화) UX : User Experience 사용자 경험에 의한 디자인, 설계 주요 기술 스택 FrontEnd BackEnd 기반언어 JavaScript JavaScript Java Python 주요기술 React.js Node.js Spring/SpringBoot Django Vue.js Flask * HTML / CSS /JavaScript 는 필수적으로 공부할 것! JavaScript 다양한 웹브라우저에 JavaScript 인터프리터가 내장되어있다. AJAX 통신법의 기반 jQuery : 자바 라이브러리 Node.js 의 기반 AJAX : Asynchronous Jav..

Front-End 사용 프레임워크 및 라이브러리 종류 !! ( 발전과정 ) 프레임워크 삼대장) angular(프레임워크) 장점) 양방향 바인딩 react(라이브러리) 장점) 가상돔 vue(프레임워크) 장점) 양방향 바인딩 + 가상돔 * 프레임워크와 라이브러리의 차이 : 제어권의 역전! 라이브러리는 주권이 개발자 ! 프레임워크는 전체적인 틀에 일부를 개발자가 변경 ! * 프론트엔드 프레임워크의 필요성 : Component 기반 웹 개발 & 빠른 돔제어 의 필요성 ****** this) " 함수 호출 시점에 바인딩 (정해진다) 1. 일반 함수로 호출 -> 전역객체 bbq() -> window.msg, window.nextMsg 2. 메서드로 호출 -> 그 메서드를 소유한 객체 (함수이름 앞) app.bbq(..