Web/Advanced Web Programming

고급 웹 프로그래밍 - 정리 - 2

자바스크립트 객체 자바스크립트에는 사용자가 직접 객체를 만들어 사용할 수도 있지만, 기본적으로 제공되는 객체가 있습니다. 자바스크립트에서 기본으로 제공되는 객체로 Array, Boolean, Date, Math등 기본객체가 있으며 이들을 코어 객체라고 합니다. HTML DOM(Document Object Model)객체는 HTML태그들을 객체화 한것이며 주로, HTML 페이지의 내용과 속성 등을 제어하기 위해 사용됩니다. BOM(Browser Object Model)은 브라우저 관련 객체로 브라우저와 관련된 정보를 얻거나 제어할 수 있도록 해줍니다. 브라우저는 HTML페이지를 로드할때 각 태그에 해당하는 DOM객체를 생성합니다. 또한 태그의 포함관계에 따라 DOM객체의 포함관계도 이루어 집니다. DOM객..

고급 웹 프로그래밍 - 기말 정리 - 1

JavaScript 자바스크립트를 사용하는 가장 주된 목표는, HTML, CSS를 동적으로 DOM API를 사용하여 바꾸기 위함입니다. 또한 ECMAScript는 JavaScript의 표준을 정의하는 곳입니다. 이의 역할에 대해 간단히 서술해 보도록 하겠습니다. 요소의 추가 및 삭제 CSS및 HTML요소의 스타일 변경 : 내용 및 모양 동적 제어 사용자와의 상호작용 : 사용자 입력, 계산 폼의 유효성 검증 마우스와 키보드 이벤트에 대한 스크립트 실행 웹 브라우저 제어 및 쿠키 등의 설정과 조회 웹 서버와의 통신 또한 자바스크립트는 loosely typed이고, dynamic language입니다. 이는 딱 어느 타비으로 선언하자 마자 정해지는 것이 아니라, 변수에 값이 할당될 때 마다 그 타입이 바뀝니..

Advanced Web Programming - CSS (2)

박스 모델 기본적인 CSS3의 box-model은 위와 같습니다. 테두리 속성 box-model에서 가장 흔히 사용되는 테두리 스타일의 속성은 다음과 같습니다. 박스 속성 박스의 둥근 모서리 속성값은 위와 같이 설정합니다. 박스의 그림자를 설정하는 기본적인 css구문은 아래와 같습니다. index.html main.css *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } #box-shadow { margin: 10px 20px; } #box-shadow img[src*="jpg"] { width: 300px; height: 200px; object-fit: cover; padding: 20px; ma..

Advanced Web Programming - CSS (1)

CSS의 위치 css는 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트로 작성할 수 있습니다. CSS우선순위 CSS의 우선순위는 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 브라우저 기본 스타일 순으로 적용됩니다. 또한 인라인 스타일 시트가 아래와 같이 중복될 경우 p { color: blue; } p { color: yellow; } p { color: red; } 우선순위와 상관없이 강제 적용 p { color: blue!important; } p { color: yellow; } p { color: red; } 다음과 같이 우선순위와 상관없이 강제 적용이 가능하다. CSS 선택자 css의 선택자에는 전체 선택자, 타입 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자가..