명왕성의 공전기록

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

몸살기운이 도졌는데, 생각보다 어렵지 않은 개념이라 다행이었다. .container p:First-of-type => class 'container' 안의 첫번째 p태그 Nth-of-type(n) Flex-wrap : wrap 자연스러운 줄갈이 Align-items 는 flex-item이 한줄일 때 우선적용 두줄 이상일 때는 align-content 사용 Flex-flow : flex-direction 과 flex-wrap을 합쳐놓은 단축 속성 Ex) flex-flow : column wrap Line-height 텍스트의 행간 설정 Letter-spacing 텍스트의 자간을 설정 Text-indent 들여쓰기 단위 절대단위 px pt(인쇄를 위한 단위) 상대단위 % em(font-size 속성값에 비례..

https://flukeout.github.io CSS diner https://flexboxfroggy.com/#ko flexfroggy Css 세 가지 적용 방식 인라인(in-line) 방식 Style 태그 이용 분리된 css파일 연결 선택자 First-child Last-child nth-child(n) = n번째에 적용 / 나누기 곱하기 빼기 가능 ex) 2n Hover = 마우스 올릴 때 css 효과부여 — Float 와 flex 레이아웃 Float(이제는 사용하지 않음) -> 반응형웹에 적합하지 않음 clear flex && grid 상황에따라 혼용 — Justify-contents : 중심축 방향 정렬 Align-items : 중심축 반대 방향 정렬 Align-items 는 flex-item..

베이스캠프 5일차 ​ 어제 의문을 가졌던 부분에 이어, timer.js에 새로운 기능을 추가했다 let isStarted = false; const auth = () => { if(isStarted === false){ // 타이머가 작동 중이 아닐 때 isStarted = true // document.getElementById("complete").disabled = false // document.getElementById("") // const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0") // document.getElementById("target").innerText = token // document.getElement..

오늘 작성한 코드에 대해 복습하며, 버튼을 누르다가 이상한 점을 발견했다 버튼을 연타하면, 누른 횟수만큼 추가적으로 1초씩 빨리 진행된다는 것 interval 을 실행시키기만 하고, 멈추는 코드가 없으니 당연한 것이기도 했다 const auth = () => { const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0") document.getElementById("target").innerText = token document.getElementById("target").style.color = "#" + token let time = 180 setInterval(() => { if(time>=0){ let min = Math.floo..

베이스 캠프 4일차 ​ 함수 function 함수이름(매개변수) { 함수를 호출했을 때 실행할 명령문 } ​ console.log = 개발자 도구에서 확인 / 데이터 반환 작동 X return = 결과값 반환 ​ 함수 작성 방법 함수 선언식 함수 표현식 화살표 함수 ​ let friend = "김코딩" // 함수 선언식 function hello(name) { alert(name + "님 안녕하세요.") } console.log(hello(friend)) // 함수 표현식 const hi = function(name) { alert(name + "님 안녕하세요.") } console.log(hi(friend)) const greeting = (name) => { alert(name + "님 안녕하세요."..

데이터 타입과 연산자 ​ 산술 연산자 % = 나머지 ​ 숫자와 문자열을 합치면 문자열로 전체가 변경되니 주의해야 함 ex) 1+2+3+"4" = "1234" ​ 비교 연산자​ 1. 엄격한 동치 연산자 데이터 타입과 값까지 같아야 True === 같음 !== 같지 않음 ​ 2. 느슨한 동치 연산자 타입 비교 없이 값만 같으면 True == 같음 != 같지 않음 ​ 3. 논리 연산자 && 양쪽 모두 true 여야 true 반환 || 한쪽만 true여도 true 반환 ! Boolean을 반전시킴 / ex) !false => true ​ 조건문 조건을 만족하면 실행시켜줌, 비교연산자와 함께 쓰임 ​ 거짓같은 값 주의 ex) 0의 경우는 if문 조건에 대입 시 false로 나옴 ​ if문 활용 예제 const p..

자바스크립트 변수 - 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 값 상수 - 변하지 않는 일정한 값 Let - 데이터 수정 가능, 재선언 불가 Const - 데이터 수정 불가, 재선언 불가 // 선언 let name // 할당 name = "홍길동" // 재할당 name = "김코딩" // 재선언 불가 let = name = "김코딩" / const name = "홍길동" // 재할당 불가 name = "스티브 잡스" 배열로 한번에 담을 수 있음 / 쉼표로 구분 종류는 빈 배열 / 숫자 / 문자열 인덱스는 0부터 시작함 배열관련 함수 const array = ["배열"] // 배열 맨뒤에 값 추가 array.push() // 배열 마지막 값 삭제 array.pop() // 배열 요소 정렬 a..