Power 개발 연구소

안녕하세요!웹사이트를 제작하다 보면 로그인 창이나 알림창처럼 화면 위에 새 창을 띄워야 할 때가 많습니다.이럴 때 자주 사용되는 기능이 바로 모달(modal)입니다.오늘은 addEventListener의 click 이벤트를 활용해, 버튼을 눌렀을 때 간단하게 모달을 띄우는 방법을 알아보겠습니다.먼저 모달(modal)이 무엇인지 알아보겠습니다. 모달(modal)이란?모달(modal)이란, 웹페이지 위에 겹쳐서 나타나는 창을 말합니다.대표적인 예로는 로그인 창, 회원가입 창, 알림창 등이 있으며, 사용자 주의를 집중시키는 데에 많이 활용됩니다.이제 모달에 대해 간단히 알아봤으니, 직접 간단한 예제를 만들어 보겠습니다.버튼을 클릭하면 모달창이 뜨고, 닫기 버튼이나 바깥 영역을 누르면 사라지도록 구현해 ..

안녕하세요!오늘은 웹 레이아웃을 구성할 때 자주 사용되는 정렬 방식 중 하나인 grid에 대해 알아보려고 합니다.grid는 행과 열을 동시에 다룰 수 있는 레이아웃 시스템으로, 깔끔하고 효율적인 페이지 구성을 가능하게 합니다.이번 글에서는 grid의 기본 개념부터 살펴보겠습니다. Grid란??CSS의 grid는 행과 열을 함께 제어할 수 있는 레이아웃 시스템입니다.마치 바둑판처럼 2차원으로 요소를 정렬할 수 있고, 복잡한 레이아웃도 간단하고 직관적으로 구성할 수 있습니다.이 덕분에 반응형 디자인이나 페이지 전체 구조 설계에 특히 유용합니다.다음으로grid에서 자주 쓰이는 속성에 대해 알아보겠습니다. CSS Grid 자주 쓰이는 속성속성명설명display: grid;요소를 Grid 컨테이너로 지정하..

안녕하세요!오늘은 HTML에서 가장 기본이면서도 필수적인 요소인 a 태그에 대해 알아보겠습니다.a 태그는 웹페이지에서 다른 페이지로 이동하거나,같은 페이지 내 특정 위치로 스크롤 이동(앵커)하는 데 사용되는 중요한 태그입니다.이번 글에서는 a 태그의 기본 구조부터 외부 링크, 내부 링크, 그리고 스크롤 앵커 활용까지 차근차근 살펴보겠습니다.먼저 하이퍼링크란 무엇인지 설명해 드리겠습니다. 하이퍼링크란?웹페이지에서 다른 문서나 자원(이미지, 동영상, 다른 웹페이지 등)으로 이동할 수 있도록 연결해 주는 링크를 말합니다.사용할 때는 a 태그에 href 속성을 사용하여 링크를 연결할 수 있습니다.이해를 돕기 위해 예시를 들어 설명드리겠습니다. 메인-HTML 메인페이지 서브페이지로 이동 h..

안녕하세요!오늘은 먼저 toggle기능에 대해 알아보고간단한 버튼을 만들어 실습까지 해보도록 하겠습니다. toggle이란?JavaScript에서 toggle은 “켜고 끄기” 또는 “두 가지 상태를 번갈아 전환하다”라는 의미입니다.보통 버튼 클릭 시 상태를 바꾸는 기능을 만들 때 사용합니다. #실습실습으로 웹페이지를 맨위로 맨아래로 움직여주는 토글버튼을 만들어 보겠습니다. HTML↓ CSS#scrollToggleBtn { width: 65px; height: 65px; background-color: #fff; border: 1px solid #959595; border-radius: 100%; display: flex; flex-direction: column; align-ite..

