본문 바로가기

전체 글386

[javascript] CSS animation 속성 (애니메이션) 참고: https://blog.logrocket.com/guide-to-css-animation-for-javascript-developers/ 사람의 뇌가 움직임에 특화되어있다는 것은 익히 알려진 사실입니다. 인간은 정적인 요소에 초점을 맞추기보다는 요소가 어떻게 움직이는지에 더 많은 관심을 가집니다. CSS 애니메이션은 이러한 인간의 행동을 이용합니다. 웹사이트에 애니메이션이 추가되면 제품의 중요한 영역에 사용자의 관심을 끌게되어 지속적인 효과를 낳게되고 사용자 경험을 향상시킵니다. 이 포스트에서는 CSS 애니메이션의 이점, 다양한 CSS 애니메이션 속성, 그리고 자바스크립트 개발자들이 CSS 애니메이션을 사용하여 웹사이트를 보다 상호작용적이고 사용자 친화적으로 만들 수 있는 다양한 예를 알아보겠습니.. 2022. 11. 28.
[javascript] CSS transition 애니메이션 (타이밍 함수) 참고: https://zellwk.com/blog/css-transitions/ HTML 구성요소를 애니메이션화하는 가장 간단한 방법은 CSS transition을 사용하는 것 입니다. 이 포스트에서는 CSS transition이 어떻게 작동하는지, 또 이를 활용해 어떻게 애니메이션을 만드는지를 알아보겠습니다. transition은 CSS 속성이 일정한 기간동안 하나의 값에서 다른 값으로 변경될 때 발생합니다. 다음의 예와 같이 transition 속성을 사용하여 CSS transition을 생성할 수 있습니다: .selector { transition: property duration transition-timing-function delay; } transition 속성은 transition-prop.. 2022. 11. 25.
[javascript] 자바스크립트 버튼 눌림 효과 참고: https://www.geeksforgeeks.org/how-to-add-a-pressed-effect-on-button-click-in-css/ 이 포스트에서는 CSS를 사용하여 버튼을 눌렀을 때 효과를 추가하는 방법을 설명합니다. 이러한 효과는 모던 UI 디자인의 한 부분으로 많은 웹 사이트에서 사용하고 있습니다. 눌림 효과가 없는 일반적인 동작과는 다르게 버튼 눌림 효과를 통해 사용자는 HTML 요소와의 상호작용 경험을 느낄 수 있습니다. 이 효과를 만들기 위해 'active' 수도 클래스(pseudo class)를 사용할 것 입니다. 이 CSS 수도 클래스는 사용자가 버튼을 클릭하면 자동으로 HTML 요소에 추가가 됩니다. 버튼 눌림 효과 주기 1 버튼을 눌렀을 때(press down 했을.. 2022. 11. 24.
[javascript] 자바스크립트 삼항연산자 (ternary operator) 참고: https://dev.to/refine/how-to-use-javascript-ternary-operator-58ki 이 포스트는 JavaScript의 삼항연산자에 관련된 글입니다. 여기서 삼항연산자가 무엇인지, 어떻게 사용하는지, 언제 쓰는지 및 if/else, if/else if/else, switch 와는 어떻게 다른지를 설명할 것 입니다. 자바스크립트의 삼항연산자(ternary operator)는 무엇인가 JavaScript의 삼항연산자는 물음표(?)로 표시하는 연산자로, 이 연산자는 이전에 전달된 조건식을 판별하여 조건식의 결과에 따라 뒤에오는 코드 블록을 실행합니다. 이는 물음표 연산자 다음에 오는 두개의 실행가능한 코드 블록을 받는데 이들의 구분을 콜론(:)으로 합니다. 문법은 다음과.. 2022. 11. 17.
[네트워크] CORS, 해결 방법 참고: https://dev.to/jpomykala/what-is-cors-11kf 이 포스트에서는 CORS와 CORS 에러가 무엇인지, 왜 이런 에러가 발생하는지에 대해 설명하겠습니다. 또한 이를 해결할 솔루션을 제시하고 preflight 요청과 CORS 헤더가 무엇인지, 그리고 이런 것 들이 커뮤니케이션에서 왜 중요한지를 설명할 것 입니다. 이 글은 독자가 웹 개발과 HTTP 프로토콜에 대한 기본적인 지식을 가지고 있다는 가정하에 쓰였습니다. 하지만 초보자도 읽기 쉽도록 CORS 주제와 밀접하게 연관되지 않은 기술적 주제는 피하려고 노력했습니다. CORS 란? CORS(Cross-Origin Resource Sharing)는 클라이언트(웹 브라우저)에 의해 제어되는 HTTP 기반 보안 메커니즘입니다... 2022. 11. 1.
[javascript] 자바스크립트 특정 문자 모두 바꾸기 (replaceAll) 참고: https://dmitripavlutin.com/replace-all-string-occurrences-javascript/ 간단하게 JavaScript 문자열에서 특정 문자를 모두 바꾸는 방법은 없습니다. JavaScript 초기에 영감을 준 Java에서는 1995년 부터 replaceAll() 메소드를 지원했지만요! 이 포스트에서는 문자열을 분할한 후 결합하는 방법과 string.replace() 메소드에 정규식을 결합하는 방법을 통해 JavaScript의 모든 특정 문자를 치환하는 방법을 알아보겠습니다. 또한 JavaScript 문자열의 모든 문자를 바꿀 수 있는 새로운 replaceAll() 메소드를 알아보겠습니다. replaceAll() 메소드를 사용하는게 가장 편리한 방법이지만 es6를.. 2022. 10. 28.
[jquery] 자바스크립트 클래스 이름 지우기 jQuery removeClass() 메소드는 선택된 HTML 항목에서 하나 이상의 클래스 이름을 지우는데 사용합니다. 쉽게 생각하면 선택된 HTML 항목에 클래스 이름을 추가하는 addClass() 메소드의 정 반대입니다. removeClass() 메소드 문법 $(selector).removeClass(classname1 classname2 ...) classname1, classname2 등은 선택된 HTML 항목에서 지울 클래스 이름입니다. 매개변수로 하나 이상의 클래스 이름을 전달할 수 있는데 공백으로 분리된 문자열을 전달하면 됩니다. jQuery removeClass() 메소드 예제 아래 예제에서는 big, highlight, background 라는 이름의 클래스가 적용된 HTML 항목이 있고.. 2022. 10. 7.
[jquery] 자바스크립트 클래스 이름 확인하기 이 포스트에서는 jQuery hasClass() 메소드를 어떻게 쓰는지 알아보겠습니다. hasClass() 메소드는 특정한 HTML 항목에 특정한 클래스 이름이 할당되어있는지 확인합니다. hasClass() 메소드 문법 $(selector).hasClass(classname) 여기서 classname은 확인할 클래스 이름입니다. 이 메소드는 선택자로 선택된 HTML 항목이 classname을 가지고 있을 경우 true를 리턴합니다. jQuery hasClass() 메소드 예제 다음의 예제는 big 이라는 클래스 이름이 문장에 추가되어있고, 버튼 클릭 이벤트가 발생하면 hasClass() 메소드를 사용하여 화면에 표시된 문장 중 big 이라는 클래스 이름이 포함된 문장이 있는지 확인합니다. jQuery h.. 2022. 10. 7.
[네트워크] 프록시 Proxy 개인 정보 보호는 모든 인터넷 사용자가 관심가져야 하는 사항입니다. 현재 홈쇼핑을 하거나 유튜브에서 동영상을 보거나 웹 서핑을 할 때 마다 사용자 추적이 어마어마하게 수행되고 있습니다. 이런 상황에서 프록시 서버는 사용자의 IP 주소를 숨겨주고 온라인에서 익명성을 확보해주며, 개인 정보를 보호하고 안전하게 유지할 수 있도록 해줍니다. 프록시 서버(Proxy Server)란? 프록시 서버는 클라이언트 컴퓨터가 먼저 접속하는 시스템으로 해당 클라이언트와 나머지 인터넷 사이의 게이트웨이 역할을 합니다. 이는 클라이언트의 인터넷 요청을 중개하는 것으로 클라이언트에 프록시 서버 설정을 해놓으면 컴퓨터가 목적지에 바로 요청을 보내지 않고 프록시 서버로 요청을 보내게 됩니다. 프록시 서버는 클라이언트로 부터 요청을 .. 2022. 10. 6.
[jquery] 자바스크립트 클래스 이름 추가하기 jQuery의 addClass() 메소드는 선택된 HTML 항목에 클래스 이름을 추가하는데 사용합니다. 이는 웹 페이지에 있는 특정한 HTML 항목에 스타일을 추가하고 싶을 때 특히 유용합니다. 예를 들어 첫 번째 문장의 글자 크기와 색을 바꾸고 싶을 때 원하는 CSS 스타일을 특정한 클래스 이름으로 만든 다음 addClass() 메소드를 이용해 그 문장에 클래스 이름을 추가하면 방금 만든 스타일이 그 문장에 적용됩니다. jQuery addClass() 메소드 문법 $(selector).addClass(classname) 여기서 클래스 classname은 선택된 HTML 항목에 추가하고 싶은 클래스 이름입니다. 또한 두개 이상의 클래스 이름을 한번에 추가할 수 있는데 이는 다음과 같이 공백으로 구분된 클.. 2022. 10. 6.
[jquery] 자바스크립트 숨기기 보이기 이 포스트에서는 jQuery의 show, hide 효과에 대해 알아보겠습니다. jQuery를 사용하면 show(), hide() 메소드를 통해 HTML 항목을 보이게 또는 숨길 수 있습니다. jQuery hide() jQuery hide() 메소드는 선택한 HTML 항목을 숨깁니다. 다음은 제목을 누르면 제목이 숨겨지는 예제입니다. index.html에 다음 코드를 입력하고 실행합니다. jQuery hide() 예제 h2 태그의 제목을 누르면 숨겨집니다. 두 번째 h2 제목 index.html을 실행하면 다음과 같은 화면이 나타납니다. 먼저 위 쪽 제목을 눌러보면 위 쪽 제목이 사라집니다. 그 다음 아래 쪽에 있는 제목을 클릭하면 아래 쪽 제목도 숨겨집니다. 코드를 살펴보면 ${"h2").click()의.. 2022. 10. 5.
[jquery] 자바스크립트 버튼 클릭 jQuery 클릭 이벤트는 사용자가 HTML 항목을 클릭하면 발생합니다. 여기서 jQuery click() 메소드는 사용자가 클릭했을 때의 행동을 처리합니다. 예를 들어 $("p").click()은 웹 페이지에서 문단이 클릭되었을 때 클릭 이벤트를 발생시키도록 합니다. click() 메소드에 함수를 추가하여 클릭 이벤트가 발생했을 때 마다 특정 기능을 실행하도록 할 수도 있습니다. 이 포스트에서는 사용자의 클릭에 대응하는 jQuery click() 메소드에 대해 알아보겠습니다. jQuery click() 메소드 문법 $(selector).click(function() { // 코드 }); 먼저 클릭 메스드를 추가할 HTML 항목을 선택한 후 click() 메소드를 추가할 수 있습니다. click() 메소.. 2022. 10. 5.
[linux] 리눅스 OS 확인 리눅스는 오픈 소스 운영 체제인 관계로 현재 다양한 종류의 리눅스 버전이 존재합니다. 이를 일반적으로 리눅스 배포판 이라고 합니다. Suse, OpenSUSE, Debian, Ubuntu, CentOS, Arch, Fedora, RHEL은 대표적인 배포판 이름입니다. 서버에 설치된 리눅스 OS 버전 및 이름을 알면 보안 패치에 매우 유용할 수 있습니다. 리눅스에서 OS 버전 확인 리눅스에서 OS 이름과 버전을 찾는 방법은 다음과 같습니다. 터미널 프로그램을 실행합니다. ssh로 원격 로그인 합니다. ($ ssh user@server-name) 다음 명령어 중 하나를 입력하여 리눅스의 OS 이름과 버전을 찾습니다. $ cat /etc/os-release $ lsb_release -a $ hostnamect.. 2022. 9. 29.
[javascript] 자바스크립트 팩토리얼 계산하기 (factorial) 이 포스트에서는 재귀함수, while 루프, for 루프를 사용해 팩토리얼을 계산하는 방법을 설명하겠습니다. 팩토리얼 계산이란? 팩토리얼(factorial)이란 주어진 수 보다 작거나 같은 모든 양의 정수를 곱한 것 입니다. 기호는 "!"를 사용하며 팩토리얼 이라고 읽습니다. 예를 들어 5 팩토리얼을 구한다면 다음과 같이 계산을 하면 됩니다. 5! = 5 * 4 * 3 * 2 * 1 재귀함수로 팩토리얼 구하기 재귀함수는 함수 내에서 자기 자신을 다시 호출하는 함수를 말합니다. 특정한 조건에 만족할 때 까지 자기 자신을 계속 호출하여 결과를 얻어내는 방법 입니다. function factorial(num) { if (num < 0) return -1; else if (num == 0) return 1; e.. 2022. 9. 29.
[javascript] 자바스크립트 자판기 만들기 자바스크립트 자판기는 브라우저에서 구동되는 프로그램이기 때문에 c언어나 자바, 파이썬과는 다르게 화면에 UI를 그리고 변경하기가 쉽습니다. 이번 포스트에서는 사용자의 클릭 이벤트를 받아 음료를 얻을 수 있는 자판기를 만들어 보겠습니다. 전체 소스코드 index.html 자판기 돈을 넣으세요 style.css * { margin: 0; padding: 0; box-sizing: border-box; } h1 { color: #323330; } div { display: flex; align-items: center; justify-content: center; margin: 10px; } .hide { display: none; } .container { height: 100vh; } .panel { pa.. 2022. 9. 28.
[javascript] 자바스크립트 시계 만들기 이 포스트에서는 어떻게 실시간으로 갱신되는 자바스크립트 시계를 구현하는지 알아보겠습니다. 자바스크립트 시계에 대하여 시계는 인터넷 뱅킹이나 전자상거래 등과 같이 시간이 꼭 필요한 사이트에서 반드시 필요한 도구입니다. 여기서 자바스크립트가 웹페이지를 실시간으로 조작할 수 있게 해줌으로써 현재 시간을 보여주는 자바스크립트 시계를 만드는 것은 상당히 간단해졌습니다. 이 포스트에서는 화면을 예쁘게 보이게 하는 CSS 스타일링에 대해서는 다루지 않고, 시계를 구현하는 실질적인 자바스크립트의 코드에 초점을 맞출 것 입니다. 자바스크립트로 12 시간 시계 만들기 이제 12시간 단위로 표시되는 시계를 만들어 보겠습니다. index.html index.js function currentTime() { const date.. 2022. 9. 28.
[javascript] 자바스크립트 랜덤 문자열 만들기 간단하게 랜덤 문자열 만들기 자바스크립트에서 임의의 문자열을 생성하는 방법은 여러 가지가 있습니다. 가장 빠른 방법은 Math.random() 메소드를 사용하는 것 입니다. Math.random() 메소드는 0(이상)과 1(미만) 사이의 난수를 반환합니다. 이 난수를 문자열로 변환한 후 소수점 표시를 제거하면 됩니다. const rand = Math.random().toString().substr(2, 8); 위의 예제는 8개의 숫자로 된 랜덤 문자열을 만들어 냅니다. 영숫자 문자열을 생성하려면 2에서 36 사이의 값을 toString() 메소드의 매개변수인 radix로 넘기면 됩니다. 이는 결과 값의 진법을 정의하는 것 입니다. 이진수 문자열(0~1)을 얻으려면 toString() 메소드의 radix에.. 2022. 9. 27.
[네트워크] 패킷 Packet 패킷이란? 네트워킹에서 패킷이란 기다란 메시지를 여러개로 쪼갠 작은 한 조각을 말합니다. 인터넷과 같은 컴퓨터 네트워크를 통해 전송되는 데이터는 작은 단위의 패킷으로 나뉘어 전송하고 이를 수신하는 기기에서 재조합하는 과정을 거칩니다. 굳이 예를 들자면 A가 B에게 편지를 쓰려하는 상황이고 편지는 접을 수 없으며 B의 우편함은 엽서만 들어갈 정도로 작다고 가정해 보겠습니다. A는 편지에 쓰고 싶은 내용이 많아서 A4용지를 사용할 수도 있지만 B의 우편함은 작으므로 A4용지로는 편지르 붙일 수 없어서 더 작은 엽서 여러장에 편지를 쓰고 순서대로 B의 우편함에 전달하게 됩니다. 그러면 나중에 B가 우편함에 받은 여러장의 엽서를 받은 순서대로 읽게됩니다. 이 예는 패킷이 인터넷에서 작동하는 방식과 유사합니다. .. 2022. 9. 23.
[javascript] 자바스크립트 체질량지수 BMI 계산기 체질량지수(BMI) 계산기를 사용하면 키와 몸무게를 기준으로 BMI 값을 계산할 수 있습니다. 체질량지수는(BMI)는 대부분의 사람에게 꽤 신뢰가능한 체지방 지표가 될 수 있습니다. BMI 계산 공식: BMI = (몸무게) / (키 * 키) 체질량지수는(BMI)는 개인의 몸무게와 키로 계산하는 수치입니다. 이번에 만들 자바스크립트 BMI 계산기는 사용자의 키와 몸무게를 입력받을 것 입니다. 계산 과정은 간단합니다. 킬로그램 단위의 몸무게를 키의 제곱으로 나누면 됩니다. 여기서 주의할 점은 키의 단위는 'm' 라는 것 입니다. 계산의 결과가 18.5 이하면 저체중, 18.5~23은 정상, 23~25는 과체중, 25~30은 비만, 30 이상은 고도비만으로 나눕니다. HTML 전체 코드 BMI 계산기 키 (c.. 2022. 9. 23.
[javascript] 자바스크립트 값 입력받기 (prompt) 이 포스트에서는 자바스크립트의 prompt() 메소드를 사용해 사용자에게 숫자나 문자열을 받는 다이얼로그 사용법을 알아보겠습니다. 자바스크립트 prompt() 메소드 prompt()는 window 객체의 메소드입니다. prompt() 메소드는 브라우저에게 문자열과 인풋필드, 두 개의 버튼을 가지는 다이얼로그를 표시하도록 합니다. 다이얼로그는 사용자에게 문자열을 입력하는 화면을 보여주고 사용자가 취소나 확인을 누를 때 까지 기다립니다. 다음은 prompt() 메소드의 문법을 보여줍니다. const result = window.prompt(message, default); message: 화면에 표시할 문자열로 이 값을 생략하면 화면에 아무 글자도 표시가 안됩니다. default: 입력 필드의 기본 값을 받.. 2022. 9. 23.

티스토리툴바