Gentleman'study 젠틀맨

웹 폰트(Web font) 웹 페이지에서 사용자 정의 글꼴을 사용하여 보다 다양하게 스타일을 적용하는 방법을 살펴보겠습니다. font-family 값 목록 HTML에 적용된 글꼴은 font-family속성을 사용하여 제어할 수 있습니다. font-family는 하나 이상의 값을 사용합니다. 웹 페이지를 표시할 때 브라우저는 사용할 수 있는 폰트를 찾을 때까지 폰트 모음 값 목록을 다음으로 이동합니다. 위 방법으로 사용해도 정상적으로 잘 작동하지만 폰트 선택이 제한적 입니다. 모든 환경에서 보장할 수 있는 폰트는 수소에 불가합니다. 그래서 등장한 것이 웹 폰트 입니다. 웹 폰트 CSS를 사용하면 웹사이트에 액세스할 때 웹사이트와 합께 폰트를 다운로드 하여 원하는 폰트를 지정할 수 있습니다. 1. CSS에 ..

비디오(video) 요소 HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다. 비디오 요소의 속성 예제 control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다. 태그 사이에 존재하는 텍스..

setTimeout()과 setInterval()은 둘 다 자바스크립트에서 시간간격을 주는 함수입니다. 같은 목적의 함수이기는 하지만 둘 사이에는 약간의 차이가 있습니다. 헷갈려서 정리해 두려 합니다. setTimeout(function, delay)setInterval(function, delay) delay 시간 후에 딱 한 번 실행. delay 시간 마다 반복해서 호출 반복을 위해서는 재귀적으로 호출 한번만 호출하면 반복실행이 되기 때문에 코드가 간결 반복을 종료 : clearTimeout(timeoutName) 반복을 종료 : clearInterval(intervalName) setTimeout은 반복을 위해 함수를 재귀적으로 호출합니다. 따라서 함수 간의 딜레이가 정확하게 실행 될 수 있습니다...

this란? this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다. 쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다. const myObject = { printThis: function() { console.log(this); } } function printThis() { console.log(this); } myObject.printThis(); // {printThis: ƒ} printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 위 코드를 살펴보면, this를 콘솔에 출력하는 printThis라는 함수가 두 개 선언되어 있다. 첫..

콜백함수란? 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다. function checkGang(count, link, good) { count < 3 ? link() : good(); } function linkGang() { console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요'); console.log('https://youtu.be/xqFvYsy4wE4'); } function goodGang() { console.log('오늘 할당량은 모두 채우셨습니다! :)') } checkGang(2, linkGang, goodGang); 예..

GRID CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소 간의 관계를 정의하는데 아주 탁월한 속성입니다. 플렉스는 한 방향 레이아웃 시스템이고 그리드는 두 방향(가로, 세로) 레이아웃 시스템이기 때문에 플렉스보다 더 복합적인 레이아웃을 표현할 수 있습니다. grid 기본 문법 구조 div .container가 부모 요소가 되고 하위 요소인 div. item은 자식 요소가 됩니다. grid 속성 grid-area grid item의 크기와 위치를 설정해 grid를 배치합니다. grid-auto-columns grid container의 크기가 설정되지 않은 열에 대한 기본 크기를 설정합니다. grid-auto-fl..