babydevelopbabydevelop

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 content-box border-box 둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리..

웹폰트 적용하기 눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용한다 @font-face { font-family: 'SDSamliphopangche_Outline'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff') format('woff'); font-weight: normal; font-style: normal; } 적용 body { font-family: 'SDSamliphopangche_Outline'; } Google Fonts 적용 body { font-family: 'Roboto', sans-serif; } 폰트 파일 적용하기 파일을 다운..

1. while문 while문 형식 초기식 while(조건식){ 조건에 만족할 동안 실행할 명령문=증감식 } while문 예시 var i = 0; while (i < 12){ if (i % 2 == 0) document.write("" + i + ""); elsedocument.write("" + i + ""); i++; } 2. do while문 do while문 형식 do { 반복할 명령어; } while (조건식); do while문 예시 var i = 10; do { document.write("hello!!"); } while ( i < 3 ); 3. for문 for문 형식 for (초기식; 조건식; 증감식) { 조건식이 참일때 반복할 명령어; } for문 예시 for ( var i = 1; i

동기(synchronous), 비동기(asynchronous)란 ? 동기(synchronous) 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행하는 것을 동기라고 한다. 쉽게 말해서, 코드가 동작한다고 할 때 코드 한 줄이 완료가 된 후 그 뒤에 코드가 실행되고, 그 뒤에 코드가 완료가 된 후, 그다음 코드가 실행되는 것이 동기적으로 작동하는 코드라고 한다. 비동기(asynchronous) 요청을 보낸 후 응답에 관계없이 다음 동작을 실행하는 것을 비동기라고 한다. 쉽게 말해서, 코드가 동작할 때 시간이 오래 걸리는 코드가 있으면 그 코드와 상관없이 다음 코드가 실행되는 것이 비동기적으로 작동하는 코드라고 한다. 자바스크립트는 동기적으로 동작? 비동기적으로 동작? 그렇다면 자바스크립트는 코드가 동기..

Javascript, The Arguments Object function makeSum (num1, num2) { return num1 + num2; } makeSum(4, 7); 만약에 위와 같이 어떤 숫자의 합을 구하는 간단한 function을 만들었다고 해보자. 함수 파라미터로 num1, num2에 각각 숫자를 넣으면 그 숫자의 합을 구해서 return하는 함수이다. 그런데 위와 같이 함수를 만들면 우리는 딱 2개의 숫자만 더할 수 있다. 그러니까 즉, 함수를 처음 만들 때 지정한 parameter의 개수만큼만 가져와서 연산할 수 있다는 말이다. 그렇다면 만약에 어떤 경우에는 파라미터로 3, 5, 6, 8을 넘겨주고 이 숫자들의 합을 구하고 어떤 경우에는 7, 34, 2, 7, 8, 23, 4 이..

정규표현식(regex)이란? 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 언어. 정규표현식을 사용하면, 복잡한 조건문이 아닌 한줄로 간단히 표현할 수 있다.(가독성은 떨어지기 때문에 숙지필수!) 주로 문자열의 검색과 치환을 위한 용도로 쓰인다. 언제 쓸까? text에서 원하는 특정 pattern을 찾을 때 (전화번호/ 홈페이지 등) pattern을 다른 문자열로 변환 사용자가 입력한 데이터가 특정 pattern에 유효한지 유효성 검사 (이메일 / 비밀번호) 사용법 1. 기본규칙 // RegExp 객체를 이용하는 방법 const regex = new RegExp(pattern, flag); // 객체초기화 방법 const regex = /pattern?/flag; +) flag g(globa..

이번예제도 display: flex로 만든 예제입니다. 더욱 더 다양하게 나눠봤습니다!

JOIN JOIN JOIN은 데이터베이스 내의 여러 테이블에서 가져온 레코드를 조합하여 하나의 테이블이나 결과 집합으로 표현해 줍니다. 이러한 JOIN은 보통 SELECT 문과 함께 자주 사용됩니다. 표준 SQL에서는 레코드를 조합하는 방식에 따라 JOIN을 다음과 같이 구분합니다. 1. INNER JOIN 2. LEFT JOIN 3. RIGHT JOIN INNER JOIN INNER JOIN은 ON 절과 함께 사용되며, ON 절의 조건을 만족하는 데이터만을 가져옵니다. 문법 1. 첫번째테이블이름 INNER JOIN 두번째테이블이름 ON 조건 2. 첫번째테이블이름 JOIN 두번째테이블이름 ON 조건 ON 절에서는 WHERE 절에서 사용할 수 있는 모든 조건을 사용할 수 있습니다. 표준 SQL과는 달리 M..