자유롭고 싶은 직장인

이미 모달창(레이어팝업) 만들기는 여러번 소개했다. 2024.04.04 - [IT/Javascript] - 자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기 자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기 모달 창은 사용자와의 상호작용을 요구할 때 사용되는 팝업 창의 한 형태이다. 모달 창이 나타나면 일반적으로 사용자는 모달 창 외부의 콘텐츠에 대한 상호작용을 일시적으로 중지하고 모달 aortm2.tistory.com 2024.03.20 - [IT/JQuery] - 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기 모달창이란? 우리가 흔히 화면을 개발할 ..

모달 창은 사용자와의 상호작용을 요구할 때 사용되는 팝업 창의 한 형태이다. 모달 창이 나타나면 일반적으로 사용자는 모달 창 외부의 콘텐츠에 대한 상호작용을 일시적으로 중지하고 모달 창과 상호작용합니다. 모달창은 여러 종류로 쓰이는데, 대표적으로 쓰이는 몇가지를 알아보자. 모달창의 종류(레이어 팝업) 알림 창: 사용자에게 메시지를 표시하고 OK 버튼을 클릭하여 확인할 수 있도록 한다. 사용자 입력 양식: 사용자로부터 정보나 데이터를 입력 받을 수 있도록 한다. 이미지 뷰어: 이미지를 확대하여 표시하거나 다운로드할 수 있는 모달 창을 표시할 수 있다. 설정 창: 사용자 설정을 변경할 수 있는 모달 창을 표시할 수 있다. html코드 먼저 버튼을 만들어 준다. 자바스크립트 모달창 모달창을 만들어 준다.

변수란? 자바스크립트(JavaScript)에서 변수는 데이터를 저장하고 참조하기 위한 식별자(identifier) 이다. 변수는 다양한 종류의 데이터를 저장할 수 있으며, 프로그램 내에서 데이터를 조작하는 역할을 한다. 변수를 사용하면 값을 여러 번 사용할 필요 없이 변수명을 부여하여 쉽게 사용할 수 있다. 또한 변수를 사용하면 프로그램의 유지보수성이 향상되고, 코드를 읽기가 쉬워집니다. 간단하게 예제를 보자 // 변수 선언 및 값 할당 var number = 30; // 변수 참조 및 출력 console.log(name) // 결과 값 30 // 변수 값 변경 number = 10; console.log(name) // 결과 값 10 위 코드에서 number은 변수이다. 처음 변수를 선업하고 numbe..

블로그를 시작하려고 하는 사람들은 잡블로그와 전문블로그라는 흔히 겪는 문제인 것 같다. 블로그를 운영하는 사람들에게도 늘 입에 오르는 문제이기도 하다. 대다수의 사람들은 여러가지 주제보다 한가지 주제로 블로그를 운영하는게 더 좋다라고 한다. 그래서 잡블로그와 전문 블로그의 장단점에 대해 알아보려고 한다. 잡블로그란? 잡블로그는 일반인이나 전문가들이 자신의 개인적인 관심사나 전문 분야에 대해 글을 쓰고 올리는 블로그이다. 다양한 주제나 관심사에 대해 다루는 블로그를 의미한다. 이러한 블로그에서는 예를 들어 일상 생활에서의 경험 공유, 취미나 여가 활동, 음식 레시피, 여행 경험, 기술 노하우, 독서나 영화에 대한 리뷰 등 다양한 주제가 다뤄 진다. 잡블로그의 장점 다양한 주제 잡블로그는 다양한 주제를 다루..

요즘 웹 서핑을 하다보면 상단의 메뉴가 따라다니는 것을 심심치 않게 볼 수 있다. 이를 플로팅 메뉴라고 한다. 필자는 처음 퍼블리셔를 시작하고 이 메뉴를 처음 봤는데 '복잡한 자바스크립트나 제이쿼리가 들어가겠지?' 라고 생각했지만, CSS만으로도 충분히 쉽게 만들 수 있던 기능이어서 충격을 받았었다. 물론 자바스크립트나 제이쿼리로 못 만든다는 것은 아니다. 플로팅 메뉴는 왜 사용하는가? 사용자 경험 향상: 플로팅 메뉴는 사용자가 웹 페이지를 스크롤할 때 항상 메뉴에 쉽게 액세스할 수 있도록 한다. 이렇게 함으로써 사용자는 내비게이션을 찾기 위해 맨 위로 스크롤할 필요가 없어지므로 사용자 경험이 향상 된다. 내비게이션 효율성 증대: 긴 페이지에서 사용자가 내비게이션 메뉴를 지속적으로 사용할 수 있도록 함으..

