분류 전체보기

Level 2 : 1~5 (숙제 및 깨달은 점)_if문

1. 2년 후 받을 총예금액 구하기 조건 50000원 미만: 연 15% / 50000원 이상 : 연 20% function depositResult(amount) { const amountOver = amount * 1.2 * 1.2; const amountLess = amount * 1.15 * 1.15; if (amount >= 50000) { console.log(amountOver); } else { console.log(amountLess); } } 2. 커피 총리필액 구하기 조건 커피는 총 3번 리필되며, 직전 마신 커피의 2/3만 리필된다. let first = 360; let total = 0; console.log(first + first * (2/3) + first * (2/3) * (..

Level 1 : 6~12 (숙제 및 깨달은 점)

6. form과 input 값이 비었을 때 얼럿 띄우고 submit막기 document.querySelector('form').addEventListener('submit', function(e){ if (document.querySelector('input[type=text]').value == '') { alert(`아이디를 입력하세요.`); e.preventDefault(); } else { document.querySelector('input[type=text]').submit; }; if (document.querySelector('input[type=password]').value == '') { alert(`비밀번호를 입력하세요.`); e.preventDefault(); } else { do..

Level 1 : 1~5 (숙제 및 깨달은 점)

1. 폰트사이즈 변경하기 document.getElementById('hello').style.fontSize = '16px 2. 알림창 열기/닫기 let alertBox = document.getElementsByClassName('alert-box'); let openBtn = document.getElementsByClassName('open'); let closeBtn = document.getElementsByClassName('close'); openBtn[0].addEventListener("click", function() { alertBox[0].style.display = "block"; }) closeBtn[0].addEventListener("click", function() { a..

여태까지 고쳐온 오류들 : 웹폰트 깨지는 현상 해결 5가지

이번에 보안상 문제로 링크로 걸려있던 웹폰트를 @font-face로 로컬 경로로 임베드하면서, 브라우저에서 글자가 깨져보이는 현상이 발견되었다. 특히 13px같이 작고 홀수사이즈인 폰트는 더더욱 깨져보인다. 브라우저마다 폰트를 랜더링하는 방식이 달라 이를 원천적으로 해결할 방법은 없다..만, 꼼수는 있다. 꼼수 1 : -webkit-text-stroke -webkit-text-stroke: 1px; -webkit-text-stroke: 1px rgba(0,0,0,0.1); 꼼수 2 : text-shadow text-shadow: #fff 0px 1px 1px; text-shadow: #333 0px 0px 1px; //검은색 글자용 꼼수 3 : -webkit-font-smoothing -webkit-fo..

여태까지 고쳐온 오류들 : 어느 상황에서도 100%로 보이는 비디오 BG 만들기

여태까지 비디오 BG를 메인에 깐 홈페이지들을 여럿 만들면서, 다양한 이슈를 경험했다. 제일 자주 맞닥뜨리는 상황은, 사파리에서 재생되지 않는 것. https://sunshineyellow.tistory.com/57 여태까지 고쳐온 오류들 : 사파리 영상 백그라운드가 안 뜬다/자동재생된다 여태까지 고쳐온 버그들 시리즈는 똑같은 오류가 발생하지 않도록 하고, 똑같은 오류가 발생했을 시 조속한 대처를 할 수 있도록 기록하는 시리즈다. 숫자 순서대로 시도해본다. 사파리 영상 백 sunshineyellow.tistory.com https://sunshineyellow.tistory.com/67 여태까지 고쳐온 오류들 : 사파리 video가 안보인다/재생도 안 된다 사파리에서 videos태그로 걸어둔 video가..

여태까지 고쳐온 오류들 : 사파리 숫자(전화번호형태) css가 안먹히는 문제

사파리 숫자(전화번호형태) css가 안먹히는 문제 a[href^=tel] { color: inherit; text-decoration: none; } reset.css에 추가해둬야겠다. important 아무리 먹여봐야 소용이 없다. 사파리는 참 지정해줘야 하는 것들이 많은듯.. 호환성: 문제없음.