![]()
웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다. 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 표현한다 이를 DOM이라 하고, 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링한다. DOM: 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스 이벤트 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 각각의 이벤트들은 이벤트 핸들러를 가짐. 이벤트 핸들러?: 이벤트가 발생되면 실행될 코드 블록 *이벤트 핸들러 등록 시 함수 명만 대입해야 함* ex...
콘솔 브라우저의 디버깅 콘솔. 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근 가능함. 디버깅 콘솔: 개발자 도구의 console window.console = console(의미 동일함) 콘솔 객체는 윈도우의 하위 객체. 콘솔은 다양한 메소드를 가지고 있음 console 객체의 log 메소드 js 창에 입력: window.console.log() 콘솔 창에 기록을 남기겠다 ex).window.console.log('daram'); / console.log('daram'); console.clear() 내용 지우기 변수 선언 방식 let 변수이름; 변수 선언 변수=데이터; 변수 초기화 let 변수이름=데이터1; 동시에 숫자, 문자열 등 다양한 자료형 사용 가능 let messi..
![]()
변형 요소의 크기나 위치를 바꾸는 것(요소의 x축과 y축을 기준으로 함) transform 속성: 좌표 평면 상에서 각 축의 값을 변경 transition: 스타일 속성을 완전히 다른 스타일로 변형 가능. 다양한 애니메이션 효과. 실행 시간, 방벙 등 변환 가능함 transition 속성: property duration delay timing-function transition에 의한 변화 실행될 때는 실행 시간을 지정해 원하는 시간 동안 변화가 이어나게 할 수 있음 .parent{ display: inline-block; margin: 0 20px; } .child{ width:150px; height: 150px; background-color: teal; } .parent:nth-child(1) ..
vscode로 만든 html 파일 netlify로 도메인에 구현하기 코딩 독학하기2 : 내가 만든 사이트 인터넷에 공개하기(.COM 도메인, HTTPS 적용하기,HTML템플릿 수정하기) (조코딩 유튜브로 공부하기) (tistory.com) 무료 정적 웹 호스팅 netlify 소개 (tistory.com)
크롬, 파이어폭스 브라우저가 html5 표준 가장 잘 지킴 -> 구글 크롬 사용 권장 컴퓨터 폴더에 웹 페이지 작성한 뒤 탐색기로 클릭하여 웹 브라우저와 함께 웹 페이지 출력 x 웹 서버(몽구스)를 설치하면 다른 사용자가 방문 가능함 (웹 서버 사용 권장) 웹 페이지의 주소, URL 프로토콜 서버주소 tcp/ip포트번호 경로명 웹 페이지 파일 이름 http://www.oracle.com:80/technetwork/java/index.html html - 웹 페이지의 구조와 내용 css - 웹 페이지의 모양 Javascript - 웹 페이지의 동적 변경 미 응용 프로그램 작성 (사용자의 마우스나 키보드 입력에 따라 웹 페이지를 동적으로 변화시키거나 게임 등 웹 페이지를 하나의 응용프로그램으로 만드는 데 이..