HTML 태그 중 input checkbox, radio는 기본적인 디자인은 매우 심플하게 보여진다. 브라우저에 따라 다소 차이는 있지만, 사이트의 디자인이나 컨셉에 따라 디자인을 변경해야 하는 경우가 있다. 하지만 기본적으로 input을 직접 css로 바꾸는데에는 한계가 있기 때문에 label을 이용한다. input 체크박스와 라디오 태그는 지난번 글에서 설명했는데, 아직 checkbox나 radio가 궁금하다면 아래 링크를 타고 봐도 좋을 것 같다. 2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성 HTML 체크박스(checkbox) 만들기 input checked 속성 체크 박스와 라디오 박스는 비슷하면서도 다른 요소이다..

라디오 버튼은 여러 옵션 중에서 단 하나의 선택만을 허용하는 입력 요소이다. 체크박스와 유사하지만, 라디오 박스는 한 그룹 내에서 하나의 항목만 선택할 수 있다. 2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성 라디오(radio) 버튼을 사용하는 이유 단일 선택 강제: 라디오 버튼은 여러 옵션 중 하나만 선택할 수 있도록 강제한다. 이것은 사용자가 반드시 단 하나의 옵션을 선택해야 하는 상황에서 편리하다. 직관적 사용자 인터페이스: 라디오 버튼은 사용자에게 여러 옵션 중에서 단 하나의 옵션을 선택할 수 있도록 직관적인 인터페이스를 제공한다. 사용자가 명확하게 단일 선택을 해야 하는 경우에 적합하다. 정보의 명확한 표시: 라디..

체크 박스와 라디오 박스는 비슷하면서도 다른 요소이다. 체크박스와 라디오 박스는 웹 양식에서 사용자에게 선택 옵션을 제공하는데 사용된다. 체크박스(checkbox)를 사용하는 이유 다중 선택: 체크박스는 여러 항목 중에서 사용자가 필요한 항목을 선택할 수 있다. 이를 통해 사용자가 여러 옵션 중에서 필요한 것들을 동시에 선택할 수 있다. 명확한 시각적 표시: 체크박스는 사용자에게 선택 가능한 항목을 명확하게 시각적으로 표시한다. 사용자는 체크박스를 보고 선택할 수 있는 항목들을 쉽게 인식할 수 있다. 유연성: 체크박스는 선택 사항을 제공함으로써 사용자에게 유연성을 제공한다. 사용자는 필요한 항목을 선택하거나 선택하지 않을 수 있으며, 필요에 따라 선택 사항을 변경할 수 있다. 간편한 사용: 체크박스는 단..

자바스크립트를 활용하여 팝업창을 만드는 것은 비교적 간단하다. 예전에는 많이 사용했던 팝업 기능이지만 지금은 모달창으로 대체가 많이 되었다. 전에 팝업창을 계속 띄우는 악성(?)사이트도 있었는데, 지금은 거의 사용하지 않는 기능이지만 간혹 필요할 때가 있다. 팝업창을 띄우는 방법은 window.open()이란 함수를 사용하는데, onclick에 넣어서 사용하거나, 함수로 만들어서 사용하는 두가지 방법이 있다. 팝업 창이란? 팝업 창은 웹 페이지에서 새로운 작은 창을 열어 특정 내용을 표시하는 데 사용되는 UI 요소이다. 이러한 팝업 창은 일반적으로 사용자에게 정보를 제공하거나 추가적인 상호작용을 유도하기 위해 사용된다. 일반적으로 팝업 창은 현재 창과 별도의 창으로 표시되며, 사용자가 원할 때 닫을 수 ..

querySelector란?querySelector는 Javascript(자바스크립트)에서 HTML태그를 제어 할 수 있는 함수이다. 기존 Javascript(자바스크립트)에서 DOM을 선택하기 위해서는 getElementById, getElementsByClassName, getElementsByTagName 등의 메서드를 사용했다. 이러한 메서드들은 각각 아이디, 클래스, 태그 이름 등을 기준으로 요소를 선택할 수 있었다. 이 때문에 제이쿼리가 널리 보급되었다고 해도 과언이 아니다. 하지만 ES5버전 부터 querySelector가 등장했는데, querySelector를 사용하면 제이쿼리처럼 CSS선택자를 직접 사용하여 더 간단하게 요소를 선택할 수 있다. 제이쿼리 요소 선택 방법2024.03.19 ..