내일배움캠프 세번째 걸음

1. CODEKATA 문제 

 

ⓐ 각도기 문제: 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.

 

예각 : 0 < angle < 90

직각 : angle = 90

둔각 : 90 < angle < 180

평각 : angle = 180

풀이: if 와 else if를 써서 풀어줄 수 있다.

 

★ 첫번째 tip: else와 else if의 차이점에 대해 알아보겠다. else는 마지막으로 실행될 조건이며, 이전의 모든 조건들이 만족되지 않을 때 실행된다. else if는 다른 조건을 추가적으로 체크하고, 그 조건이 만족되었을 때 실행된다.

• else문은 if문의 조건이 거짓일 경우 사용
• else if문은 새로운 조건을 추가 가능
• else if는 여러 조건을 중첩 가능
• else문의 조건에 해당하지 않을 경우 마지막에 조건을 지정 가능

 

ⓑ 두수의 나눗셈 문제: 정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요.

풀이: 정답(result)의 정수 부분을 구하려면 parseInt 또는 math.floor을 써주면 된다.

 

   Math.ceil 은 소수값이 존재할 때 값을 올림

   Math.floor 는 소수값이 존재할 때 소수값을 버림

   Math.round 는 소수값에 따라 올리거나 버리는 반올림 

 

 

 

2. 강의 내용

 

오늘은 나만의 추억앨범 페이지를 만들어 보는 시간을 가졌다. 

 

안에 있는 내용물을 새로로 정렬할꺼냐 가로로 정렬할꺼냐 display flex는 네줄만 기억하면 된다. 안에 있는 내용물을 정리할 때 유용한 코드이다. 두번째 줄 column은 내용물이 세로로 배열되고, row는 가로로 배열된다. 이것만 구분해주면 된다.

display: flex;

flex-direction: column/row;

align-items: center;

justify-content: center;

 

 

column을 사용했을 때, 내용물은 세로로 배열된다.

 

row를 사용했을 때, 내용물은 가로로 배열된다.

 

 

 

 

이제 버튼도 바꿔주어야 한다. 버튼에 또 명령어를 붙여주면 번거롭다. mytitle안에 버튼이 있기 때문에 .mytitle > button (mytitle 안에 button이 속해있다.)로 써주면 수월하다. 또 배경색이 투명해야 하니 background-color: transparent; 로 써주면 된다. 그리고 가장자리선 border: 선굵기 실선 색 이렇게 순서대로 적어주면 된다.  따라서 border: 1px solid white 이다. 

 

 

 

 

.

.

.

 

 

코드를 짜서 완성된 내 홈페이지이다. 비록 강의를 따라하면서 했지만 그럴싸해서 기분이 좋았다. 다음에는 더 퀄리티 좋은 홈페이지를 만들고 싶다는 생각이 들었다. 이렇게 홈페이지 만드는 것도 어려웠지만 오늘은 코드카타 문제도 까다로웠다. 대체적으로 머리 터지는 날이었던 것 같다. 개발은 파고들수록 새로운 사실과 공부해야 할 내용이 엄청 많다. 공부할 양은 많지만 싫다고 생각이 들지는 않는다. 하루하루 배워갈수록 내가 성장하는 기분이라서 뿌뜻한 마음뿐이다!! 이 마음을 잃지 말자고 다짐했다.

 

3. 메모

• tap키 누르면 줄이 앞으로 감.
• tap키  누르면 자동완성
• 캡쳐 단축키: shifte + command + 4
• 안에 있는 내용물 정렬: shifte + option + F