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..

닫는 태그가 없는 태그 일반적인 태그는 처럼 시작하면 처럼 닫아 주어야 합니다. 하지만 일부 태그는 닫지 않는 경우가 있는데 이를 닫는 태그가 없는 태그라고 합니다. 닫는 태그가 없는 태그들 등의 태그는 닫는 태그가 없는데, 그 이유는 태그 내부에 넣을 값이 없기 때문입니다. 기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다. 줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령을 적어 주어야 하며, HTML에서는 를 통하여 줄 바꿈을 합니다. 요소에 이미지를 넣습니다. src특성과 함께 사용해야 하며, 포함하고자하는 이미지로의 경로를 지정합니다. 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 ..

레이아웃 배치를 목적으로 만들어진 기능 컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있다 컨테이너에 적용되는 속성 display: flex 각 아이템(요소)들의 width값과 height값만큼 크기가 변경되고 가로 방향으로 정렬한다 { .container { display: flex; display: inline-flex; } } flex-direction 아이템들이 배치되는 축의 방향을 결정한다, 메인축(정렬된 아이템의 축 기준)의 방향을 가로, 세로로 할지 결정한다 { .container { flex-direction: row; // 아이템들의 방향이 행(가로)으로 정렬된다 flex-direction: column;// 방향을 열(세로)으로 정렬한다 flex-direction: row-reve..

1. section 주제 별로 영역을 그룹화 하기 위해 사용 되며 주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다. 상품 소개 상품 1 상품 2 상품 3 2. article section 태그와 같이 주제 별로 영역을 그룹화할때 사용하지만 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다. 블로그 및 SNS 영역 / 뉴스 기사 / 신문 내용 등에 사용된다 블로그 글 포스팅 1 포스팅 2 포스팅 3 3. 차이점 article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다. section은 주제별로 구분한 그룹이다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 ..

객체나 배열에 대해서 데이터를 불러올때 "..." 기호를 사용하는 방법 배열 const num = [100, 200, 300, 400, 500]; document.write(num); // 100, 200, 300, 400, 500 document.write(num[0], num[1], num[2], num[3], num[4]); // 100 200 300 400 500 (쉼표가 없다) document.write(...num); // ... 키워드를 사용, 100 200 300 400 500 (쉼표가 없다) 객체 const obj = {a: 100, b: 200, c:"javascript"}; document.write(...obj);// 100, 200, javascript 출력 변수에 저장한 뒤 불러..

Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에선 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.) Syntax `string text` `string text line 1 string text line..

addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. 예시로 살펴보겠습니다 #예시 버튼을 누르면 버튼에 적힌 값이 alert창으로 뜨는 스크립트입니다. #html A B C Copied! #js var cols = document.querySelectorAll("#cols .btn"); for (var i = 0; i < cols.length; i++) { cols[i].addEventListener("click", click); } cols[1].style.color = "red"; function click(e) { window.alert..

- setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. 1. setInterval 사용예 "시작" 버튼을 누르면 StartClock() 함수에서 timerId = setInterval(PrintTime, 1000); 을 호출하여 1000ms(1초) 간격으로 PrintTime() 함수를 호출하여 현재 시간을 출력합니다. 이때 반환값을 timerId 변수에 저장해 둡니다. 나중에 중지하는데 사용됩니다. setInterval함수를 호출하기전에 PrintTime()을 한번 호출 하는 이유는 setInterv..

닷닷닷닷 픽셀이란? 픽셀은 사각형의 점으로, 디지털 화상을 구성하는 기본적인 단위이다. 이 점 하나에 해당 색의 정보가 담겨져 있으며, 이는 곧 그림의 용량과 직결된다. 대표적인 포맷은 JPG, PNG, GIF이 있으며, 이를 비트맵 이미지라 한다. 요즈음 대표적인 픽셀은 크롬의 이스터 에그로, 공룡이다. 몰랐지만 엔딩이 있다고 한다 벡터 벡터 이미지는 수학적으로 계산된 경로로 구성된 무한 확대 가능한 디지털 그래픽이다 벡터는 기본적으로 필요에 의해 늘어나거나 구부러질 수 있다 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않는다 또한, 벡터에는 수학이 포함되어 있고, 디자이너는 어도비 일러스트레이터와 같은 프로그램 도구를 사용해 ..

예시 마우스오버를 하면, 서서히 밑줄이 생긴다 구성요소 footer영역으로, h3에는 레이아웃 영역이란 제목이, li목록에는 레이아웃 유형01, 02, 03 등등이 있다. li목록에는 a태그를 주어서, 클릭할 수 있게 만들었다. 방법 li > a에 포지션 relative를 주고, transition을 0.3으로 자연스럽게 한다. 마우스 오버와 마우스 오버하지 않을 때의 차이를 주기 위하여 미세하게 컬러를 바꿔주었다 .footer_menu >div li a { color: rgb(57,57,57); transition: all 0.3s; } .footer_menu >div li a:hover { color: #000; } 가상요소를 주기 위하여 li > a 에 position:relative를 주고, 가상..

개요 가끔, 제목이 길거나 적당히 띄어주지 않으면 내 레이아웃을 넘어서 저 어딘가로 글이 나아가고 있다 그 때 주는 것이 한줄 효과 즉, 한 줄로 나타내는 것인데 이것을 분해해보겠다 분해 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } overflow: hidden; 글이 넘치는 걸 숨겨준다! 정해진 크기에 맞게 딱 없었던 것 처럼 잘라 쓰기 편하다 white-space: nowrap; white-space란, 공백 문자를 처리하는 방법이다. nowrap을 하게 되면 줄글이 밑으로 가지 않게 한다 text-overflow: ellipsis; 출처 : https://aboooks.tistory.com/382 text-overflow는..

집계 함수 CREATE TABLE myRecode ( recodeID int(10) unsigned auto_increment, memberID int(10) unsigned, javascript tinyint unsigned NOT NULL, html tinyint unsigned NOT NULL, css tinyint unsigned NOT NULL, myspl tinyint unsigned NOT NULL, react tinyint unsigned NOT NULL, PRIMARY KEY (recodeID) ) charset=utf8; INSERT INTO myRecode(memberID, javascript, html, css, myspl, react) VALUES(1, 80, 40, 10, 10,..

테이블 합치기 JOIN 사용하기 SELECT 필드명 FROM 테이블명 엘리어스 JOIN 연결할 엘리어스 ON(조건문); SELECT m.youName, m.youEmail, r.youCont, r.regTime FROM myMember m JOIN myReview r ON(m.memberID = r.memberID); CREATE TABLE myMember ( memberID int(10) unsigned auto_increment, youEmail varchar(40) NOT NULL, youName varchar(20) NOT NULL, youPass varchar(20) NOT NULL, youBirth varchar(12) NOT NULL, youAge varchar(20) NOT NULL, yo..

데이터 수정하기 UPDATE 테이블명 SET 컬럼명 조건 모든 회원의 비밀번호를 '1234'로 변경 UPDATE myMember SET youPass = '1234'; 아이디번호가 3번인 회원의 비밀번호를 '1234'로 변경 UPDATE myMember SET youPass = '1234' WHERE memberID = 3; 5번부터 10번까지의 비밀번호를 '1234567'로 변경 UPDATE myMember SET youPass = '1234567' WHERE memberID BETWEEN 5 AND 10; 아이디 내림차순 UPDATE myMember SET youPass = '****' ORDER BY memberID DESC LIMIT 10; 데이터 삭제하기 전체 데이터 삭제 DELETE FROM ..

테이블 데이터 데이터 입력하기 INSERT INTO 테이블 이름(필드명) VALUES(데이터); INSERT INTO mymember(youEmail, youName, youPass, youBirth, youAge,youPhone, regTime) VALUES('GarenChoi@naver.com','최근영','1234','19970117','26','01054651345','234'); 데이터 불러오기 SELECT 대상 FROM 테이블 명; 전체 데이터 불러오기 SELECT * FROM 테이블 명; SELECT * FROM myMember; 조건 데이터 불러오기 SELECT * FROM 테이블 명 WHERE 조건; 회원 아이디가 10번인 경우 SELECT * FROM myMember WHERE memb..