공부 기록일지📚

UI(User Interface) -사용자가 시스템을 제어하기 위해서 사용하는 조작 장치를 UI라고 합니다. e.g.) 화면상의 button들 API(Application Programming Interface) -애플리케이션을 위해서 프로그래밍을 할 때 사용하는 조작 장치를 API라고 합니다. e.g.) alert 모든 프로그래밍언어는 API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어진다. *순서가 없다면 API가 소용없다. 역으로 말해도 같음 web작업을 하면서 상황별 검색키워드 추천 ▶웹페이지에 있는 어떤 태그를 삭제하고 싶거나 어떤 태그에 자식 태그를 추가하고 싶다면 -> document 객체 살펴보기, 여기서 해결이 안되면 DOM(Document Object Model)으로 수색..

라이브러리 vs 프레임워크 공통점: 다른 사람의 도움을 받아서 소프트웨어를 만드는 것 , 다른 사람과 협력하는 모델 차이점 라이브러리 - 잘 정리해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어/ 내가 만드는 소프트웨어의 부품을 가져오는 느낌 e.g.) jQuery ( JS 라이브러리 중 가장 유명) 프레임워크 - 반제품 소프트웨어를 사용하는 느낌, 내가 프레임워크에 들어가서 작업하는 식( 큰 틀이 있으면 메인부분은 건들이지 않고 기획 의도(웹, 게임 등등)에 따라 수정하여 사용/ 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 것) jQuery 라이브러리 기본적으로 jQuery는 $로 시작합니다. 그리고 $() 이런 형태가 되죠 '달러'라는 이름의 함수입니다. e.g.) $('a') // 이 웹..

key words JS Math.floor() - 소수점을 없애기 위해 사용되는 함수 +a) Math.ceil() 소수점 올림, Math.round() 소수점 반올림 JS Math.random() - 이 함수는 부동소수점을 반환하기 때문에 소수점이 존재합니다. JS 재귀(recursion)함수 - 함수 내부에 자기 자신을 호출하는 함수 CSS 템플릿 레터럴 ``(백틱) CSS linear-gradient()함수 - 색상에 그라데이션을 주는 기능 linear-gradient() 설명 MDN▼ https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() linear-gradient() - CSS: Cascading Style Shee..

🐱‍👤목차 함수의 활용(리팩토링이란?) 객체(쓰고 읽기, 반복문, 프로퍼티와 메소드) JS명명 규칙은 [유용한 사이트]쪽에 따로 빼놓았음 파일로 쪼개서 정리하기(장점 상세 설명) 😛function(함수)의 활용 리팩토링: 동작하는 내용은 같지만 코드를 효율적으로 하는 것 ->리팩토링에서 아주 중요한 역할을 하는 것이 함수입니다. 리팩토링하기 위해서 가정을 해봅시다. 버튼이 1억개가 있다면 같은 코드를 여러곳에 복붙해놓는 것보단 함수를 통해 관리하는 것이 좋겠죠? function nightDayHandler() { const target = document.querySelector("body"); if (this.value === "night") { target.style.backgroundColor = ..

목차 객체에 접근하는 3가지방법(콘솔창 TIP, 터미널 단축키) 배열과 반복문(querySelector, querySelectorAll) 함수의 기본문법(arg, param, return) 소괄호 안의 개념은 같이 설명된 미니개념이라고 생각하시면 됩니다. 의식의 흐름대로 찾은 개념을 정리해놓기도 합니다. 3 ways to access object properties in JS Dot property accessor: object.property Square brackets property access: object['property'] Object destructuring: const { property } = object 브라우저 콘솔창TIP shift 를 누르고 enter를 치면 줄바꿈이 됩니다. J..

console: 웹 브라우저에서 제공하는 console을 이용하면 JS파일을 만들지 않더라도 JS코드를 즉석에서 실행할 수 있습니다. TIP: console은 내가 보고있는 해당 웹페이지에서 JS가 실행되는 모습을 보여줍니다. 만약 내부의 글자수가 몇인지 궁금하거나 할 경우,해당 문자를 카피해서 console창에서 확인해볼 수도 있겠죠 위에는 HTML element창을 띄우고 아래에 console창이 보이게 하고싶다면 element창에서 esc키를 눌러주면 됩니다. 🙂콘솔창에서 JS코드 실행해보기 .length: 문자열의 개수를 알려주는 프로퍼티 // 문자열을 기준으로 하니까 따옴표(큰따옴표, 작은 따옴표 둘 다 가능)로 묶어둬야 겠죠 .trim() : 공백을 잘라주는 메소드 .upperCase(): 문..

Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법 + 레이아웃을 잡을 때도 사용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, asperiores neque. Perferendis numquam rem culpa sit illo nisi recusandae, delectus minima iusto odit harum voluptatem, ea facere a facilis commodi laudantium autem. Aspernatur deleniti recusandae et quis possimus ea fugit magnam, veniam accusamus totam fugiat. Quasi modi itaq..

media query : 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS 기능 (반응형 디자인의 핵심 기능) 사용법: @media 선언 후 ()소괄호 안에 스크린 조건을 적습니다. {}중괄호 안에는 해당 스크린 조건을 만족할 때 적용할 엘리먼트와 적용시킬 CSS를 기입합니다. (max-width) 최대 / 즉, 최대치보다 이하일 경우 (min-width) 최소/ 즉, 최소치보다 이상일 경우 ※미디어 쿼리를 작성할 때, 스크린의 크기가 작은 것이 아래로 오게 작성해야 합니다. Cascading개념을 유념하고 큰 범위가 아래로 오지 않도록 주의하면서 작성하도록 합니다. ~500px : red 501~600px : green 601px~ : blue 또한 브라우저에서 F12(검사)를 해서 반응형..