전체 글390 [ Javascript ] Drop Down(드롭다운) 메뉴 만들기 결과물 Drop 버튼을 누르면 아래와 같이 메뉴가 나오는 토글 버튼을 만들어 보았다. codepen 실제 결과물 보기: https://codepen.io/pen?template=VwNqPGw dropDown.html 버튼 클릭 시 dp_menu() 함수가 실행된다. Menu들은 기본으로 display:none 스타일링이 되어있다가 버튼이 클릭되면 display: block으로 바뀐다. Drop Menu1 Menu2 Menu3 Menu4 dropDown.css body { margin: 10px; padding: 10px; text-align: center; } .dropdown { position: relative; display: inline-block; } .button { padding: 10px .. 2024. 4. 23. [ 프로그래머스 / Javascript ] 추억 점수 https://school.programmers.co.kr/learn/courses/30/lessons/176963 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물.. 2024. 4. 23. [ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25. [ React ] Ant design 설치 방법 Ant design의 장점 여러 가지 기능을 빠르게 만들 수 있다. Customize가 가능하다. 모든 예제에 TypeScript, Javascript 코드가 제공된다. CodePen, CodeSandbox 보기가 제공된다. Animation이 필요한 부분에는 자연스러운 움직임이 적용되어 있다. https://ant.design/components/overview/ Components Overview - Ant Design An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises ant.desig.. 2024. 3. 23. [ React ] VSCode에서 Hello World! 출력해보기 리액트 설치 방법 https://codesign.tistory.com/298 [ React ] VSCode에서 리액트 실행하기 Visual Studio Code 터미널 열기 1. VSCode를 연다. 2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다. 쇼트컷으로 control + shift + ` 를 누르면 새 터미널이 열린다. 3. 화면하단 codesign.tistory.com 리액트를 설치한 뒤 프로젝트 시작하는 방법! 리액트를 설치한 뒤 아래와 같은 화면이 떠있다. 리액트를 설치하면 기본으로 생성되는 폴더들은 앞으로 우리가 개발하는데 필요가 없기 때문에 삭제해 준다. 아래 폴더들을 선택 후 삭제 한다. 삭제한 뒤 아래와 같이 터미널에 에러가 발생한다. 놀라지.. 2024. 2. 14. [ Radio Button ] 라디오 버튼 구현 ✨ 결과물 HTML * input 타입을 라디오로 설정해 줌으로써 생성된 버튼 중 하나는 선택이 되어 있다. CSS * { margin: 0; padding: 0; font-family: sans-serif; } body { display: flex; /* 화면 구조 설정 */ align-items: center; justify-content: center; background-color: #ABABAB; /* 화면 뒷 배경 */ height: 100vh; /* 화면 높이 설정 */ gap: 10px; /* 버튼 간격 설정 */ } .radioButton { appearance: none; /* 라디오 모양 보이지 않게 설정 */ display: flex; /* 버튼 구조 설정 */ align-items.. 2024. 1. 31. [ 언리얼엔진5 ] Dark 버튼을 눌러 맗은 하늘에서 흐린하늘로 변하게하는 방법 최종 목표 Dark버튼을 눌러 맗은 하늘에서 흐린하늘로 변하게 하기 1. Content Browser에서 오른쪽 마우스를 클릭해 새로운 블루프린트를 생성해 준다. 2. Actor을 선택해 준다. 3. 새로 생성된 블루프린트의 이름을 BP_Weather로 바꿔준 뒤 BP_Weather을 더블클릭해서 켜준다. 첫 번째는 왼쪽 Components섹션에서 Variables에서 +를 선택해 아래와 같이 세 가지를 만들어준다. 4. Bollean을 선택한 뒤 Sky Atmosphere을 선택한다. 5. 나머지 두 개도 아래와 같이 설정해 준다. 6. Blueprint 화면에서 마우스 오른쪽을 클릭한 뒤, Add Custom Event를 생성한다. 7. Dark로 이름을 바꾼 뒤 Details/Graph/Call I.. 2023. 12. 6. [ 언리얼엔진5 ] 먹구름(흐린) 하늘 표현하기 최종 목표 먹구름 하늘 만들기 1. VolumetricCloud를 선택 후, Detail/ Cloud Material/ Material에서 파일과 돋보기 아이콘을 선택한다. 2. Content Browser에서 SkyMaterial이라는 폴더를 생성해 주었다. 그리고 m_SimpleVolumetricCloud과 m_SimpleVolumetricCloud_Inst를 끌어다가 SkyMaterial로 복사해 준다(Copy Here). 3. SkyMaterial폴더에 있는 m_SimpleVolumetricCloud를 선택한 후 m_SimpleVolumetricCloud_Inst를 더블클릭해서 Details/Genteral/Parent에서 왼쪽 화살표 동그라미를 설정해서 방금 선택한 Material로 바꿔준다. .. 2023. 12. 4. [ 언리얼엔진5 ] FluidNinja 설정방법 준비물FluidNinja Live를 언리얼엔진 마켓에서 구입을 한다. 1. Place Actors에서 NinjaLive를 끌어다가 화면에 놓는다.Place Actors가 보이지 않는다면 상단메뉴에 윈도우 > Place Actors를 선택하면 화면 왼쪽에 뜬다. 2. Details에서 Activation Volume Size를 조절해 화면의 표면의 크기를 조절해 준다. 3. Show Activation Volume in Editor을 킬 경우 제일 밖의 노란색 선이 켜지는데 이것은 FluidNinja alert이 켜지는 범위를 보여준다. 4. FluidNinja가 작동되는 면적을 설정한다.Show Trace Mesh in Editor을 킬 경우 회색 면적이 보인다. 5. Show Interact.. 2023. 11. 27. 이전 1 2 3 4 ··· 44 다음 728x90
