I'm a Fig, Not a Pig

overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때 유용하다. visible overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본값이다. overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나온다. 또한 overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여준다. See the Pen Untitled by lin (@nnlynn) on CodePen. hidden 반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨길 ..

transform 이 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬 때 사용한다. 1. translate (이동) 요소를 각각 x축과 y축으로 지정 한 값 만큼 이동시킨다. .box:hover { transform: translate(100px, 50px); } px대신 %도 가능하며 위 코드는 평소에는 원래 위치해있고, 마우스 오버시 X 100px, Y 50px씩 이동한다. 2. scale (늘리거나 줄이거나) 요소의 크기를 변경하는 태그이며 (좌우, 상하)로 늘어난다. translate과 마찬가지로 scale(X, Y)로 입력해 사용하며 단위는 '기존 사이즈의 몇 배' 이므로 width, height의 속성과는 다르다. .box:hover { transform: scale(2, 1.5)..

C에서는 정수나 문자열 외에도 다양한 데이터 타입이 정의되어 있다. 또한 각 타입에 맞는 형식 지정자를 통해 적절한 포맷으로 출력하고, 다양한 연산자를 통해 조건문을 설정하거나 데이터 값을 계산할 수 있다. 데이터 타입 아래 목록은 변수의 데이터 타입으로 사용할 수 있는 것들이다. bool: 불리언 표현, (예) True, False, 1, 0, yes, no char: 문자 하나 (예) 'a', 'Z', '?' string: 문자열 int: 특정 크기 또는 특정 비트까지의 정수 (예) 5, 28, -3, 0 long: 더 큰 크기의 정수 float: 부동소수점을 갖는 실수 (예) 3.14, 0.0, -28.56 double: 부동소수점을 포함한 더 큰 실수 * int는 대략 40억까지 셀 수 있기 때문..

isEven() isEven 함수는 주어진 숫자가 짝수인지의 여부를 반환한다. 나머지 연산자(%)를 활용하여 아래와 같이 홀/짝인지 확인할 수 있는 코드를 짤 수 있다. const isEven = n => n % 2 === 0; console.log(isEven(8)); // true console.log(isEven(23)); // false console.log(isEven(514)); // true

1. parseFloat() parseFloat()는 문자열을 실수로 바꾸는 함수이다. 수로 시작할 때 그 수를 실수로 바꾼다. 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꾼다. 공백으로 시작하면 공백은 무시한다. 수가 아닌 문자로 시작하면 NaN을 반환한다. 구문 parseFloat( string ) 2. parseInt() parseInt()은 문자열을 정수로 바꾸는 함수이다. string을 n진법일 때의 값으로 바꾼다. n은 옵션으로 2부터 36까지 입력할 수 있다. 입력하지 않으면 10으로 처리한다. string의 처리는 parseFloat()와 거의 같다. 소수 부분은 버린다. 0x로 시작하면 16진법으로 처리한다. 구문 parseInt( string, n ) 3. isNaN() isNa..

Math.sqrt() : 제곱근 구할 때 Math.max() : 배열에서 최대 값 구할 때 Math.min() : 배열에서 최소값 구할 때 Math.PI() : 원주율 반환 Math.random() : 난수 생성 Math.abs() : 인자값에 대한 절대값을 반환하는 함수 Math.trunc() : 소수점 이하는 버림 Math.round() : 반올림 Math.floor() : 내림 floor => 바닥까지 내린다고 생각 3.5 -> 3 -3.5 -> -4 Math.ceil() : 올림 ceiling => 천장까지 올린다고 생각 3.5 -> 4 -3.5 -> -3 * 주의할 점 Math.trunc()는 소수점 이하는 다 버리기 때문에 숫자가 -23.3 음수인 경우에도 -23을 Return한다. Math...

목차 1. 증감 연산자 2. 후위 연산자 (Postfix Operator) 3. 전위 연산자 (Prefix Operator) 1. 증감연산자 증가연산자 ++ 감소연산자 -- 로 나뉜다. 전위 ++n 와 후위 n++ 로 나뉜다. 증감 연산자만 단독으로 사용할 때는 큰 차이가 없지만 다른 변수에 할당할 때는 위치에 큰 차이가 난다. 2. 후위 연산자 (Postfix Operator) n++; n--; #include int main() { int num1 = 2; int num2 = 2; int num3; int num4; num3 = num1++; // num1의 값을 num3에 할당한 뒤 num1의 값을 1 증가시킴 num4 = num2--; // num2의 값을 num4에 할당한 뒤 num2의 값을 1..

Shift + Alt + F : 코드 자동 정렬 Alt + Shift + A: 블럭 주석 처리 control + shift + L : 선택한 단어와 같은 단어 모두 선택 변수명 변경: f2 alt + shift + 아래: 라인 복사

1. include() includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. - MDN 구문 arr.includes(valueToFind[, fromIndex])​ includes() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인해주는 용도로 사용된다. 문자열에서 valueToFind가 발견되면 true를 반환하고, 그렇지 않으면 false를 반환한다. 예제 includes() 메서드를 사용하여 문자열에 @이 들어있는지 확인해보면 @이 들어있는 경우 true를 반환한다. let email = 'ab123@example.com'; console.log(email.includes('@')); // true 또한 includes()는 대소문자를 구분하기 때문에 다음의 코드..

유사 객체 배열(array-like objects)란 무엇이고 배열과 어떤 차이가 있는지 간단하게 알아보겠다. 1. 유사 배열 객체 유사 배열 객체란 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. 2. 예시 HTML Hello World I'm Programmer JavaScript const texts = document.querySelectorAll('.text'); console.log(texts); 결과값 배열처럼 보이지만 풀어보면 아래와 같이된다. { 0: div.text, 1: div.text, 2: div.text..