320x100

전체 글 73

자바스크립트 window.open() 팝업창 크기 조절 및 화면 중앙에 띄우기 Create a popup window in the center of the screen

안녕하세요! 자유롭고 싶은 직장인입니다.지난 포스팅에서는 자바스크립트 window.open()을 활용해 기본적인 새 창 띄우기와 각 브라우저별(Chrome, Edge 등) 옵션 적용법에 대해 알아보았습니다. (기본 옵션과 실시간 예제가 궁금하신 분들은 이전 포스팅을 먼저 참고해 주세요!)기본 옵션만 주면 팝업창이 모니터 왼쪽 최상단 구석에 뜬금없이 붙어서 열리게 됩니다. 듀얼 모니터를 쓰거나 해상도가 큰 모니터를 쓰는 사용자 입장에서는 시선이 분산되어 아주 불편하죠.오늘은 어떤 모니터 환경에서나 사용자의 해상도를 자동으로 계산해서 팝업창을 정확히 화면 정중앙(Center)에 띄우는 정석 스크립트 코드를 공유해 보려고 합니다. 1. 화면 중앙 배치 계산법 이해하기원리는 아주 간단합니다. 사용자의 전체 화면..

IT/Javascript 2026.10.12

주식 초보를 위한 고배당 커버드콜 ETF 완벽 정리 (원리, 장단점, 원금 손실 위험)

안녕하세요! 자유롭고 싶은 직장인입니다.요즘 정말 다 오르고 내 월급만 안 오르는 참담한 현실입니다. 월급 외에 매달 꼬박꼬박 들어오는 현금 흐름이 간절하다 보니, 요즘 재테크 시장에서 유독 뜨거운 관심을 받는 상품이 있습니다.바로 '고배당 커버드콜(Covered Call) ETF'입니다. "연 배당률이 10%가 넘는데, 이걸 매달 나눠준다고?"라며 눈이 번쩍 뜨이신 분들 많으실 겁니다. 은행 적금 금리가 겨우 2~3%대인 걸 감안하면 눈이 돌아갈 만한 수치죠. 하지만 세상에 공짜 점심은 없다는 말처럼, 이 상품 역시 무조건 돈을 벌어다 주는 마법의 항아리는 아닙니다. 주식 초보자분들도 단번에 이해하실 수 있도록, 아주 쉬운 비유와 함께 커버드콜 ETF의 원리와 숨겨진 단점까지 솔직하게 파헤쳐 보겠습니다..

재테크 2026.10.12

CSS만으로 간단한 모달(Modal)창 레이어 팝업 만들기

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

IT/HTML & CSS 2024.04.04

자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기

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

IT/Javascript 2024.04.04

자바스크립트(javascript) 변수란 무엇인가? var let const

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

IT/Javascript 2024.04.03

잡블로그와 전문 블로그의 중 어떤 것이 좋을까? 장점과 단점

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

Tistory/블로그 2024.04.03

CSS 스크롤 따라다니는 메뉴 만들기(플로팅 메뉴)

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

IT/HTML & CSS 2024.04.02

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 속성 체크 박스와 라디오 박스는 비슷하면서도 다른 요소이다..

IT/HTML & CSS 2024.04.02

HTML 라디오(radio) 만들기 input checked 속성

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

IT/HTML & CSS 2024.03.26

HTML 체크박스(checkbox) 만들기 input checked 속성

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

IT/HTML & CSS 2024.03.26
반응형
LIST