본문 바로가기
반응형

Font-End43

스크롤 감지, 맨 위로 기 버튼 정말 간단하게 구현 웹 페이지 개발 중에, 홈이나 메인 페이지 같은 경우에는 밑으로 쭉 내리다 보면 top, 가장 위로 다시 가게 하는 버튼이 필요한 경우가 생기게 될 것이다. 그렇다면 우리는 일정 스크롤 이상으로 내려가면 버튼이 활성화가 되도록 한다. See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 해당 부분에 대해서 쉽게 설명을 해주자면 window.addEventListener('scroll', (e) => { // scroll 이벤트가 발생할 때 마다 이벤트가 발생함을 인식한다 let lastKnownScrollPosition = window.scrollY; // window : 현재 브라우저 창에서 // .scrollY : 스크롤의 세로 방향 위치 documen.. 2022. 2. 21.
자바스크립트 javascript 문자열 관련 함수 정리 특정 문자열로 시작하는지 문자열변수.startswith("특정문자열") const str = "Kyurasi rocks...!"; const checking_str = "Kyu"; console.log(str.startsWith(checking_str)); // str이 checking_str로 시작하므로 true 를 리턴하게 됩니다 const str = "Kyurasi rocks...!"; const checking_str = "Jyu"; console.log(str.startsWith(checking_str)); // str이 checking_str로 시작하지 않으므로 false 를 리턴하게 됩니다 특정 위치부터 특정 문자열로 시작하는지 문자열변수.startswith("특정문자열",몇번째) const.. 2022. 2. 5.
Angular 앵귤러 <mat-select> 안에 체크박스 다중선택 checkbox 목록을 여러개 만들어, 여러개 (다중선택)를 선택하여 배열에 담는 것은 웹개발을 하면서 가장 빈번하게 나타나는 부분입니다. 라디오버튼을 여러개 만들어서, 선택을 하는 방법, 혹은 체크박스로 select 하는 방법이 있습니다. 일단 여러개를 입력받아 저장하는 것도 굉장히 귀찮은 일이긴 합니다. 일단은 앞으로도 계속 사용하게 될 다중 선택 기능을 확실하게 잡고 갑시다. 일단 기본적으로 다중선택 기능 구현을 확실하게 익혀두고, 두고두고 사용합니다. 기본을 익히고 나서 심화를 해봅시다. Angular 기준, 즉 typescript 기준이지만, 이 정도의 응용은 할 수 있을 것이라 생각합니다. 만일, 해당 코드를 보고 다른 언어로 변환하기가 힘들다면 댓글을 남겨주세요. 아주 기본적인 것만 적을 것.. 2021. 12. 10.
Angular Timestamp 정리 .toDate() 오류 자꾸 헷갈리는 이 부분 한 번에 정리하고 간다 Timestamp 에도 종류가 있다. 숫자 형대로 나오는 것 혹은, 나노세컨드까지 이렇게 나타나는 firestore의 timestamp 체계. 1. firestore에서 사용하는 timestamp 형식으로 데이터를 생성하려면 import { firestore } from 'firebase-admin'; created_time: firebase.default.firestore.Timestamp.now(), 를 사용한다. firestore.Timestamp.now 가 아니다. 분명히 구분을 해야 한다. 2. firestore 에서 사용하는 timestamp형식을 html 에 뿌려주려 한다면 정말 간단하다 js 에서 별 짓 다 하고 이상한 짓거리 하는 것들도 많이.. 2021. 11. 3.
ToolTip 에서 줄바꿈 break line Angular에서 matToolTip = "" 은 마우스를 올렸을 때에 부연설명을 넣을 수 있다, 하지만 이 부분의 스타일들을 고치는 방법은 좀 특별하다. 이 안에서는 \n 도 돌아가지 않고, &nbsp 와 같은 것도 잘 먹히지 않는다. 이러한 경우 Angular 에서 matToolTip의 스타일을 변경하는 방법에 대해 해결 방법만 간략하게. 일반적으로 style="" 로 넣는다고 적용이 되지 않는다. ::ng-deep .mat-tooltip { font-size: large !important; white-space: pre-wrap; } 설명. 가상 클래스 ::ng-deep가 적용된 CSS는 컴포넌트의 뷰 캡슐화 정책을 완전히 무시합니다. 그래서 ::ng-deep이 적용된 규칙은 전역 스타일 규칙이 .. 2021. 10. 20.
vscode 프론트앤드 개꿀 플러그인 모음 비주얼스튜디오로 html, css, js 작성시 개굴인 플러그인들을 소개해보려 합니다 1. Material Icon Theme 이거 설치하면 파일을 확장자별로 정리해서 보여줍니다. js, ts, html, css 마다 다른 아이콘으로 보여줍니다. 상세한거는 프로젝트 내용 땜시 json만 2. Auto Rename Tag : ZZZZ 여기서 앞의 h1 에서 h2 로 바꾸면 클로징 태크도 같이 변경됩니다. 로 3. CSS Peek 마지막으로 , 비주얼스튜디오에서 화면 분할해서 쓰실 때에, 가끔 짜증나는 놈이 있죠.. 요놈을 없애볼랍니다. minimap 이라고 부르더군요.. Mac 기준 comand + , 하면 설정이 열리죠. 아니면 비주얼스튜디오에서 파일 - 기본설정 - 설정 가면 됩니다 여기서 minima.. 2021. 10. 20.
반응형 웹페이지 만들기의 시작 스마트폰의 대중화로 예전과는 달리 웹사이트 방문을 위해 사용하는 기기의 비중에 스마트폰이 압도적인 비중을 차지하기 시작했다. 그렇다고 데스크탑 화면을 버릴 순 없다. 그렇다면 우리는 둘 중 하나도 버릴 수 없다. 반응형 웹을 만들것이다. See the Pen by Junmannn (@Junmannn) on CodePen. 아 돌려봤는데 이게 블로그에서 바로 페이지 크기 변경하면서 볼 수가 없구나 코드를 올릴게여 HTML CSS .bgcolor { background-color:red; height:400px; } .size-xlarge{ flex:0 0 auto; width: 50%; } /* media 쿼리를 쓴 부분임 이게. 0~400px 까지는 이렇게 하라*/ @media screen and (ma.. 2021. 9. 2.
HTML div 요소 정렬 mat-card 를 사용 하던 도중 button을 우측 하단에 놓고 싶었다. 하지만, 구글링을 해도 float : right 를 하면 된다는 글들이 있었다. 냅다 따라했지만 오른쪽에 위치하는건 맞는데 div 밖으로 튀어 나온다. 혈압이 터질 거 같았지만 다른 방법을 찾아 보았다. 결과만 말하고 끝내고 싶다 display: flex; justify-content: flex-end; 선에서 정리 가능. See the Pen by Junmannn (@Junmannn) on CodePen. + div 자체를 중앙 정렬하는 코드 : div 자체에 적용하는 스타일 한 줄이면 정리 가능 style = "margin:0 auto;" 2021. 8. 20.
html 테이블 - 마우스 셀 위치 하이라이트 테이블 표가 아주 작을때에는 상관이 없다. 하지만 데이터가 많아지고 행과 열이 아주 많을 때에는 지금 내가 마우스 커서를 올린 곳이 이 라인이 맞나 맨왼쪽, 맨 위로 손가락을 그어 따라가는 한심한 행위를 할 때가 있다. 하지만, css 로 이런거는 금방 처리를 하자 See the Pen by Junmannn (@Junmannn) on CodePen. 2021. 8. 20.
html text outline css, 텍스트 테두리 입히기 가끔 버튼을 만들고 그 안에 문구를 넣을 때에, 바탕이 너무 밝아, 흰색 텍스트를 쓰는 경우 잘 보이지 않는 경우가 있다. 이런 경우 글자에 테두리를 넣고 싶다. 그러면 어떻게 하는 것이 좋을까? 너무 간단해서 화가 난다. style ="-webkit-text-stroke: 1px black;" 끝. 2021. 8. 11.
CSS 없이 HTML 로만 텍스트에 밑줄긋기, 취소선 긋기. See the Pen by Junmannn (@Junmannn) on CodePen. 2021. 8. 11.
javascript 자바스크립트 사용자 브라우저 확인하기 웹사이트를 개발하다보면 항상 무서운 일이 있다. 사용자들은 QA 팀보다도 강한 것 같다... 어떻게든 오류를 찾아내고 만든다. 일반적인 웹사이트라면 그다지 코어한 이슈는 아닐 지 몰라도, 결제가 들어가게 되는 순간 브라우저 이슈는 정말 무서운 이슈로 바뀌게 되는것이다... 한국 고객들을 상대로 웹사이트를 개발하면서 가장 두려웠던 브라우저... 익스플로러... 일단 얘 띠껍죠? 그러면 내가 만든 이 웹앱이 로드가 되는 순간 브라우저를 체크해서 인터넷 익스플로러면 팝업을 띄우던, 못들어가게 하던 하자고. 그러면 일단 이놈을 막을 코드를 준비해야지 Angular typescript를 사용중입니다. 하여튼 비슷하게 가니까 참고 1. 디바이스 감지 npm 설치 npm install device-detector-j.. 2021. 8. 9.
반응형

티스토리툴바