(수근수근)

[ Color ] color formats css는 색상을 표현하는 다양한 방법이 있습니다. 대부분은 16진수코드(#FFFFFF)로 사용하지만 이말고도 더 나은 옵션들이 있습니다. 만약 red컬러를 표현하고 싶다면, 아래의 네가지 표현법이 있습니다. Hex codes -#FF0000 => 가장 흔하게 사용한다. 2개씩 쪼개서 16진법으로 표현된다 Keyword - red => 문제점이 많다. (사람마다 다름) RGB - rgb(255,0,0) => hex codes랑 호환이 가능하다 HSL - hsl(0deg, 100%, 50%) HSL을 쉽게 이해하기 위해서는 아래의 그림을 보면 이해하기 쉬운데, 방향(360도)을 동해 색을 나타내고 2번째 요소에 얼마나 색을 포화시킬지 3번째는 얼마나 밝게 표현할지 ..

Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다. (영어라 잘못 해석할 수도 있다..) Selectors Selector / Pseudo-classes :hover 우리가 마우스를 버튼 위로 올렸을 때, JS로 처리한다면 어떻게 하나요? JS의 onMouseEnter / onMouseLeave의 내장함수를 사용하여 상태를 관리해야할 것입니다, 하지만 CSS를 사용한다면? Hover over me! 위 코드 처럼 : hover pseudo class를 사용하여 간단하게 구현할 수 있습니다. focus : 클릭하거나 탭했을 경우 포커스가 설정됩니다. 해당 스타일은 중요한데. 그 이유는 해당 스타일은 마우스, 터치스크린을 사용하지않는 접근성문제를 다루는데 있어서 중요하기 때문이다. 음성을 ..

Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다. (영어라 잘못 해석할 수도 있다..) 모듈1에서는 기본적으로 사용하는 CSS를 전체적으로 요약한 내용이다. 스타일 규칙 해부하기 사실 CSS용어에 대한 정리가 잘 되어있지 않은 상황이었는데 해당장에서는 아주 자세히 설명해주고 있다. property : Css에서 property는 특정한 값을 지정할 수 있는 속성이다. (like font-size) selector : selector는 페이지의 특정 타겟 요소를 설명한다. 헷갈리는 것은 선택자라는 것은 .(class), #(id)를 같이 포함해주어야한다. /*여기서 selector는 apple이 아닌 .apple이다 (어떤 요소인지 선택까지) */ .apple { background-c..

Transform 기능 - translate 요소 이동시키기 transform을 통해 요소들을 이동시킬 수 있는데, transform: translate(x.px, y.px) -> 양수는 아래, 오른쪽, 음수는 위 왼쪽으로 이동을 합니다. transform 특이한 점으로 한가지는 백분율을 사용할 때 상위 컨테이너의 공간이 아니라, 요소 자체의 크기를 나타냅니다. Transform 기능 - scale로 요소를 줄이고 늘리기 독립적으로 x, y 축을 조정할 수 있다. height와 width 와 다른 점은 상자의 모형만 변형하는 것이 아니라 요소와 하위 요소도 변경을 한다는 것이다. Transform 기능 - Rotate 로 요소 회전 시키기 요소를 회전시키는 기능이다. 단위는 deg와 turn 이 있다. ..

해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다. 🟥 Min - Max ⭐ 최소값과 최대값을 다룬다. function genRandomNumber (min, max) { return Math.floor(Math.random()*(max-min+1)) + min; } const MIN_NUMBER = 20; const MAX_NUMBET = 45; //이름만 봐도 사용의 의미를 알 수 있음. genRandomNumber(MIN_NUMBER, MAX_NUMBET) ⭐최소값 최대값 포함여부를 결정해야한다. (이상/초과) (이하/미만) function isAdult(age){ //19살 초과만 가입을 원할 때이지만, // 포함인지 아닌지 판단하기 힘들다. } 포함여부는 중요하기 때문에, 이상 초..

해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다. ⬛ 타입 검사 typeof typeof는 문자열을 반환한다. typeof '문자열' // 'string' typeof true // 'boolean' typeof undefined // 'undefined' typeof 123 // 'number' typeof Symbol() // 'symbol' 🙅‍♀️ 하지만 typeof 만으로 모든 타입을 검사하는 것은 불가능, Reference Type 불가능 자바스크립트에는 primitive와 reference 타입으로 나눌 수 있는데, 위의 typeof로 타입을 알아낼 수 있는 것들은 대부분 primitive에 속하고 Reference타입에 Array, function, date와 같은 객체들은..