브라우저 객체 모델 (Browser Object Model : BOM) 실제 우리가 사용하고 있는 브라우저와 관련된 객체의 집합이다. 대표적으로 window(최상위 객체), location, navigator, history, screen, document 객체가 있다. window 객체 구조도 location Object: 웹 링크, ...

skip navi란? 사용자 편의 및 웹 접근성향상을 위한 skip navi를 body 최상단에 넣어준다. 마우스나 키보드를 사용하지 못해 tab키를 사용해야 하는 사용자에게 사이트 최상단에 바로가기를 만들어 줌으로써 원하는 영역에 바로 갈 수 있게 도와주는 기능을 한다. 사용예제 <div id="skipNav"> <a hr...

CSS3 animation CSS의 속성을 이용하여 애니메이션을 표현할 수 있다. CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. 장점 CSS 애니메이션은 기존에 사용되던 스크립트를...

open graph 태그란? 페이스북이나 네이버 블로그, 카카오톡 등에서 링크를 공유하면 자동으로 링크에 대한 미리보기 제목, 설명, 이미지를 제공하게 되는데, 이를 제어할 수 있는 태그 오픈그래프 프로토콜은 페이스북에 의해서 처음 만들어 짐 오픈그래프는 HTML문서의 메타정보를 쉽게 표시하기 위해 만들어짐 메타정보에 해당하는 제목,...

CSS3에서는 선택자 속성이 새롭게 추가되었다. selector를 사용하게 되면 id나 class를 대폭 줄일 수 있는 장점이 있다. 유사클래스 네임 (해당 문자를 포함하는 클래스 명) <div class="box1"> <ul> <li class="hana dul set">배분 대표사업의 핵심 브랜드화&...

input 요소 HTML5 에서는 강력한 form 속성을 지원한다. 때문에 어려운 스크립트 없이도 다양한 ui를 표현할 수 있다. 이메일 입력을 위한 email <input type="email" value="some@email.com"> 리소스 주소 입력을 위한 url <input type="url" name="user_u...

객체는 세상에 존재하는 모든 것이다. 자동차 객체의 모델링 객체 car 속성 car.nave = "Sonata" car.speed = 100 car.color = "White" car.door = 4 메소드 car.s...

함수 선언과 호출 형식 function 함수명(매개변수1, 매개변수2, ···){ //함수선언 실행 문장; return 반환값; } 함수명(인자1, 인자2, ···); //함수 호출 인자: 함수를 호출할 때 전달하는 입력값 매개변수: 함수 호출문에서 전달한 인자를 받기 위해 선언된 변수 function: 함수를 선언할 때 사...

제어문이란? 프로그램의 실행 과정을 제어하기 위해 사용하는 구문 조건문 조건에 따라 다음 문장을 선택적으로 실행 if if~else 다중 if~else switch~case 반복문 동일한 명령을 여러 번 처리하거나 특정 연산을 반복적으로 처리 for while do~while 보조 제어문 조건문을 만나면...

연산자란 프로그래밍에서 특정의 계산을 하기 위해 만들어진 기호들이다. 연산자에는 산술, 관계/비교, 논리, 대입, 복합, 증감연산자 등이 있다. 계산의 우선순위를 갖고있으며 ( ) 연산자로 우선순위를 높일 수 있다. 우선순위 순서 : 전위형증감연산자(++a) > 산술 > 관계 > 논리 > 대입 > 복합 &...