본문 바로가기

전체 글

[JS] if 대신 사용이 가능한 연산자, 삼항 연산자란? 삼항 연산자란? 삼항 연산자는 참과 거짓에 따른 2개 이상의 조건 선택이 있을 때 하나를 선택할 수 있도록 만들어졌습니다. 주로 if문이 필요하지 않은 간단한 조건문 계산에 사용합니다. 문법 (조건) ? a : b (조건) 이 참일 때 a를 실행, 거짓일 때 b를 반환(실행)합니다. 예시 let a = 20; if(a < 15){ console.log("a가 15보다 작다!"); }else{ console.log("a가 15보다 크다!"); } // a가 15보다 크다! 이런 간단한 if문은 간단하게 삼항 연산자로 표현이 가능합니다. let a = 20; console.log("a가 15보다" + (a < 15 ? "작다!" : "크다!")); // a가 15보다 크다! 조금 더 긴 if문도 가능합니다... 더보기
[HTML, CSS] 요소를 (상하좌우)정렬하기 이번 글에서는 필자가 알고 있는 가운데 정렬중에 쓸만한 몇가지를 쓰려한다. 필자가 알고있는 정렬방식은 7가지정도가 되지만 그중에 찐따같은것은 제외하고 좀 정상적인 것으로 소개하려 한다. 필자가 생각하는 정렬은 정적으로 N(px)만큼 빼고 더하는것이 아니라 자동적으로 알아서 되는것이다. 여기서는 정렬을 하려는 요소의 상태에 따라서 어떻게 작용하는지까지 다룬다. 일단 가운데 정렬이든, 왼쪽 정렬이든, 오른쪽 정렬이든 아무튼 정렬을 다루기 전에는 필수적으로 알아야 할 요소가 한가지 있다. 대부분의 요소정렬글에서는 이러한 부분이 빠져있으며, 그냥 '이렇게하면 됨 ㅅㄱ'라는 식의 글로 끝나고 있기에 자세히 적어본다. CSS [display] 속성 모든 요소에는 display속성이 있다. 여러분들이 알고있는 dis.. 더보기
[JS] Array 관련 매소드 Array.prototype.forEach 자 행님덜 이번에는 Array관련 매소드를 설명드리도록 하겠읍니다. 이 함수들은 ES6에서 새로 추가된 것이 아닙니다. 따라서 킹터넷 갓스플로러에서도 사용하는것이 가능합니다. 선행하면 좋은 글: https://so4869.tistory.com/20 이 글을 쓰는 목적은 제가 이러한 함수들을 공부하면서 인터넷을 뒤져본 결과, 잘못된 정보도 많았고, 쓸데없는 정보도 많았습니다. 해당 검색결과는 제가 글을쓰려는 주제로 구글에다가 검색해 본 결과입니다. 벌써 이렇게 간단하게 검색만 해보아도 ES6과 관련을 지어서 글을 써 놓으신 분들이 많습니다. 하지만 여기서 설명하려는 Array.prototype.forEach Array.prototype.reduce Array.prototype.filter Array.pro.. 더보기
[CSS] CSS로 반응형 웹 만드는 방법 오늘 소개할 CSS는 미디어 쿼리 (@media)이다. 미디어 쿼리란? (@media) 화면 출력 장치 중 일부를 참조하거나, 가로 사이즈를 기준으로 기존에 작성했던 HTML 코드로도 다른 화면을 구현할 수 있게 만들어줌. CSS 작성하는 방법 @media only all and (조건) {실행} @media - 미디어 쿼리가 시작됨을 알린다. only - 미디어 쿼리를 지원하지 않는 브라우저에 대하여 특정 스타일을 적용할 수 있음. 생략하면 기본값으로 only가 들어가기 때문에 주로 생략한다. not으로 부정할수도 있다. all - 미디어 쿼리를 실행시킬 미디어 타입을 정해준다. (screen, tv, print, speech, all) 생략하면 기본값으로 all이 들어간다. 주로 screen을 사용한.. 더보기
[JS] 화살표 함수 Arrow Function 이 함수는 아쉽게도 모든 웹개발자들에게 사랑받는 킹터넷 갓스플로러에서는 사용이 불가하다. 정말정말아쉽다. 기본문법 일단 기본적으로 일반 함수와의 용법의 차이를 살펴보면 이렇다. function testFunc(arg = 'aaaa'){ console.log(arg); } let testFunc = function(arg = 'aaaa'){ console.log(arg); } let testFunc = (arg = 'aaaa') => { console.log(arg); } 이렇게 텍스트로 살펴만 보면 형식의 차이일뿐 별다른 차이는 보이지 않는다. 이런식으로 기존 함수형태와 같이 기본값을 정해 줄 수도 있다. 물론 전개식도 사용이 가능하다. let testFunc = arg => console.log(arg.. 더보기
[JS] ES6 구조분해할당 배열, 객체의 값을 각각의 변수에 담을 수 있다. ES6이라 킹터넷 갓스플로러는 안됨. 사실 익스는 ES5코드도 실행하는데 장애가 있다. let a, b; [a, b] = [10, 20]; console.log(a, b); // 10, 20 이렇게 변수를 교환할 수 있다. let a, b, arr; [a, b, ...arr] = [0, 1, 2, 3, 4, 5]; console.log(a, b, arr); // 0, 1, [2, 3, 4, 5 이렇게 전개식을 사용할수도있다. let a, b; {a, b} = {b: 123, a: 456} console.log(a, b); // 456, 123 Object도 ㅆㄱㄴ Object는 Key값에 의해 매칭된다. let a, b, obj; {a, b, ...obj.. 더보기

티스토리툴바