공부/HTML&CSS&JS
-
자바스크립트 isNan공부/HTML&CSS&JS 2021. 10. 25. 17:49
만약 입력받은 값이 문자가 아닐경우(여기서는 숫자를 원한다) isNaN을 쓰면됨 if ( isNaN(rangeNum.value) || isNaN(myNumber.value) || rangeNum.value < 0 || myNumber.value < 0 ) { 수행할 작업 } else { } rangeNum.value와 myNumber.value가 숫자가아니다 또는 0보다작다면 if를 실행하고 rangeNum의 값과 myNumber값이 숫자이고 그리고 0보다 크다면 else if를 실행
-
CSS - 블록속성 정렬공부/HTML&CSS&JS 2021. 10. 21. 21:07
래핑용박스{ 박스1 박스2 박스3 } 이 있다. 여기서 래핑용박스와 그 안의 박스1,2,3을 중앙으로 정렬할때는 래핑용박스의 부모태그인 Body태그에 display: flex; justify-content: center; align-items: center; height: 100vh; 이 네 가지 속성을 부여해주면 된다. 그러면 상하,좌우 정렬이 된다. 래핑용박스{ 박스1박스2박스3 } 이런식으로 정렬하고자 하면 박스1,2,3을 왼쪽으로 붙이고싶은 상황인데. 박스1,2,3의 부모인 .래핑용박스{}와 각각의 박스들을 모두합친 .래핑용박스 .박스{}에 따로 설정해줘야한다. .래핑용박스{}에 overflow:hidden; .래핑용박스.박스{} 에 float:left; ; 이런식으로 해주면된다. 만약 오른쪽으로..
-
setInterval, clearInterval을 사용한 간단한 스톱워치 만들기공부/HTML&CSS&JS 2021. 10. 20. 16:09
HTML 스톱워치 00:00:00 CSS *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: tomato; display: flex; justify-content: center; align-items: center; height: 50vh; } .wrap{ border: 1px solid white; border-radius: 15px; padding: 20px; } h1{ color: black; text-align: center; font-weight: bold; } #forms p{ text-align: center; font-size: 2em; font-weight: bold; color: white; margin..
-
간단한 웹 계산기만들기 (너튜부 수코딩님)공부/HTML&CSS&JS 2021. 10. 19. 14:12
강의 보기 전 레이아웃 난잡하게 div로 디스플레이, 영역생성 각 층마다 div와 ul, li태그로 버튼을 생성했다. (총5층) form으로 출력화면생성. 버튼의 위치는 테투리 픽셀 계산해서 때려박았다. 기능구현 자바스크립트 버튼하나하나마다 ID부여후 queryselector로 끌고와서 밸류를 준다. =이나 엔터가 입력되기전까지 버튼눌린값을 배열로 저장한다. 저장된배열의값을 for를이용하여 배열.length까지 모든 인덱스를 계산해서 결과값을 리턴. 여기서 의문은 기호는 어떻게 처리할지... 숫자는 parseInt를 이용하려했었다. 고민하다가 참고될글을 찾아봐야지하다 수코딩님 계산기발견. 강의 후 난잡하게 div막 쓸필요없이 전체 테투리잡기용으로 한번만 div사용. grid를사용하여 간단하고,균일하게 버..