명왕성의 공전기록

잠깐 HTML, ul태그와 ol태그의 차이 ul Unordered List ol Order List 종속 태그로는 둘다 li 태그 사용 DOM(document object model) 브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체 아래처럼 나무와 비슷하게 생긴 모양 때문에 트리 구조라고 함 그리고 각각의 나뭇잎처럼 생긴 요소들은 노드라고 함 그리고 이 노드들은 객체 형태를 띔 onkeydown() 키보드가 눌릴 때마다 실행시켜줌 -- const keyCodeCheck = function () { console.log(window.event.keyCode === 13) if(window.event.keyCode === 13){ const inputValue = document.querySele..

Sprint 13 배열 안 객체를 활용하여, 원하는 값 가공하기 해당 문제는 students 라는 객체를 가지고 시작함 객체 students 는 name, korean, math, english, science 각각의 데이터를 가짐 예시 const students = [ { name: '김세준', korean: 88, math: 94, english: 78, science: 79, } stage 1 해당 학생이 가지고 있는 과목의 평균을 구하고, name / score 라는 key를 가진 객체를 도출하라. 이를 해결하기 위해, 내가 해야하는 것 for문을 활용하여 "과목 수" 구하기 각 학생들의 "성적 총합" 구하기 구한 "총합"을 과목 수로 나누어 return 하기 for문을 활용하여 "과목 수" 구하..

for문 for(정의; 조건; 증감){ 출력을 원하는 코드 } for(let = 0; i obj.property Bracket notation -> obj["property"] 객체에서 property를 호출하는 방법에 대해 다시 언급하고 넘어감 console.log(documentObj.days) console.log(documentObj["days"]) console.log(remainingObj.remainingDays) console.log(remainingObj["remainingDays"]) 완성한 for문 for(let i = 0; i

함수 사용 - 함수를 호출하는 방법, 함수 선언 종류 따로 js 파일을 생성하지 않고, 태그 내에 태그를 생성하여 작성해도 작동 가능 명령어 return 함수를 종료 / 함수를 반환하는 역할을 함 (함수 안에 갖혀 있는 것을 꺼내온다고 생각하면 편함) const sum = function () { let result = 10 + 10; return result console.log("함수 종료") } 예를 들어 위와 같은 함수를 실행시켰다고 가정한 경우, 함수는 result 값만 반환한 후에, "함수 종료"는 출력하지 않고 종료됨 함수의 선언 방식 함수 표현식 const sum = function () { let result = 10 + 10; return result } 함수 선언문 function s..

JS : 웹페이지를 동적으로 조작 const == 상수 변수 의미 / 재할당 불가, 재선언 불가 변수명은 동사로 아닌 명사로 사용하는 것이 일반적 자바스크립트 예약어는 변수명으로 사용하지 않도록 조심할 것 데이터 타입 문자열 : " " 나 ' ' 로 정의 / 숫자, 알파벳, 공백 등 모두 텍스트화 가능 숫자 : 숫자 타입 데이터는 모든 연산 가능 문자 연산 : 더하기만 가능, 다른 연산 시도시 NaN 반환 숫자 연산 : 모든 연산이 가능, 문자와 혼합 연산시 NaN 반환 배열 배열 : 여러 개의 데이터를 순서와 함께 저장하는 창고 대괄호 [] 로 생성 각각의 요소는 쉼표로 구분 요소 : 배열 안에 있는 각 데이터를 부르는 명칭 인덱스 : 배열 내 위칫값을 의미 배열 메서드 메서드 : 어떠한 기능을 가지고..

12.23 반응형 웹페이지를 만드는 것은 오늘이 처음이었기 때문에 추가적인 연습이 필요하다 생각했고, 적당히 어려우면서 좋은 사이트를 발견했다. https://www.nixon.com 닉슨 시계 홈페이지 break-point는 연습했던 홈페이지처럼 두 군데로 나누어져 있지만, 안에 포함되어 있는 컨텐츠는 꽤 많은 분량을 차지하고 있는 편이다 현재는 위와 같은 형태까지 작업했다. 해결 해야 할 부분 1. 까만 배너 - 3개의 슬라이드 메시지가 균일한 속도로 올라오게 구현하기 (현재는 2개의 슬라이드가 위아래로 움직이는 방식) 2. 까만 배너 ~ 카테고리 - 까만 배너는 fixed / 카테고리까지는 sticky로 구현하기 (까만 배너를 fixed로 설정했을 때 아래 만들어두었던 레이아웃이 망가지는 현상이 있..

그리드 이전에 배웠던 것과 같이, flex와 상황에 따라 혼용해서 사용 disflay : grid => grid container로 변함 2차원적 구조를 가지며 row와 column의 배치방향을 동시에 설정할 수 있음 gird-template-rows gird의 행의 개수 및 크기를 지정할 수 있음 gird-template-rows : 1fr 2fr 200px => 행 3개 / 간격은 1fr, 2fr fr fraction(분수)의 약자, gird-template에서 사용할 수 있는 비율 단위 repeat(a,b) b규격의 grid-template을 a개 생성 gird-template-columns : repeat(4, 1ft) === gird-template-columns : 1fr 1fr 1fr 1fr..

transform 변형, 요소 이동, 회전, 확대축소, 비틀기 등 효과 줄 수 있음 속성 값 : translate(x,y) 요소를 좌표만큼 움직일 수 있음 / translateX(x) scale(x,y) 요소를 축소 혹은 확대 skew (x-angle, y-angle) 요소를 기울임 / ex) skew(15deg, 10deg) rotate(angle) 요소를 n만큼 회전시킴 / 시계방향 기준 .target1 { transform: translate(50%, 20%); } .target2 { transform: scale(0.8, 1.2); } .target3 { transform: skew(20deg, 20deg); } .target4 { transform: rotate(-45deg); } transfo..