명왕성의 공전기록

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..

Cascading CSS 우선순위 적용원리 중요도 2, 구체성 (명시도) / 상속 < 전체 < 태그 < Class,가상 < ID / !important 강제로 명시도 끌어올리기 (거의 안씀) 선언 순서 배경 그라데이션 - Background-image:linear-gradient(방향(to left), 시작색상, 종료색상) Background-position 위치 지정 가능 Background-repeat 반복 / no-repeat Backgorund-size 크기 지정 / cover 늘임 / contain 늘리되, 잘리지 않음 Background-attachment 백그라운드 단축 속성 (순서 중요) Background : color image repeat position/size attachment ..