본문 바로가기
728x90
728x90

분류 전체보기191

[Javascript] 변수의 선언과 할당 0.목차 1. 개요 2. 변수 선언 / 할당 3. 데이터의 타입 0. 개요 드디어 자바스크립트다. 보고싶었다구... 수업에서 다룬내용을 토대로 내가 아는 지식 + 검색내용들을 토대로 정리할 생각이다. 1. 변수 선언 / 변수 할당 1-1. 변수선언 Javascript 에서 변수를 선언 하기 위해선 지정된 예약어를 사용해야한다  예약어 : 프로그래밍 언어에서 문법적인 용도로 이미 사용하기로 약속 되어있는 단어 변수를 선언할 때, 사용할 수 있는 예약어는 var, let, const 가 있다. 이 세가지의 차이점은 다음에 자세히 다루기로하고 오늘은 수업에서 사용한 let만 사용하기로 한다. let number; 변수를 선언할때는 규칙이 있다. 변수의 시작은 숫자로 할 수 없다. 예약어는 변수로 사용할 수 .. 2021. 12. 30.
16진수/ 아스키코드/ 유니코드 0.목차 1. 개요 2. 2진법 3. 그래서 왜 16진법 4. 컴퓨터가 텍스트를 출력하는 방법 1. 개요 16진법 사실 일상생활에서 쓰일 일은 거의 없다. 아니 그냥 없다. 실제로 나도 살면서 한번도 안써봤으니까. 하지만 이쪽 분야에 공부를 하고 일을 한다면 16진법 한번쯤은 들어봤을지도. 그렇다면 결국 16진법은 컴퓨터와 관련돼서 생겨난 개념일거다. 2. 2진법 우선 2진법에 대해 알아보자. 컴퓨터는 굉장히 똑똑한거 처럼 보이지만, 실제로 얘가 아는거는 0과 1 밖에 없다. 모든 데이터를 0 과 1 로 처리하고 0 과 1을 이용해 동작한다. 2 진법에서 하나의 자릿수는 bit 로 표현 할 수 있다. 즉, 0 도 1bit, 1도 1bit 다. 1bit 는 0 또는 1 두개의 데이터를 표현할 수 있다. 2.. 2021. 12. 30.
하나투어 게시판 클론코딩/ table 완전정복 오늘 수업에서 배운 내용을 토대로 하나투어의 게시판이 있는 페이지를 클론 코딩 해보았다. https://kong-dev.tistory.com/99 페이지 이동 원리/form 태그 사용 0. 목차 1.복습 2. 페이지 이동원리 3. form 태그 4. submit 1.복습 table, tr, td 를 이용하면 표를 만들 수 있는데, 주로 게시판을 만들 때 사용된다. See the Pen Untitled by donghunlee (@dev_kong_dh) on Co.. kong-dev.tistory.com 기존에 작업 하나투어 메인페이지를 클론코딩 하고 있었기 때문에, 위의 헤더는 고대로 갖다 붙였다. 이 페이지를 따라 만들면서 새롭게 알게 된 것들을 정리 해보려고 한다. 1. table, thead, tb.. 2021. 12. 30.
페이지 이동 원리/form 태그 사용 0. 목차 1.복습 2. 페이지 이동원리 3. form 태그 4. submit 1.복습 table, tr, td 를 이용하면 표를 만들 수 있는데, 주로 게시판을 만들 때 사용된다. See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen. 2. 페이지 이동 원리 새로운 주소( href에 할당 해놓은 값)로 이동한다. 주소창의 주소는 서버에 저장되어 있는 경로를 나타낸다. 눈으로 보기에는 페이지를 이동해도 변하지 않는 부분들이 있어서, 변하는 부분만 변경 되는 것처럼 보일 수 있지만, 우리 눈에 고정된것 처럼 보이는 부분들은 이동전 html 과 이동 후 html에 공통적으로 작성된 부분이다. 로고 번호 제목 작성자 작성일 조회수 1 안녕하세요 web77.. 2021. 12. 29.
모의고사 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작.. 2021. 12. 28.
레이어팝업/모달팝업 이용해서 회원가입 창 만들기 0. 목차 1. box-shadow 2. input 속성 3. 레이어팝업/ 모달팝업 이용해 회원가입 창 만들기. 1. box-shadow box-shadow 속성을 이용하면 div 영역에 그림자를 만들 수 있다. 작동원리는 선택된 영역과 같은 사이즈의 영역을 생성하고, 생성된 영역은 선택된 영역의 z축 아래에 위치하게 된다. 그리고 입력된 값을 이용해 X축 이동, Y축 이동, 번짐정도, 색상을 지정해줄수 있다. See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen. 코드를 보면 box-shadow에 총 4가지의 값이 입력된 것을 확인할 수 있다. 첫번째 값은 X축 이동, 양수는 오른쪽으로 음수는 왼쪽으로 이동한다. 두번째 값은 Y축 이동, 양수는 아.. 2021. 12. 28.
햄버거 메뉴 만들기 0. 목차 1. 복습 2. 선택자 3. display:none 4. cursor:pointer 5. transform 6.transition 7. 햄버거 메뉴 만들기 1. 복습 input의 타입을 checkbox로 지정해주고 id를 지정해준 뒤에 label 엘리먼트의 for 속성에 input의 id를 지정 해주면, label의 텍스트컨텐트를 클릭해도 체크박스에 체크가 되는 것을 확인할 수 있다. See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen. 2. 선택자 tag 선택자 id 선택자 class 선택자 이외에도 다양한 선택자들이 있다. 2-1. 속성선택자 '[]' 를 이용해 엘리먼트에 부여된 속성을 통해서도 CSS선택자를 지정할 수 있다. See.. 2021. 12. 27.
html, css 클론코딩 0.목차 복습 경일 사이트 main content 클론코딩 1.복습 어제 한거 다시 만들어 보면서 hover를 배웠다. 1-1. hover 영어 단어 뜻을 찾아보니 이렇다. 커서가 해당영역의 공중을 맴돌 때 지정되는 스타일을 정할 수 있는 선택자로 생각하면 될듯하다. #visual > #visual_menu > ul > li > a:hover { background-color: black; opacity: 1; } 이렇게 스타일을 지정해주면 마우스가 올라가 있을 때 저렇게 스타일이 변한다. 2. 경일사이트 main content 클론코딩 돌아온 클론코딩 이부분 중에서 저 박스 6개 부분만 만들 거다. 2-1. 마크업 Game Architecture 게임기획 게임기획자를 위한 정석 Class 바로가기 6개.. 2021. 12. 23.
소수 만들기 https://programmers.co.kr/learn/courses/30/lessons/12977/solution_groups?language=javascript&type=my 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 자바스크립트 마려워서 쉬운거 하나 풀어봄 문제 설명 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세.. 2021. 12. 23.
block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 0. 목차 block, inline, inline-block 자식 element 만들기 경일아카데미 사이트 상단부 클론 1. block, inline, inline-block display 프로퍼티 에서 사용 할 수 있는 속성중 block 과 inline, inline-block 에 대해 알아보자. 1-1. block block은 한 영역을 차지하는 박스형태를 가진다. 그렇기 때문에 기본적으로 width는 100%로 설정된다. width와 height 를 지정할 수 있으며, margin과 padding 도 지정할 수 있다. width를 지정해도 남은 영역을 모두 차지 한다. 1-2. inline inline은 기본적으로 컨텐츠가 존재하는 영역만 차지한다. 그러므로 width와 height를 지정할 수 없.. 2021. 12. 22.
211221 TIL 😎 오늘 한 일 ✅ 문제풀기 ✅ 드림코딩 엘리센세 당근게임 만들기 클론코딩 ✅경일아카데미 HTML CSS 🤔 해야할 일 ✍엘리센세 실전 당근 게임 클론코딩 ✍인프런 문제풀기 💭 하루 리뷰 보옥잡 2021. 12. 22.
HTML 기초 / CSS기초 0.목차 1.HTML 기초 1-1. ! 1-2. id와 class 1-3. table element 2.CSS 기초 2-1. CSS 사용하는 이유 2-2. CSS특징 2-3. CSS 적용 방법 2-3-1. 인라인방식 2-3-2. head영역에 style추가 2-3-3. link를 이용해 외부파일 연결 2-4. CSS선택자 2-5. CSS 주요 속성 2-5-1. backgruoud-color 2-5-2. width 와 height 2-5-3. margin 2-5-4. padding 1.HTML기초 어제에 이어서 HTML기본 사용법에대해 공부했다. 1-1. ! html 문서를 생성하고 기본적으로 사용되어지는 형식을 '!' 로 간단하게 생성할 수 있다. '!' 를 입력하고 return 을 누르면 자동으로 생성.. 2021. 12. 21.
4-5 k번째 큰수 문제설명 중복된 숫자가 있을수도 있는 N장의 카드에서 무작위로 3장을 뽑아 더한 모든 경우의 값을 구하고 그중에서 k번째로 큰 수를 구해라. 예를 들어 k 가 3이고, 3장을 더한 모든 경우의 값이 [10, 10, 11, 11, 12, 12, 13] 인 경우 k번째로 큰 수는 12 이다. const numList = [13, 15, 34, 23, 45, 65, 33, 11, 26, 42]; const k = 3; numList는 카드의 목록이다. 접근방법 4챕터 막문제라 엄청 어려울줄 알았는데 생각보다 쉽게 풀었다. 3중 for문 돌리면서, 중복되는 경우 제외 해주면서 싹다 더해준 뒤에 배열하나에 중복되는 값 거르면서 때려넣고, 내림차순 정리한다음에 k-1번 index의 값을 출력하면 된다. functi.. 2021. 12. 20.
4-4 졸업선물 문제설명 학생들에게 졸업선물을 해주기 위해 갖고 학생들에게 직접 갖고 싶은물건의 가격과 배송비를 알아오라고 했다. 선생님에겐 한정된 예산과, 물건값의 50%를 할인해주는 쿠폰이 있다. 단, 50% 할인 쿠폰은 물건값만 할인되고, 배송비는 할인 되지 않는다. 선생님의 한정된 예산으로 졸업선물을 사줄 수 있는 최대학생수를 구해라. const budget = 28; const arr = [ [6, 6], [2, 2], [4, 3], [4, 5], [10, 3], ]; budget 은 예산을 나타내고 학생수는 arr.length 이다. arr[n][0]은 물건의 가격을 arr[n][1]은 물건의 배송비를 나타낸다. 접근방법 30분동안 그림도 그리고 손코딩도 해보고 이거저거 다해봤는데 감이 안잡혀서, 결국 풀이 .. 2021. 12. 20.
4-3 멘토링 문제설명 n번의 테스틀 거쳐서, 멘토와 멘티를 정하려고 한다. 멘토는 모든 시험에서 멘티보다 등수가 높아야한다. n번의 테스트결과가 주어지면 멘토와 멘티가 정해지는 경우는 몇 가지 인지 출력해라. const arr = [ [3, 4, 1, 2], [4, 3, 2, 1], [3, 1, 4, 2], ]; console.log(solution(arr)) 위의 경우에서 첫번째 테스트 결과는 3번학생이 1등, 4번학생이 2등, 1번학생이 3등, 2번학생이 4등이다. 접근방법 for문을 여러번 돌려야 겠다는 건 대충 직감적으로 왔다. 하나하나 다 비교를 하기 위해, 무려 4중 for문을 이용해 i번 학생과 j번 학생을 지정하고 i의 k번째 테스트의 등수(s)를 grade1 에 할당하고 j의 k번째 테스트의 등수(s.. 2021. 12. 20.
HTML 주요 element input 내용 많아서 따로 정리함. 1. input 기본 적으로 텍스트를 입력할 수 있는 입력창을 랜더링한다. 특징으로는 닫는 태그 따로 없이 단일 element로 실행된다. 랜더링된 입력창에 텍스트를 입력할 수 있다. 1.1 input 의 속성 value input의 속성 중 하나인 value를 이용하면, 페이지가 로드 될 때 기본적으로 입력창에 입력되는 텍스트를 지정할 수 있다. 페이지가 로드 되면 기본적으로 value의 값이 입력되어 있다. 1.2 input의 속성 placeholder 입력창에 아무런 텍스트도 입력 되어지지 않았을 때 표기될 텍스트를 지정할 수 있다. value 와 역할이 비슷해 보이지만 엄염히 다르다. placeholder는 주로 입력창에 입력되어야 할 내용에 대한 설명을 표기한다. 2... 2021. 12. 20.
HTML 주요 element 1편 HTML 문서 작성에 자주 이용되는 주요 element 정리한거. body 영역에서 사용되어 지며, 다양한 element를 이용하여 웹페이지을 만들 수 있음. 1. h 주로 제목을 작성할 때 이용하며, h1 부터 h6까지 있다. 각각 font-size가 지정 되어있는데, h1이 가장 크고 h6이 가장 작다. Hello, World! Hello, World! Hello, World! Hello, World! Hello, World! Hello, World! 2.ul , li 얘네는 한쌍으로 같이 움직인다. li 영역에 표기된 텍스트가 리스트 형식으로 랜더링 된다. li element는 무조건 ul element의 자식 element로 사용된다. 리스트1 리스트2 리스트3 리스트4 3.a a element .. 2021. 12. 20.
HTML 이란 1. HTML이란 Hyper Text Markup Language의 약자로 웹페이지가 어떻게 구조화 되어있는지 브라우저에게 알려주는 마크업 언어이다. 2.HTML의 특징 2.1 를 사용하여 표기한다. 2.2 를 이용해서 열고 를 이용해서 닫는다. 2.3 안의 내용은 ...element라고 읽는다. 2.4 필수적으로 head element와 body element를 포함한다. 2.4.1 head element head element에 속해있는 자식 element 들은 랜더링 되지 않는다. title element에 속한 텍스트 노드는 브라우저의 탭에 표기된다. Hello, world! 2.4.2 body element body에 담겨있는 내용은 브라우저에 랜더링 되며, html문서의 모든 콘텐츠가 담겨있는.. 2021. 12. 20.
소수판별하기 이거 소수판별이라고면 치면 나오는 내용이긴한데 한번 정리해두면 안까먹을거 같아서 정리해보려한다. 어떤 숫자가 소수인지 아닌지 판별을 할때는 2부터 그 숫자-1까지 하나하나 나누면서 조져보는 방법과 2부터 그 숫자의 제곱근 까지 하나하나 나누면서 조지는 방법이 있다. 코드로 보면 function checkPrime(number) { if(number === 1)return false; if(number === 2)return true for(let i = 2; i 2021. 12. 14.
4-2 뒤집은 소수 숫자들이 담긴 배열이 입력되면 각 숫자들을 뒤집고, 뒤집은 숫자가 소수인지 확인한 후 소수이면 출력한다. 단 예를 들어 200 뒤집어서 002 가 되는 경우 2로 출력한다. const arr = [32, 55, 62, 20, 250, 370, 200, 30, 100]; console.log(solution(arr)); 예제를 보면 이해가 쉽다 32를 뒤집어서 23 23은 소수이므로 23 출력 이 예제가 입력되면 출력되는 수는 23, 2, 73, 2, 3 이다. function solution(arr) { const answer = []; for (const num of arr) { let cnt = 0; const changedNum = Number(num.toString().split('').rever.. 2021. 12. 14.
728x90
728x90