본문 바로가기

학원에서 배운 것85

KDT 5th 웹개발자 입문 수업 6일차 1. 전환 transition 요소의 전환(시작과 끝) 효과를 지정하는 속성, 원래 모양을 다른 모양으로 바꿀 때 사용 transition : 속성명 지속시간(필수) 타이밍함수 대기시간; 1-1. transition-property : 전환 효과를 사용할 [속성명]을 지정 - all : 모든 속성에 적용, 기본값 - 전환 효과를 사용할 특정 속성명을 정해줄 수 있음 1-2. transition-duration : 전환 효과의 [지속시간]을 지정 - 0s : 기본값(전환되는 효과가 없어보임) - 단위값 s 지정 -> 전환 시, 전환이 끝났을 때 동일하게 지속시간이 정해짐 1-3. transition-timing-function : 전환 효과의 [타이밍 함수]를 지정 - ease : 느리게 ➡️ 빠르게 ➡️.. 2023. 2. 2.
자바스크립트 맛보기 강사님이 어제 수업 중 내주신 문제를 누군가 자바스크립트로 구현했다고 한다. ㅇㅁㅇ.. 해볼 생각도 못했는데 신기했다 !! 코드 공유를 해주셔서 공부 겸 끄적여본다. const readline = require("readline"); const FAKE = 9; const REAL = 10; let sum = 0; function quiz(num) { const sack = []; // 입력받은 자루의 수인 num 에 따라 가짜 금화가 든 자루를 설정하는 랜덤 수 const rand = Math.floor(Math.random() * num) + 1; // 랜덤 수에 따라 진짜와 가짜 금화 자루 생성 for (let i = 0; i < num; i++) { i + 1 === rand ? sack.push.. 2023. 2. 2.
CSS Diner 문제 다 풀었다!! 선택자가 매번 어려웠던 나는... 강사님이 오늘 소개해주신 선택자 관련 게임을 풀었다. 19번 한 문제 막혀서 구글링 했지만.. ㅎ 약간 아리송하던 개념을 다시 볼 수 있었다. (물론 아직도 선택자는 어렵다) https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 이제 복습해야지 ........ 😂 2023. 2. 1.
KDT 5th 웹개발자 입문 수업 5일차 1. Position 요소의 위치 지정 기준 - static : 기준 없음 기준이 없으므로 top, bottom, left, right 를 사용할 수 없음! - relative : 요소 자신(상단좌측 모서리)을 기준 배치 전 자리(상단좌측 모서리를 기준으로)에서 top, bottom, left, right 로 배치를 변경해줄 수 있다. *배치 전 자리는 그대로 비어있게 되므로 기본적으로 다음 요소가 침범할 수 없다. - absolute : 위치 상 부모 요소를 기준 -> 부모의 요소의 위치를 확인해야 함 보통 부모 요소의 위치를 잡아준다음, position : relative;(static만 아니면 됨) 로 설정해두고 그 아래 자식을 position : absolute; 로 둬야 제대로 배치가 먹힌다. .. 2023. 2. 1.

티스토리툴바