전체 글 (393) 썸네일형 리스트형 HTML, CSS 로 불타는 입력창(Input) 만들기 미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을 위치시켜 줍니다. 또한 input 의 경우 속성으로 required 를 지정해 줍니다. 유효성 검사를 통과하는 경우 input:valid { 속성들 } 로 지정한 속성들이 유지되도록 해주기 위해서 꼭 필요한 속성입니다. 아이디 비밀번호 CSSCSS 초기화해당 부분은 불필요한 기본 CSS 속성을 제거하는 부분입니다. input 의 경우에는 기본 border 의 색상을 gray 로 설정하기 위해 border: 1px s.. WIndow 환경에서 Open SSH 로 접속 및 AWS EC2 인스턴스와 연결하기(+ 번외: SCP 사용해서 EC2 인스턴스로 파일 전송하기) 들어가는 말기존에 Putty 를 사용해서만 AWS EC2 인스턴스 터미널로 접근했습니다. 이는 학습목적으로 OPEN SSH 를 이용해 접근해보는 시간을 가졌고, 이 과정에 대해서 정리한 포스트입니다. WSL 설치하기해당 사이트(https://learn.microsoft.com/ko-kr/windows/wsl/install) 에 접속하여 WSL2 를 설치해줍니다.사실 설치를 하지 않아도 최신 PowerShell 에서는 OpenSSH 설치를 지원해주기 때문에 리눅스 가상환경을 윈도우 환경에서 접속하게 해주는 WSL 이 꼭 필요하지 않을 수 있습니다. 다만 저의 경우에는 문제가 있었기 때문에 해당 WSL2 를 같이 설치해주었습니다. Open SSH 설정window powershell 에서 OpenSSH 서버 .. [나만의 명언집] 트러블 슈팅 모음집 ③ | 14 ~ 16 해당 포스트는해당 포스트는 나만의 명언집 프로젝트에 대한 트러블 슈팅을 정리한 포스트 입니다. 전체 1,2,3 버전이 있고 현재 포스트는 3에 해당합니다. 로그인 액세스 토큰 재발급 시 과도한 HTTP GET 요청이 발생하는 문제※ 해당 문제는 AcessToken을 자동 재발급하는 로직에서 한번에 최소 10번 이상의 GET 요청이 발생하여, 서버측에서도 과도한 요청 처리가 발생하여 심각성을 느꼈던 문제였습니다. AWS EC2 의 모니터링 도구에서 네트워크 요청이 짧은 시간 안에 그래프가 큰 폭으로 상승하는 것이 규칙적으로 발생하는 것을 확인하여 이상함을 느꼈고, 이를 네트워크 탭에서 확인해보니 해당 문제가 발생하고 있음을 인식하였던 문제입니다.문제상황액세스 토큰 재발급을 위해 자동화 로직을 구현하는 .. HTML/CSS/JS 를 이용한 스트리밍효과 토글 UI 만들기 이전 애니메이션 CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작[이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3Dduklook.tistory.com 미리보기이번 과정을 따라오시면 아래와 같이 스트리밍 되는 듯한 토글 애니메이션을 구현하실 수 있게 됩니다. HTML마크업은 크게 추가할 것은 없습니다. 아래와 같이 두 가지 요소만 만들어주면 됩니다. 나중에 box 태그 내부에 스트리밍 효과의 span 태그를 추가할 예정입니다. CSSCSS 기본 여백 제거우선 브라우저에 기본 적용된 여백을 제거하고, 콘텐츠의 길이와 높이를 계산 시 margi.. [푸드피커] 프로젝트 발자취 - 첨부된 영상이 보이지 않는다면 새로고침 하시면 해결이 됩니다.- 기존에 잡담 항목이 있었는데, 괜히 불필요한 글이 길어지는 것 같고, 글의 일관성을 무너뜨린다고 판단하여 제외하였습니다. 들어가기전해당 프로젝트는 2023 년 7월 경 부터 약 1달 가까이 만들어 졌습니다. 그리고 2024년 5월 24일 경에 재개발에 들어 갔습니다. 이번 회고는 2024년 5월 24일 이전과 이후를 통틀어 지나온 발자취를 동라보는 시간이 될 것 같습니다. 따라서 프로젝트에 대한 간략한 소개와 어떤 페이지 혹은 기능으로 구성되어 있는지, 어떤 변화가 있었는지 어떤 어려움이 있었는지 등에 대해서 정리해보는 시간을 가져봅니다. FoodPicker 프로젝트 개요 FoodPicker 는 다양한 음식관련 정보를 조회할 수 있는.. Vite + React 환경에서 test 파일 제외하려면 참고하세요. 보호되어 있는 글입니다. a 태그의 텍스트가 길고, 모바일에서 레이아웃이 깨지는 문제를 경험했다면 이런 상황에 직면했다면기본적으로 a 태그에 입력한 텍스트는 너무 길면 개행이 되어서 문제될 일은 없습니다. 다만, CSS Reset 등의 도구를 사용하여 CSS 설정을 초기화한 경우, 아래와 같이 개행이 되지 않고 레이아웃이 깨지는 문제가 발생할 수 있습니다. 이 문제를 개선할 수 있는 CSS 속성에 대해서 소개하고자 합니다. 참고로, 아래에서 언급하는 두 가지 방법은 모두 동일하게 동작합니다. word-break 가 표준이 아닌 당시에 처음 나왔던 방식이라면 그 후 표준화되어 통일한 명칭이 overflow-wrap 입니다. 즉, 이 두 방식은 동일한 기능을 수행합니다. 해결방법 1 | overflow-wrap : break-word or anywherea {overflow-wrap: break-wor.. [푸드피커 프로젝트] 트러블 슈팅 1 - 5 들어가기 전푸드피커(https://foodpick.co.kr/)라는 거창한 이름과 달리 짤막한 프로젝트 재개발을 들어가기 전과 후에 경험했던 문제들을 정리한 포스트 입니다. 리액트과 익스프레스를 사용해서 개발이 되었고, 초기 개발 시(2023년 7월) 에는 문서 정리를 제대로 하지 않아서 비교적 최근 기점(2023년 12월 이후, 2024년 5월 기점)으로 정리된 내용이 들어 갔습니다. 사소한 문제일지라도 해결에 어려움을 겪고 있거나, 우연히도 동일한 문제를 경험하는 분이 있다면, 언제가 되었든 참고할 수 있는 그런 글이 되기를 바라며 기록으로 남겨봅니다. 다만, 포스트의 퀄리티는 보장하지 못합니다. 부족한 부분은 계속해서 개선해 나가보도록 하겠습니다. 페이지네이션을 통한 페이지 변경 시 레이아웃 깨짐.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 50 다음
