IT
-
[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] 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 💫나의 목표💫 알고리즘 실력 향상 포트폴리오 완성 자신감 및 집중력 향상 ..
-
2일차 - HTML 복습 및 자기소개 페이지 만들기IT/부트캠프 2023. 4. 12. 13:47
코드스테이츠 FE 45기 1일차 블로깅은 개인적인 이유로 하지 못하고 2일차부터 작성한다. 1일차 1일차에서 학습한 내용을 간단하게 요약해보자면, 페어 프로그래밍과 의사코드, 그리고 각종 학습을 위한 도구들에 대해 학습했다. zep은 처음 써 보는 사이트인데 게더타운과 비슷한 메타버스 플랫폼이라서 금방 익숙해졌다. 프론트엔드 개발에 있어서는 우분투 혹은 맥os를 권장한다고 하시는데 여유가 없어서 WSL2로 개발을 계속 진행하려고 한다. (여태 큰 문제없이 개발했었다.) 실시간 세션으로 진행하는 zoom을 제외하면 자유시간이 넉넉했다. 0. VS코드 설치 이전에 개발했던 경험이 있기에 이미 설치되어 있다. Live Server를 포함한 여러가지 extension도 이미 유튜브를 통해 설치했던 경험이 있기 ..