본문 바로가기

전체 글

 (133)
(Javascript) Math.random으로 범위 정하기 일반적으로 난수를 발생시켜야 하는 경우 Math.random() 함수를 사용하여 구현을 하는 경우가 많다. Math.random은 0 ~ 1 사이의 난수를 무작위로 생성을 한다. 오늘 다룰 주제는 무작위로 생성된 난수의 범위를 지정해주는 것이다. 흔히 최소값과 최대값을 지정해서 그 사이를 범위로 갖게 만든다. Math.random외에 알아두어야 할 것이 Math.floor()다. Math.floor()는 발생된 난수의 소수점을 없애고 정수를 추출하는데 사용된다. 범위를 정하는 방법의 순서이다. 1. Math.random의 최대값을 지정한다. 2. Math.random의 최소값을 지정한다. 3. 최소값 지정시의 문제점을 해소한다. 순서로 작성을 해놓았지만 최대값과 최소값은 동시에 지정되어야 범위가 정해진다..
(CSS) 레이아웃 종류(Float, Flexbox, Grid) ※ 해당 글은 https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525을 참고하여 작성되었습니다. 레이아웃은 웹페이지에서 문자, 그림, 사진을 구성하고 배열하는 일을 말한다. HTML로 만들어진 웹페이지에 디자인 요소를 가미하여 보기 좋게 그리고 사용하기 좋게 제작하는 것을 말한다. 그래서 시각적인 효과와 사용목적을 고려하여 웹페이지에 CSS를 적용해야 한다. 웹페이지의 레이아웃은 현재까지 총 3가지가 만들어졌다. 역사적인 순서대로 보자면 아래와 같다. 1. Float-based layout 2. Flexbox-based layout 3. Grid-based layout 1. Float-based layout ..
(CSS) font-size: 62.5%, 왜 기본 페이지의 글꼴을 이렇게 정의할까? html { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif } html 페이지의 기본 font-size가 62.5%로 정의되어 있다. 대부분의 웹페이지의 기본 텍스트 크기가 16px이고 16px * 62.5% = 10px이기 때문이다. 최상위의 font-size를 10px로 지정해 놓으면 상속자들의 화면에서 텍스트 크기를 쉽게 계산할 수 있다. 1.5em은 1.5 * 10 = 15px 등 간편하게 10을 곱하게 된다. 그래서 font-size: 62.5 는 글자 비례형 레이아웃을 만들때 흔히 사용된다. 스타일을 위에서 처럼 선언을 하면 px, pt 단위를 쉽게 em 단위로 변환할 수 있다. 100px: 10em; 13pt: 13em or 15...
(CSS) @media (엣 미디어) @media (max-width: 684px) { body { font-size: 1.53rem; } } @media (max-width: 382px) { body { font-size: 1.35rem; } } CSS 파일의 내용에 @(엣 혹은 엣사인) 표시가 되어 있는 경우가 있다. 엣사인은 CSS의 선택자와 속성을 표시하는 규칙인 Rule-set과는 다른 at-Rule(엣 규칙)이다. 위의 코드의 중괄호 { } 전 부분 @media 는 Rule-set의 선택자(selector)가 아니고 식별자(identifier)이다. MDN에서 at-rule에 대한 내용은 여기에 있다. 오늘 다루는 @media는 최상위 코드나 조건부 그룹안에 중첩해서 작성할 수가 있다. 엣 미디어는 코드가 실행되는 장치가 미디어 ..
(자료구조) 분류기준[형태]-[선형구조] Stack(스택) 특징 stack은 적체, 쌓는다는 의미 / 아래에서 부터 쌓이기 때문에 빼낼 때 맨 위 부터 나온다. 나중에 들어간 자료가 처음으로 나온다. LIFO/Last In First Out 자바스크립트에서 데이터 추가 push, 제거 pop, 맨 마지막에 집어넣은 데이터 확인 peek 등의 작업을 할 수 있다. 스택은 서로 관계가 있는 여러 작업을 연달아 수행하면서 이전의 작업 내용을 저장해 둘 필요가 있을 때 널리 사용된다. 스택 구현하기 class Stack { constructor() { this.arr = []; this.index = 0; } push(item) { this.arr[this.index++] = item; } pop() { if (this.index
(자바 기본 개념) JAVA에서 클래스와 인스턴스 초창기 컴퓨터는 과학 실험이나 미사일 발사실험과 같은 모의 실험(simulation)을 목적으로 사용되었다. 그래서 과학자들은 실제 세계와 유사한 가상 세계를 컴퓨터에 구현하고자 하였고 이러한 노력 끝에 simula와 같은 새로운 종류의 프로그래밍 언어도 탄생하게 되었다. 이러한 시도는 객체지향이론의 시발이 되었다. 객체지향이론의 기본 개념은 "실제 세계는 객체로 이루어져 있으며, 발생하는 모든 사건들은 객체간의 상호작용이다."라는 것이다. 다음은 자바에서 객체와 관련한 기본 개념의 간단한 정의들이다. 차근 차근 따라가다 보면 클래스와 인스턴스에 대해 정확히 알 수 있다. 객체: 실제로 존재하는 것 클래스: 객체를 정의해 놓는 것 프로그래밍에서 객체란? 클래스에서 정의해놓은대로 메모리에 생성된 것 자바에..
프로그래머스 - 스킬체크 LV1. 별 행렬 출력하기 function makingStar(a, b) { let star = ''; for(let i = 0; i < b; i++) { for(let j = 0; j < a; j++) { star = star + '*'; } console.log(star); star = ''; } }
TIL 22일 - (JS기본기) My Shopping List JS 기본기 확인 중 문제 설명 아래 이미지처럼 상품을 추가하고 삭제할 수 있는 기능을 javascript만으로 구현해보세요. 우선 HTML 파일 handleClick 함수를 달아주어서 input 태그에 입력된 값을 에 리스팅해준다. My shopping list Enter a new item: Add item 다음은 JS function handleClick() { const myShopList = document.querySelector("ul"); const oneList = document.createElement("li"); const inputValue = document.querySelector("input").value; const input = document.querySelector("..

티스토리툴바