본문 바로가기
728x90
반응형

코딩24

[HTML] Select 박스 옵션 타이틀 항목 나타내기 셀렉트 박스에 옵션값을 입력하면 첫번째 옵션이 셀렉트박스에 노출이 된다. 예시 7일 3개월 1년 첫 옵션값 대신에 옵션들의 타이틀을 입력하고 싶은 경우 옵션에 disabled hidden selected 속성을 이용하면 된다. 옵션이 숨겨지고 선택 불가능한 상태로 활성화된다. 예시 구독 기간 7일 3개월 1년 코드 구독 기간 7일 3개월 1년 2023. 1. 2.
[HTML/CSS] 입력되는 텍스트 길이에 따라 자동으로 높이가 늘어나는 textarea textarea는 속성에서 rows나 cols로 열과 행의 크기를 정할 수 있습니다. textarea 하지만 지정된 크기보다 텍스트가 많이 들어가면 세로 스크롤이 생깁니다. textarea 우측 모서리의 도구를 사용하여 resize 가능하지만 이 사실을 모르는 사용자가 있을 수 있습니다. 입력하는 텍스트 양에 따라 textarea가 자동으로 맞춰지면 훨씬 보기 좋고 편할텐데! 구글링 해서 찾았다. 자동으로 높이를 조절해주는 코드입니다. See the Pen Easiest Autogrowing Textarea by Chris Coyier (@chriscoyier) on CodePen. https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ 2022. 12. 29.
[HTML/CSS] pure css 원이 퍼지는 마우스오버 애니메이션 효과 마우스 오버 시, 원이 퍼지는 효과를 주는 코드이다. See the Pen circle animation on hover by nah (@wimmwell) on CodePen. 2022. 12. 29.
[HTML/CSS] 가로로 긴 컨텐츠 스크롤 박스 만들기 이미지를 반응형으로 사용할 때, 하나의 이미지를 사용하는게 가장 이상적이다. 하지만 모바일 크기에서는 너무 작게보이는 경우에는 모바일버전 이미지를 따로 만드는 경우가 있다. 하지만! 모바일 사이즈의 너비는 한정적인데 가로로 길어야만 하는 이미지가 있다. 예를 들면 가로로 긴 지하철 노선도같은 가로 이미지말이다. 그럴 경우에 나는 가로로 스크롤이 가능하게 박스를 만들어준다. 표도 아무래도 가로로 긴 경우가 많다. 그럴 경우 td 태그를 inline으로 처리하여 줄넘김을 할 수도 있지만 자주 사용하지 않는다. 긴 표의 경우에도 가로 스크롤 박스를 만들어 텍스트가 아래 이미지처럼 가독성 떨어지게 쪼개지지않은 상태에서 볼 수 있게 해준다. See the Pen Untitled by nah (@wimmwell) .. 2022. 12. 23.
[React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25.
유용한 MIT LICENSE(오픈소스 라이센스) 모음 - 애니메이션 @Github 🚩 MIT라이센스를 사용해도 될까? -오픈소스 라이센스이니 이론적으로는 저작권을 표시하면 상업적으로도 사용이 가능한 걸로 판단된다. 그래도 무작정 쓰지말고 허용 범위를 잘 찾아보고나서 저작권을 지켜 사용하도록 하자. 요약하면 MIT 허가서는 다음과 같은 라이선스이다. 이 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋다. 단, 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 한다. 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다. 출처: https://ko.wikipedia.org/wiki/MIT_%ED%97%88%EA%B0%80%EC%84%9C 💻 유용한 MIT 라이센스 애니메이션 소스 10가지 1. AOS 마우스 스크롤 시 개체가 나타난다... 2022. 4. 1.
728x90
반응형