본문 바로가기

2. 우당탕탕 개발자/2-1. 공부기록92

2020.10.12 TIL CSS 루트에 변수 지정하여 여러번 활용하기 :root { --main-color : #0000000 } p { background-color : var(--main-color) } var(--변수명) 이런 식으로 루트에 메인 컬러를 변수로 지정하고 사용할 수 있다. transition transition 은 state (:active, :hover ...)에 따라 property가 달라질 때 사용한다. transition 은 state가 아니라 root 가 되는 element 에 있어야 한다. a { background-color : tomato; color : wheat; transition : all 5s ease-in-out //배경과 글자 모두 변화 } a:hover { background-co.. 2020. 10. 12.
2020.10.08 TIL CSS 부모개체에 position : relative 정의를 해줘야, 자식 객체에 position: absolute 하고, relative 한 부모개체를 기준으로 움직이게 된다. pseudo selector : div 중 첫번째 / 마지막 / 2n / ... 기타 등등 개체에 css를 적용하고 싶을때, class나 id를 사용하는 것보다 나을 수 있다. 고양이는 귀엽다고양이 개 고양이만 기울림 효과를 주고 싶다면, p span { font-style: italic } 이라고 하면 된다. div 바로 직속 자녀 개체인 개에만 해당 효과를 주고 싶다면 div > span { font-style: italic }이라고 하면 된다. p 바로 다음 인 개체일 떈 p + span { font-style: itali.. 2020. 10. 8.
2020.10.06 TIL 사이드 프로젝트를 진행하며 클라이언트 중 CSS 부분이 약하다고 생각했다. CSS의 레이아웃을 정렬하는데 많은 시간이 걸렸고, 흥미를 잃기 좋은 핑계가 되었다. 이러다 코딩이 값비싼 취미 활동으로 전락할까봐 마음을 다잡고, 노마드 코더의 카카오톡 클로닝인 '코코아톡 클로닝' 강의를 듣기로 했다. 기존에 아는 내용도 있지만, 시간에 쫓겨 허겁지겁 대충 훑어 보았던 mdn도 강사와 함께 살펴보며 다시금 기초를 착실히 쌓기로 한다. 당분간 지지부진하게 진도 안나가는 사이드 프로젝트는 접어 두고, 코코아톡 클로닝부터 듣고 따라해본다. margin collapse 현상 (출처 : 블로그) : 형제/부모 요소들이 내 코드를 무시하고, 여백이 지멋대로 조정되곤했는데 이런 현상이 있는 줄 처음 알게 되었다. inlin.. 2020. 10. 7.
2020.09.01 - 2020.09.07 TIL 사이드 프로젝트로 만드는 재고/주문 프로그램에 클라이언트 로직때문에 지난 일주일 내내 머리가 터지는 줄 알았다. 일단, 전제는 유저의 더 나은 경험을 위해서(보통 한 물건만 주문하진 않으니까) 여러 물건을 한 번에 주문할 수 있어야 한다는 것이다. 한 물건 주문서 넣고, 또 다른 물건 주문서를 넣는 건 유저로서 유쾌/불쾌한 경험을 떠나 귀찮음의 문제기 때문이다. 더구나 유저가 베트남 사람임을 고려한다면.. 한 번에 주문서를 넣도록 하는 것이 나의 일을 한 개라도 줄일 수 있는 방법이다. 고민했던 몇 가지를 간단하게 적자면, 1. 총 입력 창을 한 개만 둘 것인가? 아니면 여러개를 둘 수 있도록 할 것인가? => 여러개를 두기로 한다. 이유 : 아직 완료가 된 주문이 아니기 때문에, 언제든지 유저가 주문 .. 2020. 9. 8.
2020.08.31 Best Time to Buy and Sell 풀이 문제) 숫자가 나열된 배열이 주어졌을 때, 각 원소는 그 날의 주식의 현가라고 가정하자. 최대의 이익은 얼마일까? 풀이) 예전에 풀었던 문제와 대동소이한 문제다. 풀다보니 배열의 최소/최대값의 패턴이 보이는 듯 하다. var maxProfit = function(prices) { let buy = prices[0], result = 0 for(let i = 0; i < prices.length-1; i++) { buy = Math.min(buy, prices[i]) result = Math.max(result, prices[i+1] - buy) } return result }; 2020. 8. 31.
2020.08.28 Majority Element 풀이 문제 ) 숫자의 배열이 주어질때, 과반수 이상을 차지하는 원소는 무엇인가? 풀이) 해쉬 테이블처럼 - object의 키밸류를 이용한다. 각각의 원소를 순회하며, object 에 나온 횟수를 저장한다. 횟수가 배열의 크기의 반 이상일 경우, 해당 원소를 리턴한다. var majorityElement = function(nums) { let result = {} for(let num of nums){ if(!result[num]){ result[num] = 1; } else { result[num]++; } if(result[num] >= nums.length /2){ return num } } }; 2020. 8. 28.