[JavaScript] 객체 기본
IT/JavaScript 2020. 12. 31. 22:32

객체 : 관련된 데이터나 함수의 집합 객체 안에서는 데이터를 프로퍼티(속성), 함수를 메소드라고 한다. ​ let person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); }, greeting: function() { alert('Hi! I\'m ' + this.name[0] + '.'); } }; 이 예시에서 프..

[JavaScript] Switch language button
IT/JavaScript 2020. 12. 31. 17:38

codepen.io/JFeremy/post/switch-language-button-js Switch language button JS switch language Script to change language in website with button. You only need a button to choose language and add "id" in balise to inform... codepen.io 자바스크립트를 이용하여 버튼을 눌렀을 때 특정 언어로 바꾸기 - Script to change language in website with button. - You only need a button to choose language and add "id" in balise to inform abou..

[JavaScript / 생활코딩] Ajax
IT/JavaScript 2020. 12. 31. 17:06

· Ajax - Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. (출처:위키피디아) - 즉, JavaScript와 XML을 이용한 비동기적 정보 교환 기법 ​ - Ajax로 현재 페이지의 화면 전환 없이 서버에서 데이터 자료를 전송 가능 - 새로 고침이나 새로운 HTML 페이지로 전환이 필요 없다. - 부분만 로딩이 되므로 속도가 빠르다. ​ ​ JavaScript 선행학습이 필요하다. (무조건) ​ 생활코딩 강의를 들으며 이고잉님이 항상 강조하던 것은 중복의 제거이다. (+ 쪼개기) 이 수업 또한 중복을 제거해 나간다..

[CSS] min-width 적용 안 되는 문제
IT/HTML, CSS 2020. 12. 30. 22:40

미디어 쿼리를 만드는 중이다.​@media (min-width: 992px){...}@media (min-width: 768px){...}@media (min-width: 576px){...}​ ..등등​그런데 값 적용이 아무리 안 되는 것이다.알고보니 순서가 중요했다...^^min-width를 오름차순으로 해야한다.​@media (min-width: 576px){...}@media (min-width: 768px){...}@media (min-width: 992px){...}​​운 좋게 이때까지 올바른 순서로 했었는데 이번에 반대로 하면서 깨닫게 되었다.정말 이런 기본도 몰랐다니 반성하게 된다.

[CSS] Custom properties (사용자 정의 속성)
IT/HTML, CSS 2020. 12. 30. 12:24

developer.mozilla.org/en-US/docs/Web/CSS/--* Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function. Custom properties are scoped to the element(s) they are declared on, and part developer.mozilla.org w..

[CSS] 수직/수평 정렬
IT/HTML, CSS 2020. 12. 30. 12:19

- block의 경우 (예를 들어, div) margin: auto로 수평 center 가능하다. (수직으로는 불가능) ​ - text-align의 경우 요소를 수평 center 가능하지만 수직으로는 불가능하다. 블록 요소에는 적용이 안 된다. ​ -transform: translate(50%, 50%) translate(x축, y축)이다. 50씩 이동하므로 완전한 center. ​ -텍스트인 경우 text-align: center line-height: __px (__에는 부모 상자의 height 만큼 넣어주면 된다.) ​ ​ ​ 그냥 justify-content를 사용하도록 하자... developer.mozilla.org/en-US/docs/Web/CSS/justify-content justify-..

[HTML/CSS] 반응형 메뉴 제작 (Hoverable Dropdown)
IT/HTML, CSS 2020. 12. 29. 01:50

커서를 가져다대면 나타나는 메뉴를 제작하고 싶었다. jquery나 js를 사용해야하는건지 머릿속이 복잡했다. ​ 하지만 css만으로 가능했다. How TO - Hoverable Dropdown How TO - Hoverable Dropdown ❮ Previous Next ❯ Learn how to create a hoverable dropdown menu with CSS. Dropdown A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Hover Me Try it Yourself » Create A Hoverable Dropdown Create a dropdown menu..