안녕하세요!오늘은 Media Query(미디어 쿼리)와 반응형 웹에 대해 이해하고,이를 실제로 어떻게 활용할 수 있는지 알아보도록 하겠습니다.먼저 Media Query(미디어 쿼리)가 무언인지 알아보겠습니다. Media Query(미디어 쿼리)란?Media Query(미디어 쿼리)는 CSS에서다양한 디바이스(화면 크기, 해상도, 방향 등)에 따라스타일을 다르게 적용할 수 있게 해주는 기능 입니다. Media Query(미디어 쿼리)기본 문법@media (조건) { /* 조건이 맞을 때 적용할 스타일 */} 위 코드처럼 @media 뒤에 조건을 작성하고, 해당 조건을 만족할 때 적용할 스타일 코드를 중괄호 {} 안에 넣으면 됩니다.이렇게 하면 화면이 그 조건에 충족할 경우, 지정한 스타일이 자동으로 ..

안녕하세요!오늘은 브라우저 기능 중 하나인 스토리지(Storage)에 대해 알아보겠습니다.특히, localStorage와 sessionStorage의 차이를 이해하고, 간단한 실습을 통해 직접 사용해보는 시간을 가져보겠습니다.먼저, 스토리지가 무엇인지부터 살펴보겠습니다. 스토리지(Storage)란?스토리지(Storage)는 웹 브라우저에서 데이터를 클라이언트 측(사용자의 컴퓨터)에 저장할 수 있게 해주는 기능입니다. 쉽게 말해, 웹페이지가 사용자의 브라우저에 정보를 '기억'해둘 수 있는 저장공간이라고 생각하시면 됩니다. 스토리지(Storage)의 필요성웹페이지는 기본적으로 페이지를 새로고침하거나 다른 페이지로 이동하면 모든 데이터가 사라집니다. 하지만 스토리지를 사용하면: 사용자가 입력한 폼 데이터를..

안녕하세요!오늘은 Math.floor, Math.random함수를 이용하여 랜덤 숫자가 나오는 추억을 곁들인 난수 생성기를 만들어 보겠습니다. 1. 뽑기 기계 틀 만들기기능 구현에 앞서, HTML과 CSS로 먼저 퍼블리싱 작업을 진행하겠습니다. HTML CSSbody { display: flex; justify-content: center; align-items: center; height: 100vh;}.machine_box { width: 500px; height: 600px; display: flex; flex-direction: column; align-items: cen..

안녕하세요!오늘은 JavaScript를 이용하여 사칙연산이 가능한 계산기를 만들어 보겠습니다. 1. 계산기 틀 만들기기능 구현에 앞서, HTML과 CSS로 먼저 퍼블리싱 작업을 진행하겠습니다. HTML 7 8 9 / 4 5 6 * 1 2 3 - 0 C = + CSSbody { height: 100vh; display: flex; justify-content: center; align-items: center;}.calculator { width: 300px;..

안녕하세요!오늘은 @keyframe로 몇 초 정해놓고 하는 로더가 아닌,Javascript로 실제 동작하는 로더를 만들어 보겠습니다. 1. 로딩애니메이션 만들기먼저 기능구현하기 전에 HTML, CSS로 애니메이션을 만들어 주겠습니다. HTMl CSS.loading { position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}.loader { width: 500px; height: 500px; position: relative;}.item { width: 200px; ..

안녕하세요!오늘은 PHP라는 언어에 대해 간단히 알아보려고 합니다.HTML과 많이 언급되는 PHP, 어떤 역할을 하는지 알아보겠습니다. PHP란?:먼저 PHP가 뭐하는 녀석인지 알아보겠습니다.PHP는 "Hypertext Preprocessor"의 약자로 HTML 내에 코드를 삽입하여 서버에서 실행되는로그인, 회원가입, 데이터베이스 처리 등 백엔드 기능 구현에 적합 웹 프로그래밍 언어입니다.맛보기로 기본 문법하나 보시죠.echo는 출력을 위한 명령어 입니다. 사이에 작성된 코드는 서버에서 실행됩니다. PHP 코드 실습:PHP가 어떤것이 가능한지 예시로 간단한 동적웹페이지를 만들어 보겠습니다. 현재 시각: 위 코드는 접속할 때마다 서버 시간이 동적으로 바뀌는 웹페이지입니다. 결과:..