본문 바로가기
728x90
반응형

Coding With Jina154

[자바스크립트] 바닐라자바스크립트를 이용하여 시계 만들기 일단 2종류의파일이 필요함 1. index.html 2. clock.js 1) 첫번째 index.html 파일에 노란색 부분을 작성한다. -> html 영역과 js 파일을 연결해주는 것 2) js 파일 작성해주기 ① 1~2번째라인 clockContaniner를 생성해주고 거기에 div js-clock를 연결해준다. div js-clock 영역 안에 있는 h1 js-title을 clockTitle을 생성해주고 연결 ② 12번째라인 function init() 일단 만들어주고 ③ 4번째 라인 getTime 함수를 만들어준다. ④ 5~8번째 라인 만든 getTime 함수 안에 날짜 객체?를 생성해주고나서 그 객체 안에 있는 분/시간/초를 따로따로 저장시켜준다. ⑤ 9번째라인 마지막으로 clockTitle에 i.. 2020. 11. 4.
[자바스크립트] JavaScript 그리고 ES6는 무엇인가? 자바스크립트를 다시 제대로 공부해보려고 한다. 그 전에 전부터 헷갈렸던 용어부터 정리해볼까한다. 오늘은 들어도보고 얼추 알지만 자세히는 알지 못했던 용어들과 자바스크립트에 대해 정리해보는 시간이다. 나같이 비전공자들이 봐도 아주 쉽게 설명을 써볼까하는데 미래의 이 모든것들을 까먹은 나에게 필히 도움이 되길 바라며.. ◆ 자바스크립트(JavaScript) - 객체(object) 기반의 스크립트 언어 - HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현 - 자바스크립트는 주로 웹 브라우저에서 사용 - Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용 가능 ◆ 객체(object) 기반(프로토타입 기반) - 프로토타입 기반 언어는 클래스 기.. 2020. 8. 4.
[CSS] 스크롤바 숨기기 해당 div에 -ms-overflow-style: none; 넣고 ::-webkit-scrollbar { display: none; } 이거 따로 추가 크롬만 확인해봄 2020. 5. 27.
[CSS] 배경 이미지 그라데이션 속성 / 이미지 점점 흐리게 linear-gradient 에서 to bottom 하면 아래서부터 rgba(색상, 투명도) 위치 ※ 투명도가 작을수록 흐릿하며, 0일 때는 안보임 rgba(255, 255, 255, 0) 10%, 아래 끝부터 화면 10% 까지는 흰색 투명도 0 rgba(255, 255, 255, 0.5) 25%, 10%부터 화면 25% 까지는 흰색 투명도 0.5 rgba(255, 255, 255, 0.7) 40%, 25%부터 화면 40% 까지는 흰색 투명도 0.7 rgba(255, 255, 255, 1) 50%, 40%부터 화면 50% 까지는 흰색 투명도 1 rgba(255, 255, 255, 1) 100% 50%부터 화면 위 끝 까지는 흰색 투명도 1 ★ url 이미지가 linear-gradient 보다 먼저 오면 .. 2020. 5. 21.
[CSS] 체크박스 CSS 적용하기 체크박스 자체가 CSS 적용하는 것은 불가능 하므로 input 체크박스를 숨기고 label로 가짜 체크박스를 만들어준다 .remember-check { /* 실제 체크박스는 화면에서 숨기고 */ display: none; } .remember-check + label { display: inline-block; position: relative; cursor: pointer; } .remember-check + label:before { /*가짜체크박스*/ content: " "; display: inline-block; width: 13px; /* 체크박스의 너비를 지정 */ height: 13px; /* 체크박스의 높이를 지정 */ line-height: 13px; /*세로정렬을 위해 높이값과 일치 .. 2020. 5. 20.
[CSS] Padding을 제외한 배경색 지정하기 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 background-clip: content-box; 2020. 5. 20.
728x90
반응형

티스토리툴바