Welcome to Visit!!
Let's get it
웹 개발자로의 새로운 여정을 시작해 보겠습니다.
여러분들의 방문을
진심으로 환영합니다
웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃
참고하는 웹사이트 목록 💻
필자가 자주 참고하는 웹사이트를 둘러보세요.
CSS 스타일링 🎨
웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.
목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
[JavaScript] 🌟 Math 메소드 💯 총 정리 본문
목차
Math 객체
Math 객체
는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다.
Math 객체
는 다른 전역 객체와는 달리 생성자(constructor)
가 존재하지 않는다.
따라서 따로 인스턴스를 생성하지 않아도 Math 객체
의 모든 메소드나 프로퍼티를 바로 사용할 수 있다.
Math 메소드
자바스크립트는 웹 브라우저상에서 수학적 작업을 손쉽게 할 수 있도록 다양한 Math 메소드
를 제공하고 있다.
그 중에서 가장 많이 사용되는 대표적인 Math 메소드
는 다음과 같다.
Math.min()
Math.max()
Math.random()
Math.round()
Math.floor()
Math.ceil()
Math.sin()
대부분의 Math 메소드
는 웹 브라우저마다 다른 결과값을 얻을 가능성이 높다. 심지어 같은 자바스크립트 인터프리터라도 운영체제가 다르면 다른 결과값을 반환할 수 있다.
따라서 아주 정확한 결과값이 필요한 작업에는 Math 메소드
는 사용하지 않는 것이 좋다.
Math.min() 메소드
Math.min()
메소드는 인수로 전달받은 값 중에서 가장 작은 수를 반환한다. 인수가 전달되지 않으면 Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.
Math.min(); // Infinity
Math.min(1, 10, -100, -10, 1000, 0); // -100
Math.min(1, 10, -100, -10, "-1000", 0); // -1000
Math.min(1, 10, -100, -10, "문자열", 0); // NaN
Math.max() 메소드
Math.max()
메소드는 인수로 전달받은 값 중에서 가장 큰 수를 반환한다. 인수가 전달되지 않으면 -Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.
Math.max(); // -Infinity
Math.max(1, 10, -100, -10, 100, 0); // 100
Math.max(1, 10, -100, -10, "1000", 0); // 1000
Math.max(1, 10, -100, -10, "문자열", 0); // NaN
Math.random() 메소드
Math.random()
메소드는 0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를 반환한다.
var min = 10, max = 20;
Math.random(); // [0, 1)
Math.random() * (max - min) + min; // [min, max)
Math.round() 메소드
Math.round()
메소드는 인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결과값을 반환한다.
Math.round(10.49); // 10
Math.round(10.5); // 11
Math.round(-10.5); // -10
Math.round(-10.51); // -11
Math.floor() 메소드
Math.floor()
메소드는 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환한다.
Math.floor(10.95); // 10
Math.floor(11.01); // 11
Math.floor(-10.95); // -11
Math.floor(-11.01); // -12
Math.ceil() 메소드
Math.ceil()
메소드는 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환한다.
Math.ceil(10.95); // 11
Math.ceil(11.01); // 12
Math.ceil(11); // 11
Math.ceil(-10.95); // -10
Math.ceil(-11.01); // -11
Math.sin() 메소드
Math.sin()
메소드는 인수로 전달받은 값의 사인(sine) 함숫값을 반환한다.
Math.sin(0); // 0
Math.sin(Math.PI / 2); // 1
자바스크립트에서 제공하는 삼각 함수에 관한 모든 메소드는 각도의 단위로 라디안(radian)을 사용한다. 이때 라디안 단위와 60분법 단위를 서로 변환하기 위해서는 다음과 같은 공식을 사용한다.
라디안값 = 60분법값 * (Math.PI / 180)
Math.PI
는 수학에서 사용하는 파이(π)값을 나타내는 자바스크립트 상수입니다. 따라서 대략적인 값으로 3.145159를 나타낸다.
자바스크립트 Math 메소드
메소드설명
메소드 | 설명 |
Math.min(x, y, ...) | 인수로 전달받은 값 중에서 가장 작은 수를 반환함. |
Math.max(x, y, ...) | 인수로 전달받은 값 중에서 가장 큰 수를 반환함. |
Math.random() | 0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환함. |
Math.round(x) | x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환함. |
Math.floor(x) | x와 같거나 작은 수 중에서 가장 큰 정수를 반환함. |
Math.ceil(x) | x와 같거나 큰 수 중에서 가장 작은 정수를 반환함. |
Math.abs(x) | x의 절댓값을 반환함. |
Math.cbrt(x) | x의 세제곱근을 반환함. |
Math.sqrt(x) | x의 제곱근을 반환함. |
Math.clz32(x) | x을 32비트 이진수로 변환한 후, 0이 아닌 비트의 개수를 반환함. |
Math.exp(x) | ex 의 값을 반환함. (e : 오일러의 수) |
Math.expm1(x) | 1 - ex 의 값을 반환함. |
Math.fround(x) | x와 가장 근접한 32비트 부동 소수점 수(single precision float)를 반환함. |
Math.hypot(x, y, ...) | 인수로 전달받은 값들을 각각 제곱한 후 더한 총합의 제곱근을 반환함. |
Math.imul(x, y) | 인수로 전달받은 두 값의 32비트 곱셈의 결과를 반환함. |
Math.log(x) | x의 자연로그 값을 반환함. (ln x) |
Math.log1p(x) | ln(1 + x)의 값을 반환함. |
Math.log10(x) | x의 10을 밑으로 가지는 로그 값을 반환함. |
Math.log2(x) | x의 2를 밑으로 가지는 로그 값을 반환함. |
Math.pow(x, y) | x의 y승을 반환함. |
Math.sign(x) | x의 부호 값을 반환함. |
Math.trunc(x) | x의 모든 소수 부분을 삭제하고 정수 부분만을 반환함. |
Math.sin(x), Math.cos(x), Math.tan(x),Math.asin(x), Math.acos(x), Math.atan(x), Math.asinh(x), Math.acosh(x), Math.atanh(x), Math.atan2(x) | x의 해당 삼각 함숫값을 반환함. |
자바스크립트 Math 프로퍼티
프로퍼티 | 설명 | 값 |
Math.E | 오일러의 수(Euler's constant)라고 불리며, 자연로그(natural logarithms)의 밑(base) 값 | 2.718 |
Math.LN2 | 2의 자연로그 값 | 0.693 |
Math.LN10 | 10의 자연로그 값 | 2.303 |
Math.LOG2E | 오일러 수(e)의 밑 값이 2인 로그 값 | 1.443 |
Math.LOG10E | 오일러 수(e)의 밑 값이 10인 로그 값 | 0.434 |
Math.PI | 원의 원주를 지름으로 나눈 비율(원주율) 값 | 3.14159 |
Math.SQRT1_2 | 2의 제곱근의 역수 값 | 0.707 |
Math.SQRT2 | 2의 제곱근 값 | 1.414 |
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
사이트를 방문해 주셔서 감사합니다
만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.
© Copyright 2023 Light