JEEWONSCRIPT

[React/Typescript/Styled-components] 모달 창 만들기 이번 포스팅에서는 React 라이브러리와 Typescript, 그리고 Styled-components로 우리가 흔히 모달이라 부르는 Dialog window를 만들어보겠습니다. 뭔가 만들기 어려울 것 같지만, 생각보다 너무 간단해서 놀라 자빠지실지도 모릅니다! Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. "Open Modal" 버튼을 클릭하면 모달 창이 열리고, 반투명한 회색 배경(Backdrop)을 클릭하면 모달 창이 닫힙니다. 그럼 이제 구현 코드들을 살펴보겠습니다~ 폴더구조 src 폴더의 구조는 아래와 같습니다. 엥 이게 ..

[React/Typescript] 반응형 네비게이션 만들기 (Navigation with CSS media queries) 이번 포스팅에서는 React 라이브러리와 Typescript로 화면 크기에 따라 배치가 바뀌는 반응형 네비게이션을 만들어보겠습니다. 반응형 웹이란 하나의 웹사이트에서 PC, 태블릿/패드, 모바일 등 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다. 위키백과 : 반응형 웹 디자인 Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. iPhoneX 기준의 디스플레이 사이즈를 적용한 모습입니다. 반응형이 잘 적용되어 상단 메뉴들은 사라지고, 네비게이션 왼쪽에..