오늘은 날짜를 입력하면 그 날짜에 맞게 카운트 다운을 하는 웹사이트를 만들어보았다. 처음으로 디자인도 신경써서 만들었고 뭔가 있어보이니까 괜히 더 뿌듯했다 ㅋ 앞으로도 이런 몇가지 프로젝트를 꾸준히 할 예정인데 이번 프로젝트를 하며 가장 어려웠던 부분은 input type="date"를 꾸미는 것이였다. 지금 내가 만들어 놓은 코드는 크롬, 파이어폭스에만 적용이 되고 엣지나 다른 브라우저는 호환이 안된다. (input type="date" 꾸미는 방법은 참조해놓은 유튜브에서 자세히 설명해주니 참고 바람 https://youtu.be/LdT4X9GAjr4) 실행영상 htlm 구성은 비교적 간단하게 하늘색 컨테이너박스 안에 calender 클래스를 만들고 4개를 이어 붙혔다. 처음에는 transition을 ..

오늘은 데이터베이스, 서버 없이 그냥 웹 상에만 존재하는 테이블을 만들어 보았다. 아직 서버와 데이터베이스 공부를 하지 않아 구축을 못했었는데 테이블을 만드는 과정에서 데이터베이스와 서버가 어떻게 움직이는지 조금은 알 수 있었다. 사실 원하는 행을 선택해 그 행만 삭제하는 기능을 넣고 싶었는데 insertRow()로 만들어진 행에 클래스를 주는 법을 모르겠어서 구현하지 못했다. 그런데 ChatGPT를 이용해 그 기능을 넣는 방법을 배웠고 조만간 응용해서 코드를 다시 짜던지 추가를 하던지 완벽하게 구현할 생각이다. 아 그리고 창을 2개 만들어 부모창과 자식창의 데이터 교환을 배웠는데 개념을 응용하기가 생각보다 어려웠던 것 같다. 이 부분에서 생각보다 많은 시간이 걸렸었고, input 의 Date 타입에서 ..

컴활 준비를 끝내고 다시 자바스크립트를 공부하며 내가 객체지향을 아직도 잘 사용하지 못한다는 것을 알았다. 그래서 자바스크립트의 기초는 어느정도 알고 있으니 간단한 프로그램을 최대한 많이 만들며 언어에 익숙해지려 한다. 며칠 전 "피지컬 100" 이라는 프로그램을 보던 중 참가자들이 공중에 매달리며 버티는 장면이 나왔다. 이 때 가장 오래 버틴 사람이 승자가 되는 그런 게임이였는데 그 장면을 보며 참가자들의 기록을 쉽게 잴 수 있는 다중 타이머를 만들면 좋겠다고 생각했다. 생각보다 알고리즘은 굉장히 쉬웠지만 언어에 익숙하지 않다보니 시간이 조금 걸렸던 것 같다. Algoritm 알고리즘은 하나의 타이머가 흘러가고 해당 인원의 버튼을 누르면 타이머의 시간을 참조해서 시간을 기록하는 형태이다. 또한 타이머는..

들어가며 처음에는 책에 있는 자바스크립트를 공부하며 블로그를 업로드 하려 했는데 기초적인 프로그래밍 방법밖에 나오지 않아 파이썬 카테고리에 있는 글과 너무 많이 겹쳤다. 그래서 자바스크립트 카테고리에 있는 글은 내가 스스로 써보려고 하며 주로 실습을 위주로 코드를 업로드 할 예정이다. 물론 책으로 얻는 이론도 충분히 중요하다고 생각하지만, 최근 블로그에 업로드 한 태양계와 친구가 만든 게시판의 프론트를 건드려보며 경험으로 얻는 지식이 정말 중요하다고 느꼈다. 언젠가 내가 구글에 다 오픈소스로 있는데 뭐하러 힘들게 다 직접 하지? 라는 생각을 한 적 있었다. 그런데 직접 하지 않으면 그 코드가 어떻게 작동하는지 잊는 경우가 태반이고, 같은 알고리즘이라도 결과의 형태가 바뀌면 쉽게 인지하지 못하는 경우도 많..

최근 시험기간이기도 하고 학교 공부에 집중하다보니 블로그에 너무 소홀했던 것 같다. 처음에는 별로 나에게 도움이 되지 않을 줄 알았었던 과목도 이번 단원을 통해 다시 한 번 되짚어볼 수 있었고, 아는 내용이 나와 신기하기도 했었다. css 함수 중 rotate()와 skew()함수는 모두 학교에서 배운 Homogeneous Transformation 과 연관이 있었고, 평소같았으면 그냥 함수의 사용법만 알고 넘어갔을 단원도 그 함수가 어떻게 작동하는지와 같은 비교적 깊은 생각도 할 수 있었다. 트랜스 폼(transform) : 요소의 형태를 변형하거나 위치를 변경하는 것 사용법 : transform: 변형함수 2차원 변형함수 translate(tx,ty) : 지정한 크기만큼 x축 y축으로 이동 trans..

속성 선택자의 기본 개념은 해당 속성이 있는 요소를 선택하는 것이다. 예를 들어 a 태그 여러개를 만들어 여러 속성을 부여했는데 그중에 text-decoration이 none인 속성을 가진 것들을 선택하고 싶을 때 사용할 수 있다. 속성선택자 사용법은 대괄호 안에 원하는 속성을 입력해서 사용한다. a[href] { color : #fff; } 다음 코드는 a태그중에 링크가 있는 요소만 선택하는 코드이다. a 태그더라도 href가 없다면 선택되지 않는다. 특정 속성 선택자 특정 속성 선택자는 속성의 속성값까지 일치해야 선택하는 선택자이다. 사용법은 [ 속성 = 속성값 ] 이다. a [target = _blank]{ background: url(...) } 위 코드는 a태그의 target 속성이 _blank..