본문 바로가기
728x90
728x90

경일76

[문제풀이] 짱구의 마스크 소분 문제설명. 짱구가 마스크를 소분 하는 작업을 한다. 마스크를 담을수 있는 봉투에는 두가지 종류가 있는데, 하나는 5개의 마스크를, 나머지 하나는 3개의 마스크를 담을 수 있다. 총 마스크 갯수 n개가 주어졌을 때, 최소한으로 사용하는 봉투의 갯수를 return 하는 함수를 작성하라. 단, 봉투에 딱 떨어지게 담겨지지 않는 경우는 -1을 return 한다. 접근방법. 쉬울줄 알았는데 어려웠다. 우선 얼리리턴을 할 수 있는 경우를 생각해봤다. 1. n이 5의 배수인 경우 에는 n/5를 리턴하면 되고 2. n이 3보다 작거나, 4인경우에는 -1을 리턴하면 된다. 나머지의 경우는 for 문으로 5씩 빼면서 answer 에 1을 더하고, 남은 수가 3으로 나눠지면 n/3으로 나눈 값을 answer에 더해주면 되지.. 2022. 1. 3.
[Javascript]var, let, const 차이점 0. 목차 1. 개요 2. let, const 3. var 4. 결론 1. 개요 변수를 선언하는 예약어에는 var, let, const 세가지가 있다. 크게 나누자면, ES6이전 즉, ES5까지 사용되던 var 와 ES6에 새롭게 추가된 let과 const가 있다. 모든 강의와, 모든 책에서 var사용을 지양하고, let, const 사용을 권장한다. 세가지 예약어의 차이점과, var 사용을 권장하지 않는 이유에 대해 알아보자. 2. let, const 2-1. let let 은 const와 함께 ES6에서 추가된 기능이다. 변수를 선언한다는 점에선 동일하지만, 값의 재할당의 가능 여부에서 차이가 드러난다. let 으로 선언한 변수는 재할당이 가능하다. //선언&할당 let num = 1; console.. 2022. 1. 3.
[Javascript] if 조건문 0.목차 1. if 2. else 3. else if 자바스크립트의 기본 문법중 if 조건 문에 대해 알아보자. 기본 적으로 생긴 모양을 보면 if(){}; 요렇게 생겼다. 물론 아직은 생기다 말았다. 비어있는 괄호안에 들어가는 내용들은 코드가 실행될 조건과, 조건이 true를 반환할때 실행되는 코드다. if(조건){ 위의 조건이 true 일때 실행될 코드 }; 이렇게만 보면 애매한데 예제를 보면 좀더 이해가 쉽다. let eat = true; if (eat) { console.log('배불러'); } // 배불러 위의 조건으로 들어간 변수 eat은 true 이므로 배불러가 출력된다. let eat = false; if (eat) { console.log('배불러'); } 이 예제에선 eat의 값이 fa.. 2021. 12. 30.
[Javascript] 연산자 / template literal / == 과 === 0. 목차 1. 개요 2. 산술연산자 3. 연결연산자 4. 비교연산자 5. 논리연산자 1. 개요 자바스크립트의 연산자 종류는 진짜 많다. 이걸 다 통채로 외우다가는 한세월 다 보낼 지도. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators 표현식과 연산자 - JavaScript | MDN 이 장은 JavaScript의 표현식과 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 여러 가지 연산자를 설명합니다. developer.mozilla.org 한번 읽어보는 걸로 만족하고 기본적인 것만 해보자. 2. 산술연산자 사칙연산 하면 다 아는거다 더하기 빼기 나누기 곱하기 기호도 똑같이 + - / * 를.. 2021. 12. 30.
[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.
레이어팝업/모달팝업 이용해서 회원가입 창 만들기 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.
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.
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.
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.
728x90
728x90

티스토리툴바