Ted's Codding study

😁 for in과 for of의 차이를 더 이상 헤깔리지 말자! 객체의 열거 가능한 속성(프로퍼티)을 순회 1) 객체의 속성을 순회할 때 주로 사용 2) 상속된 속성도 포함하여 열거 3) 배열에도 사용할 수 있지만, 배열의 순서가 보장되지 않으므로 주의 for...in기본 구문 - for (변수 in 객체) { 반복할 코드 }const obj = { a: 1, b: 2, c: 3};for (let key in obj) { console.log(`${key}: ${obj[key]}`);}// key는 a, b, c 키를 의미하고// obj[key]는 객체의 키값을 의미함 노션으로 보고 싶다면?https://short-echidna-b16.notion.site/for-in-c689739d30bd4515b..

😁 아는 내용이었지만, 막상 활용하려고 하면 잘 못쓰던, 단락평가 간단 정리! &&와 || 논리 연산자에서 일어나는 특별한 연산 처리 방식 논리 연산의 결과를 결정하기 위해 필요한'최소한의 피연산자만을 평가'하는 방식 1) AND 연산자(&&) : 앞선 피연산자가 false로 평가될 경우,그 뒤의 피연산자는 평가 없이 바로 false를 반환2)OR 연산자(||) : 앞선 피연산자에 true가 하나라도 존재하는 경우,그 뒤의 피연산자는 평가 없이 바로 true를 반환 1) AND 연산자(&&)console.log('01.단락평가');true && false && console.log('02.출력 되지 않음'); // falseconsole.log('03.C') && true;console.log('04...

😁 스크롤바가 없는 것이 디자인에 깔끔해 보여서 간략하게 정리 해보았습니다 브라우저마다 방법이 조금씩 상이함배경에 이미지를 넣고 브라우저 크기를 전체로 키우고스크롤바는 없지만 실제로 스크롤이 구현되는 모습/* Chrome, Safari, Opera */body::-webkit-scrollbar { display: none;}/* IE, Edge */html { -ms-overflow-style: none;}/* Firefox */html { scrollbar-width: none;}홈페이지 사진들은 픽사베이의 사진들을 사용하였습니다.전체 소스 코드 테드코딩  노션으로 보고 싶다면?https://short-echidna-b16.notion.site/525a9368..

1.inline/inline-block 요소 간의 수직 정렬 (이전 글)2.테이블 셀 요소 내부의 수직 정렬 (다음 글)기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.2.테이블 셀 요소 내부의 수직 정렬vertical-align 속성을 사용하지 않은 default 값인 middle인 상태제일 왼쪽 셀에 글자가 많아지면서 자연스럽게 셀의 길이가 늘어난 상태가 되고다른 셀의 글자가 자동으로 가운데로 들어가 있음// 전체 소스 코드는 길어서 제일 아래에 첨부 자차카타 vertical-align: top; 을 하게되면, 셀 안의 글자가 위로 정렬 자차카타vertical-align: bottom; 을 하게되면, ..

1.inline/inline-block 요소 간의 수직 정렬2.테이블 셀 요소 내부의 수직 정렬 (다음 글)기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.1.inline/inline-block 요소 간의 수직 정렬 vertical-align을 적용하지 않았을 때의 default 값은 middle로 설정 되어 있다 vertical-align정렬 top을 주었을 때 정렬이 위로 올라간 것을 확인 vertical-align정렬 bottom을 주었을 때 정렬이 아래로 올라간 것을 확인 vertical-align정렬 이러한 특성을 이용하면 2의 제곱 이런 형태도 쉽게 표현 가능 22 노션으로 보고 싶다면..

😁 학습을 위해서 공부는 했지만, 개인적으로는… 잘 안 쓸 것 같습니다 (요즘 트렌드에는 맞지 않는 것 같습니다) radial-gradient() 함수 사용 중심점에서 시작하여 원형으로 색상이 전환되는 방식기본 구문radial-gradient(shape size at position, start-color, ..., last-color); 사용 디테일shape: 그라데이션의 모양 지정 (circle(원) 또는 ellipse(타원)) size: 그라데이션의 크기 지정 (예: closest-side, farthest-corner) position: 그라데이션 중심의 위치 지정 (예: center, 50% 50%)EX) background: radial-gradient(circle, yellow, purpl..