분류 전체보기 188

Section1 / Unit5 : JS 반복문 & 함수

코드스테이츠 8일차! 반복문 코플릿 푸는데 정말 머리가 아찔했다 getMaxNumberFromString 문제 숫자 문자열을 입력받아 문자열을 구성하는 각 숫자 중 가장 큰 수를 나타내는 숫자를 리턴해야 합니다. 입력 인자 1 : str string 타입의 숫자 문자열 출력 string 타입을 리턴해야 합니다. 주의 사항 반복문(for)문을 사용해야 합니다. str.split 사용은 금지됩니다. 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다. 입출력 예시 let output = getMaxNumberFromString('53862'); console.log(output); // --> '8' output = getMaxNumberFromString('4321'); console.log(output);..

Section1 / Unit5 : JS 조건문

코드스테이츠 수업 7일차! JS 조건문을 배웠고 조건문 코플릿을 풀어보았다. 어찌저찌 다 풀긴했지만 참조를 활용하여 다른 방식도 익혀보는 게 좋겠다. converScoreToGradeWithPlusAndMinus 문제 점수를 입력받아 점수에 해당하는 등급을 리턴해야 합니다. 출력 string 타입을 리턴해야 합니다. 각 등급의 최저 점수는 아래와 같습니다. ('F'의 경우 최대 점수를 표기) 90 이상 --> 'A' 80 이상 --> 'B' 70 이상 --> 'C' 60 이상 --> 'D' 60 미만 --> 'F' 주의 사항 만약 주어진 점수가 100을 초과하거나 0 미만인 경우, 문자열 'INVALID SCORE'를 리턴해야 합니다. 각 등급의 최고 점수보다 7점 이하인 경우, 등급과 함께 '-'를 리..

Section1 / Unit5 : JS

코드스테이츠 수업 6일 차! JavaScript 시작! JavaScript 코드 실행하기 *HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동 *Node.js라는 JavaScript 런타임을 컴퓨터에 설치 *StackBlitz에서 JavaScript 코드를 실행 ->index.js파일에 원하는 JavaScript 코드를 작성하고, Terminal에 node index.js 입력 후 엔터 ->작성한 코드가 실행되고 출력 결과 확인 가능 ->Terminal에 node를 입력하면 REPL 사용 가능 ->REPL 종료하려면 .exit 입력 REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간..

Section1 / Unit4 : 복습&계산기 목업 만들기

코드스테이츠 수업 5일차! 첫 페어 과제로 계산기를 만들었다. 기본 지식을 배우는 것이랑 그것을 활용하는 것은 확실히 큰 차이가 있었다. 만들면서 찾은 필요했던 속성 *버튼 기본 세팅 초기화 하는 방법 -> button{all:unset} *:hover 에 ::after을 추가해서 content를 추가할 수도 있었다(마우스를 올리면 글자가 뜨게) *불투명도 조절 -> {opacity: ;} (0~1)로 조절 *그림자 넣는 방법 -> box-shadow (text-shadow 사용하면 글자에 그림자를 넣을 수 있다) 아직 지식이 부족해서 페어한테 많은 도움을 받았고 지식 쌓는데에 큰 도움이 되었다. 여러 수강생들의 작업물을 보면서 처음 보는 속성들이 있어서 메모해둔다. *gap 간격 조절 -> margin..

Section1 / Unit4 : HTML/CSS활용

코드스테이츠 수업4일차! 오늘 배운 내용을 복습해보자 와이어프레임 *웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 *단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 *레이아웃과 제품의 구조를 보여주는 용도 와이어프레임의 목적 *화면의 영역을 구분 *와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추 가능 display: flex *부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법 *Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정 가능 부모 요소에 적용해야하는 Flexbox 속성들 *flex-direction ->정렬 축 정하기(기본적으로 가로 정렬) *flex-wrap ->줄 바꿈 설정하기(기본적으..

Section1 / Unit3 : CSS

코드스테이츠 수업 3일차! 오늘 배운 CSS내용을 복습해보자 CSS의 사용 목적 CSS는 심미적인 화려함 뿐 아니라, 더 나은 사용자 경험(UX, user experience)을 주기 위한 콘텐츠 배치와 타이포그래피 등을 적용하기 위해 사용 CSS의 기본 문법과 구조 CSS를 HTML에 적용하는 방법 태그 안에서 href 속성을 통해 파일을 연결 /*예시*/ 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가합니다. href 속성에는 파일의 위치를 추가해야 합니다. HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유 하나에 집중하기 위해 파일이나 구간을 구분하..

Section1 / Unit2 : HTML

코드스테이츠 수업 2일 차! 오늘 배운 내용 복습을 해보자 , 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다. , , 요소가 무엇이고, 언제 사용해야 하는지 알고 있다. 요소에 type을 설정하여 다양한 종류의 요소를 활용할 수 있다. , 태그는 영역을 설정할 때 필요한 태그이다. 차이점으로는, div 태그는 영역을 한 줄 차지하고 span 태그는 컨텐츠 크기만큼 공간을 차지한다. , , 태그는 목록을 만들 때 필요한 태그이다. 태그는 순서가 필요 없는 목록을 만들 때 사용 태그는 순서가 있는 목록을 만드는 데 사용 태그는 ol과 ul의 각 항목들을 나열할 때 사용 요소 중 대표적인 것들 text : 텍스트 입력 password : 비밀번호 입력 radio : 라디오 버튼(여러 개 선택지 중 하나..

4.11 회고

코드스테이츠 첫 수업 날이었다. 앞으로의 수업 과정을 잘 해내 가기 위해 마음가짐을 굳건히 다잡고 가야겠다. 중요! 1. 목표 세우기 2. 스케줄 관리 3. 메타인지 시작과 끝의 나 자신이 변함없는 사람이었으면 좋겠다. 혹은 더 성장된 내가 되길 빈다! 아래 질문은 오늘 수업 중 공부 방향을 잡기 위해 안내된 문구였는데 생각해보고 작성해보면 좋을 것 같아서 회고에 남겨본다. 개발자가 되기 위해 새로운 도전을 시작하신 여러분은 고정형 vs 성장형 마인드셋 중 어떤 마인드셋을 가지고 계시나요? -결과부터 말하자면 성장형 마인드셋 쪽이다. 메타인지라는 단어를 오늘 처음 들어봤는데 무의식적으로 하고 있었던 내 생각들이 메타인지였던 것 같다. 평소에도 '방금 내가 이러한 생각이 들었는데, 왜 이런 생각이 들었을까..

CodeStates/회고 2023.04.11

CSS 시작

생활코딩 유튜브 참고하여 따라해보고 있다 주석 안에 있는 내용 처럼 하나하나 지정하여 색상을 바꿀 수도 있지만 태그를 활용하여 여러 개의 작동을 한 번에 바꿀 수 있다 a{ color:plum; text-decoration: none; } a블럭을 선택자 혹은 selector라고 하고 그 안에 있는 내용을 선언 혹은 declaration라고 한다. 예제로 color:red;에서 color는 속성 혹은 property, red는 값 혹은 value라고 한다. CSS 여기 style 부분은 css가 아니고 html의 속성이다. 텍스트 사이즈 조절하는 방법 font-size를 활용하여 원하는 크기로 조정 가운데 정렬하고 싶다면 text-align을 활용 [예시] 내가 봤던 페이지는 회색으로, 현재 있는 페이지..

CodeStates/HTML&CSS 2023.02.02