Til
-
CSS - 개구리 게임(2)CSS/CSS 2020. 4. 29. 10:48
Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 저기에 있는 개구리들을 연못 색깔에 알맞게 배치해야 한다. 처음에는 flex-direction: column; 속성을 이용해서 가로를 기준으로 수직 정렬을 시킨다. #pond { display: flex; flex-direction: column; } 이제 여기서, 저 개구리 무리들을 밑으로 내리기만 하면 된다. 그러면 align-items: flex-end; 속성을 적용시켜보자. #pond { display: flex; flex-direction: column; align-items: flex-end; } 하지만, 개구리 무리들이 오른쪽으로 이동되었다. 이유를 찾아보니, Flex의 방향이..
-
CSS - flex 개구리 게임(1)CSS/CSS 2020. 4. 28. 17:26
Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com flex 속성을 익히고자 Flexbox Froggy라는 게임을 했다. 1단계에서 9단계까지 순조롭게 진행되었다. 하지만, 10단계에서 막혔는데 어떤 문제였느냐..? 바로! 이 개구리들을 같은 색깔의 연못에 올려놔야 한다. 일단, flex-direction: row-reverse;로 접근했다. #pond { display: flex; flex-direction: row-reverse; } flex-direction: row-reverse; 속성으로 가로 정렬에서 역순으로 배치하기에 성공했다. 이제 이 개구리들을 옆으로 옮기기만 하면 되는데, justify-content: flex-start를..
-
CSS - 인스타 클론(1)CSS/CSS 2020. 4. 28. 16:53
보이는 사진처럼 로그인 폼을 만들었다. 하지만, 보이는 것처럼 input 태그와 button태그에 그림자가 껴있는 걸 볼 수 있다. 로그인 * { box-sizing: border-box; } body { background-color: rgba(var(--b3f, 250, 250, 250), 1); min-height: 100vh; display: flex; align-items: center; } .login-form { margin: 0 auto; display: flex; flex-direction: column; background-color: white; border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); width: 350px; height: 30..
-
CSS - flexbox 정리CSS/CSS 2020. 4. 25. 16:47
일기 및 회의록 더보기 오늘은 위코드 4일차가 되는 날이다. 계속 repl.it에서 자바스크립트 문제만 풀어나가고 있었다. 오후 3시 쯤에 html/css QnA 시간이 있어서 QnA를 들으러 위워크 8층 회의실에 들어갔다. QnA시간에 html이 무엇인가?, html, css, javascript를 하나로 표현하세요. 이런 질문들을 해주시는데 아무말도 할 수 없었다. 거기서 나는 너무 repl.it의 과제 풀기에만 급급했고, 정확한 개념을 숙지하지 못했다. html과 css에 대해 전반적으로 정리를 해주셨고, 그 중 flexbox라는 것을 설명 해주셨는데 잘 모르는 내용이라 어려웠지만 많이 쓰이는 속성들 위주로 알려주셨다. 또, 공부하는 방법이나 여러 가지 조언을 해주셔서 굉장히 좋았다. 이 QnA가 ..
-
[level1] - 정수 내림차순으로 배치하기programmers/level1 2020. 4. 7. 16:50
프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr n return 118372 873211 [ 풀이 ] 정수 118372가 담긴 n을 tostring()을 통해서 문자열로 형 변환하고, split()을 통해 문자열을 원소로 나누고, 그 원소를 또 sotr()를 이용해서 내림차순 정렬 후 join()을 통해 문자열로 다시 합친다. 그러고 나서, paseInt()를 통해 문자열을 정수로 형변환하여 출력한다. [ code ] function solution(n) { return parseInt(n.toString().split('').sort((a,b) => b-..
-
[level1] - 행렬의 덧셈programmers/level1 2020. 4. 7. 15:57
프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] [ 풀이 ] 배열 arr1과 arr2가 존재하고 , 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 되어야 한다. 우선, arr1에 map()를 이용해 [1,2], [2,3], 0, 1로 배열과 인덱스를 가져온다. 그러고 나서, 나눈 배열을 다시 map()를 이용해 한번 더 나눈다. 그러면 1 0, 2 1, 2 0, 3 1..