전체 글
-
-
[JS] 함수선언문과 함수표현식 차이IT/부트캠프 2023. 4. 20. 18:08
1. 함수선언문 function으로 함수를 선언한다. function test1 () { console.log('hello world'); } 2. 함수표현식 변수에 함수를 할당해서 표현한다. 변수에 할당하는 거라서 let으로 시작한다. let expression = function () { console.log('함수표현식'); } 3. slice 문자열의 일부를 추출하면서 새로운 문자열을 반환 예시 str.slice(beginIndex[, endIndex]) 참고문헌 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice
-
[JS] 직각삼각형인지 판단하는 알고리즘Computer Science/알고리즘 2023. 4. 19. 05:47
문제 삼각형의 세 변을 입력받아 직각삼각형(pythagorean)인지 여부를 리턴해야 합니다. 주의사항 삼각형의 각 세 변은 무작위로 입력됩니다. 자바스크립트에서 x의 제곱(x squared)을 구하는 방법은 3가지 입니다. 세 가지 방법을 모두 사용해야 합니다. arr.sort 사용은 금지됩니다. 제곱을 구할 때는 입력으로 주어지는 변수를 그대로 사용해야 합니다. 풀이 피타고라스 정리에 의하면 직각삼각형은 제일 큰 변의 제곱은 나머지 두 변의 제곱의 합과 같다. 의사코드 (pseudocode) 1. 삼각형의 세 변의 값을 side1, side2, side3로 입력 받는다. 2. 각각의 변을 제곱한 값을 구한다. 3. side1이 큰 경우, side2가 큰 경우, side3가 가장 큰 경우를 나누어서 각..
-
[JS] type, variable, 네이밍 컨벤션IT/부트캠프 2023. 4. 18. 11:50
js 실행 명령어 node (파일명).js 타입 확인하는 연산자 typeof 100; // number 문자열 길이 세는 법 console.log('안녕하세요.', length); //6 변수에 값 할당해서 구구단 출력하기 let num; // 변수 선언 num = 5; // 값의 할당 console.log(num * 1); console.log(num * 2); console.log(num * 3); console.log(num * 4); console.log(num * 5); console.log(num * 6); console.log(num * 7); console.log(num * 8); console.log(num * 9); 네이밍 컨벤션 1. 카멜 표기법 식별자 표기 시에 여러 단어가 이어지면..
-
[CSS] 기본 셀렉터, 컬러 팔레트 정리IT/부트캠프 2023. 4. 17. 10:31
기본 셀렉터 정리 문서 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index CSS reference - CSS: Cascading Style Sheets | MDN Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Al developer.moz..
-
[HTML, CSS] 아이폰 계산기 목업 작업하기IT/부트캠프 2023. 4. 14. 16:14
아이폰 계산기 목업을 html과 css만을 사용해서 만들었다! 다음은 코딩 결과 화면이다. 신경쓴 부분 1. 제일 상단 input 값에 해당 css 값 주기 클릭했을 때 테두리 없어지게, 평소에도 input 테두리가 없게 하였으며 배경과 어우러지게 배경 색을 투명으로 없애버렸다. border: none; //평소에도 테두리없게 outline: none; //클릭했을 때 테두리 없게 background: transparent; //배경 색 투명하게 2. 전체 button은 grid layout으로 작업 flexbox로 작업하다가 1열과 2,3,4열이 정렬되지 않아서 깔끔하게 정렬되도록 grid를 선택했다. 3. 0번 button은 다음 속성을 부여하여 2칸을 차지하도록 했고, grid-column: 1 /..
-
4일차 - Layout, Flexbox, vs코드 레이아웃 클론 만들기IT/부트캠프 2023. 4. 14. 13:01
블록 요소를 가로로 배치하는 것은 float, flexbox, gird 속성이 있다. 1. float 요소를 문서 위에 떠있게 만든다. float끼리 가려지는 경우, float 속성을 가진 요소들을 하나의 부모요소로 묶은 뒤 부모 요소에 overflow: hidden;을 지정하면 된다. 이를 활용해서 이전 글에서 만들었던 자기소개 페이지를 수정하였다. 기존에는 흰색 박스 3개가 하나로 뭉쳐져서 보였는데 float와 부모요소를 활용하여 분리할 수 있었다. 수정한 부분은 다음과 같다. 각 흰색 라운드형 직사각형을 box1, 2,3으로 정의하고 셋을 묶은 부모요소는 box이다. .box div { background-color: #fafafa; font-size: 15px; border-radius: 7%; ..
-
3일차 - CSS 복습 및 자기소개 페이지 디자인IT/부트캠프 2023. 4. 13. 14:55
margin은 top, right, bottom, left로 시계방향입니다. p { margin: 10px 20px 30px 40px; } 셀렉터 class 셀렉터(.)와 id 셀렉터(#) id가 있는 요소만 선택할 때는 #을 씁니다. This is the navigation section. #navigation-title { color: red; } class로 지정하는 방법은 . 을 씁니다. li { text-decoration: underline; } Home Mac iPhone iPad .menu-item { text-decoration: underline; } 자기소개 페이지 꾸미기 Hello, I'm Lee Min ju 💫나의 목표💫 알고리즘 실력 향상 포트폴리오 완성 자신감 및 집중력 향상 ..