명왕성의 공전기록

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

몸살기운이 도졌는데, 생각보다 어렵지 않은 개념이라 다행이었다. .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..