공부 기록일지📚

목차 객체에 접근하는 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(검사)를 해서 반응형..

성배 레이아웃은 사람들이 성배를 찾기 위해 노력하지만 못찾은 것처럼 완벽한 레이아웃만들기에 비유해서 만들어진 말입니다. 위와 같은 레이아웃을 비유적으로 성배 레이아웃이라 하는데 이 모양을 만들어내는데 flex를 사용하면 간편하게 달성할 수 있습니다. 생활코딩 html css javascript AD 홈페이지 ->main에 있는 lorem1000 부분은 양이 너무 많아서 주석 처리 해놨습니다. main 내부에 content를 랜덤으로된 1000글자를 주면 성배 레이아웃의 모습을 제대로 볼 수 있습니다. Properties for the flex container flex-direction row /*기본값*/ row-reverse column column-reverse flex-direction row /..

flex - 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구, 레이아웃을 효과적으로 표현 가능 부여되는 속성을 나타낸 차트▼ Container item display order flex-direction /*기본값: row 행의 방향 column 수직*/ flex-grow /*기본값 0*/ flex-wrap flex-shrink flex-flow flex-basis justify-content flex align-items align-self align-content container에 height를 지정해주어야 flex의 효과를 제대로 알 수 있습니다. item관련 flex속성 flex-basis flex의 방향에 해당되는 엘리먼트의 기본크기를 설정하는 속성, row 면 가로폭 , column이면 세로폭..

참고 사이트: https://uipac.com/451 CSS 네이밍 규칙 네이밍 규칙 공통 규칙 공통 네이밍 규칙 예 잘못된 예 올바른 예 설명 Tit_pop.html *-hidden-obj 03_btn_more.gif tit-section 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외) c. uipac.com simple ver https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kty4523&logNo=221586270676 [작업가이드] 파일,CSS 네이밍 규칙 공통규칙 - 이름은 영문 소문자로만 시작할 수 있다. - '형태_의미_상태' 순서로 조합하며, 3단... blog.naver.com ht..

https://home.openweathermap.org/ Members Enter your email address and we will send you a link to reset your password. home.openweathermap.org 1. 회원가입 -> 이메일 확인 -> 로그인 2. 로그인 화면에서 API 클릭 3. API 중에서 내가 필요로 하는 API 쓰기 4. API 적용하기(여러 방법이 있습니다.) (이 경우에는 아래의 URL에 알고 싶은 위치의 latitude 값과 longitude값 그리고 내 API 키를 넣어주면 됩니다. //주황색으로 표기되어 있는 부분, {} 중괄호 내부에 쓰는게 아니라 주황색 부분을 아예 대체하시면 됩니다.) 결과물이 아래와 같은 식으로 뜰텐데 chr..