본문 바로가기

분류 전체보기235

글래스모피즘(Glassmorphism) 배경 불투명 효과 css 처리 이렇게 일반 불투명한 배경 효과에서 글래스모피즘 효과 주기 backdrop-filter: blur(10px); backdrop-filter 추가 2023. 12. 5.
앵귤러 이벤트 전파 막기 한 영역 클릭시 모달이 2개 뜰때 (빈부분 영역 클릭과 / 버튼클릭시 나오는 모달이 다름) e.stopPropagation() 과 toPromise(); 로 이벤트 전파 막기 가능 async openScheduleModal(e: Event) { e.stopPropagation() const dialogRef = this.dialog.open(ScheduleDetailModalComponent, { panelClass: ['reed-modal', 'schedule-detail-panel'], autoFocus: false, }); const closeRes = await dialogRef.afterClosed().toPromise(); } async openScheduleWriteModal() { cons.. 2023. 11. 22.
드롭다운 카테고리 선택시 하위카테고리 (앵귤러) 대분류 카테고리 만들기 categoryList 변수안에 2중 배열을 만든다. categoryList = [ { category : 'IT', children : [ {name: '기획'}, {name: '디자인'}, {name: '개발'}, {name: '데이터사이언스'}, {name: '마케팅'}, ], }, { category : '어학', children : [ {name: '회화'}, {name: '작문'}, {name: '자격증'}, {name: '언어교환'}, ], }, ] for문을 돌릴 위치에 배열을 만든 categoryList 를 categorylistbig 으로 받아와 대분류인 category에 접근 {{categorylistbig.category}} 이때 클릭이벤트를 걸어 클릭시 해당.. 2023. 11. 22.
텍스트 밑줄효과 text-decoration: underline; // 밑줄 text-underline-offset: 4px; // 밑줄위치 text-decoration-thickness: 1px; //밑줄굵기 일반 텍스트에 밑줄주기 2023. 11. 3.
선택자 nth-child 활용 기본 선택자:nth-child(n) // n번 선택자:nth-last-child(n) //뒤에서 n번째 선택자:nth-child(2n) // 2의배수번째 2,4,6,8.......번째들 모두 선택자:nth-child(odd) //홀수번째 모두 선택 선택자:nth-child(even) //짝수번째 모두 선택 범위 선택자:nth-child(-n+6) //1번부터 6번까지 선택자:nth-last-child(-n+6) //뒤에서 1번부터 6번까지 선택자:nth-child(n+6) //6번부터 전부 선택자:nth-last-child(-n+6) //뒤에서 6번쨰 전까지 전부 (10개라면 5개) 선택자:nth-child(n+2):nth-child(-n+4) //2번 부터 4번 전까지 2023. 11. 3.
Animate.css 활용 fadeIn효과 걸기 기존 제이쿼리로 fade - in, out 을 걸었던 방법과는 다르게 , animate 사이트에 나온 자바스크립트를 활용해 효과주기 text 를 페이드인 으로 나오게 한다 https://animate.style/ 적용방법은 2가지 install 로 설치하거나 CDN 로 링크삽입 작성중인 html.index 파일에 link 태그로 CDN 방식 추가 사이트 안내를 보고 자바스크립에도 적용 //텍스트박스 에니메이션 적용 const currentSlice = slides[currentIndex]; const textBox = currentSlice.querySelector('.text-box'); textBox.classList.add('animate__animated', 'animate__fadeIn'); /.. 2023. 10. 23.
자바스크립트로 슬라이드 인디케이터 indicator 구현하기 (active or forEach) 아래에 indecator 요소를 넣어 하나 선택시 상태값이 바뀌게 한다. 예시로 빨갛게 색이 바뀌게 적용 기본 html 코드를 적어준후 scss로 자리잡아주기 &.active 로 색상값을 변경하고 자바스크립트로 css 요소에 접근한다 .slide_pagination { @include flex-row(); gap: 15px; position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); li { width: 7px; height: 7px; border-radius: 50%; background-color: #fff; &.active { background-color: red; } } } 자바스크립트로 요소 선택 //인디케이터 요소 선.. 2023. 10. 23.
자바스크립트로 자동 슬라이드 구현하기 (querySelector / setInterval) copy 사이트 hb paper html / css 영역 display flex 를 이용 슬라이드 박스안에 슬라이드들을 배치해 가로로 배치해준다 전체 박스를 만들어 overflow:hidden 을 사용해 슬라이드 영역을 가려주고 윈도우 창에 꽉 차게 배치 html 그 소중한 가치를 알기에 우리는 돌아가려고 합니다. 자연으로, 스마트하게 그 소중한 가치를 알기에 우리는 돌아가려고 합니다. 2 그 소중한 가치를 알기에 우리는 돌아가려고 합니다. 3 css .main-slide { width: 100%; height: 100%; overflow: hidden; position: fixed; .slide-box { height: 100%; width: 100%; display: flex; position: re.. 2023. 10. 18.
앵귤러 셋팅 Angular 1. nodejs 설치 후 버전확인 npm -v 2. typescript설치 npm install -g typescript 3. angular CLI 설치 npm install -g @angular/cli 4. 프로젝트 생성 ng new 프로젝트명 5. 컴포넌트 생성 ng generate component 컴포넌트명 2023. 10. 14.
input type text 추가요소 커스텀 커스텀에 필요한 css input { width: 100%; height: 52px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--reed-gray100); } input:focus { outline: 1px solid var(--reed-gray300); } input::placeholder { color: var(--reed-gray300); } input:focus > 인풋 박스를 클릭하고나면 나오는 아웃라인 효과 input::placeholder > 클릭전 나오는 기본 문구 color 변경 2023. 9. 17.
function 이란? function? -프로그램을 하는 가장 기본적인 building block -subprogram 이라고 불리며 재사용이 가능하다 -한가지의 작업이나 어떤값(value)을 계산하기 위해 쓰임 사용법 function 함수이름(파라미터1, 파라미터2) { 내용 } 리턴; 하나의 function은 === 한가지일만 한다. 함수이름 작성법 변수는 명사로 함수는 동사로 (doSomething) 함수는 object 이다. 1. 변수에 할당이 2. function 에 파라미터로 전달 3. 리턴값으로도 리턴 1. function function 으로 printHello함수를 만들고 그 함수를 리턴한다. function printHello() { console.log('hello'); } printHello(); 2. .. 2023. 9. 5.
html 변천사 html 변천사 1. 기존 html,css,js 로만 작업한 버전 단점- 사용자 환경에 일일히 대응할 수가 없다. 2. ejs (embededjs) js 안에 html를 템플릿을 만들어서 찍어낸다. 사용자 환경에 맞추어 일일히 만들어준다 (시간이 오래걸림) 3. spa (싱글페이지) html 하나와 js 파일을 뭉쳐서 넣어준다 js 파일안에 화면을 만드는것에 필요한것들이 들어가있다. 기존엔 클라이언트가 서버에 화면을요청하면 서버에서 하나하나 만들어서 응답함(ejs 버전) 하지만 spa 화면구동에 필요한 js 다 들어가있으므로 서버를 안거쳐도됨. 응답이 빠름 기존에 서버에서 만들었던 작업을 클라이언트로 넘김 단 문제점 '검색엔진' 네이버,다음,구글..... 사이트 검색시 내가 검색한 키워드에 맞춰 띄어줌 .. 2023. 9. 2.

티스토리툴바