반응형 Font-End43 footer 만들기, 겹치는 오류 잡기 문제 발생 웹사이트에 footer 를 만들었다. 하지만 나는 이 footer가 항상 웹페이지 맨 아래에 위치하게 하고 싶다. 하지만 그냥 div 로 만든다면 컨텐츠가 부족한 페이지에서는 맨 밑에 가지 않고 떠있는 패고싶은 상황이 생긴다. 그래서 나는 1. 항상 바닥에 붙어있는 2. 다른 컨텐츠(overflow가 일어나도)와 겹치지 않는 footer 이 2가지의 성질을 가지고 있는 footer를 만드려고 한다 해결 방법 이런 그지같은 것을 피하는 방법은 간단하다 자 설명. bottom:0 -> 맨 바닥에 붙인다. position: fixed -> 거기 가만 있어라. z-index: 1 -> z-index 의 값이 높은 것이 더 위에 올라오게 한다. 1. 항상 바닥에 붙게 만든다 2. 다른 것들과 겹치지 않는다 2021. 7. 15. 줄바꿈, 칸 크기 조절 가능한 입력창 만들기 문제 발생 일반적으로 이름, 번화번호, 이메일 정도나 적던 input 칸에는 그렇게 많은 공간이 필요하지 않죠. 그래서 우리는 그저 일반적인 태그를 쓰게 되었습니다. 하지만 주문시 요청사항 혹은 기타 메모 등과 같은 입력 공간에는 줄바꿈(enter)이나 크기 변경, 안의 내용에 따라 크기가 변하는 input이 필요하게 되었습니다. 오늘은 이 부분을 해보시죠 해결 방법 TypeScript // 여기는 input으로 memo를 넣는 부분에서 text 칸이 유동적으로 변화하게 만드는 부분 const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "heig.. 2021. 7. 7. Angular modal 활용 Angular을 사용하여 modal을 띄우는 경우가 종종 생길 수 있다. (팝업 개념) Angular의 modal 개념을 조금 쉽게 사용하는 방법을 길게 적어보려 했으나, 요즘 인터넷 사이트의 접속 방식이 모바일이 압도적으로 많아진 현 시점에 이러한 팝업 형식은 최대한 피해야 한다. (되도록 쓰지 말고 ok, cancel 정도 확인 버튼정도나 띄울때나 쓰라는 말이다) 1. 태그로 전체 html을 묶어, scroll 가능한 모달로 만들어라. (팝업이 떳는데 스코릴이 안되면 그 얼마나 끔찍한 화면인가) 2. 1번의 태그 바로 다음 맨 위에 {{season_name}} : {{class_name}} Detail close modal-header을 추가. CSS 파일에 스타일을 .modal-header { } .. 2021. 7. 6. <select> <option value =1> number (int), string 오류 해결 문제 발생 html 1학년 2학년 3학년 typescript selectGradeHandler(event: any) { this.grade = event.target.value; } 우리는 value = "1" 이라 하면 1이라는 string으로 저장이 될 터이니, value = 1 이라고 하거나 grade를 number나 int 와 같은 숫자의 형태로 선언을 했다면 하면 숫자로 저장이 될 것일고 믿었다. 그런데... 아니었다... 이렇게 한참을 개발하고 나중에 === (타입과 값을 동시에 비교하는 것) 로 비교를 했는데 숫자 타입이 아니라는 오류가 났다... 반년간 운영된 웹사이트에 이런 식으로 데이터가 쌓여오던 것이었다. 개패고싶다. 하지만 == 으로만 비교하면 되므로 일단 패스. 이 글을 읽게 되는.. 2021. 7. 6. 버림, 반올림 없이 소수점 2번째 자리까지 표현 $25 짜리 상품을 저렇게만 쓰면 없어보여서 25이지만 $25.00 이렇게 나타내고 싶은 경우 있다. 버림 싫다. 반올림 싫다. 그렇다면 어떻게 할까? 데이터베이스에서 가져올때 애초에 소수점 두자리까지 표현하도록 가져오겠다. 오늘도 짧고 간결하게 핵심만. 답은 .toFixed(2) 끝! 2021. 5. 18. <title> 브라우저 탭 아이콘, 탭 제목 1. 브라우저의 탭 아이콘을 설정하는 방법 (난이도 1~100 중 15?) 사용하는 방법은 거의 다 비슷하고 어렵지 않은 과정이죠. 물론 다른 프로젝트를 진행하게 된다면 또 다른 부분이 필요할테지만 지금은 Angular을 사용하고 있으니, 이런 것이 있구나, 이렇게 부르는 구나 정도를 알아보고 Angular로 브라우저의 탭에 들어가는 아이콘, 즉 Favicon 을 설정하는 방법을 기록한다 Angular에서 가장 처음 프로젝트를 생성한다면 app.component.ts가 src 최상단에 생기게 된다. app.component.ts로 간다. 거기서 가장 처음 내가 한 행위는 Favicon 설정, 다중 언어를 사용하는 사이트이기 때문에 처음에 언어를 영어로 설정하는 방법을 세팅했다. → 네비게이션 바에 국기버.. 2021. 5. 12. <a></a> href 없이 사용하기 기본적인 태그의 사용은 의 형식으로 사용하죠. 하지만 때로는 태그를 사용하는 때에 라우팅 없이 (페이지 이동 없이) 사용하고 싶은 경우가 있다. 이런 경우의 대처 방식을 알아보죠 그 부분에 마우스를 올려놓았을 경우 클릭해서 어떠한 함수를 사용하고 싶다면 class 로 뺀 후에 .payments { color: #008fd0; } .payments:hover { cursor: pointer; } 의 형식으로 한다면, hover, 즉 마우스를 가져다 대면 커서를 저렇게 바꿀 수 있습니다. ex) 💳 카드 정보 & 결제 정보 💳 카드 정보 & 결제 정보 클릭한다면 details()라는 함수를 실행해라, 해당 text에는 밑줄이 쳐져 있게 한다라는 코드입지다. text 스타일들 애초에 밑줄이 아닌 마우스를 올렸.. 2021. 5. 11. 이전 1 2 3 4 다음 반응형
