Contents 1. 배경 오늘은 2022년 5월 11일입니다. 아래처럼 특정 날짜(아래에선 오늘) 이후로는 선택할 수 없도록 하는 방법을 알아보겠습니다. 왼쪽은 input 태그의 "date" type이고, 오른쪽은 input 태그의 "datetime-local" type입니다. 오른쪽에선 시간까지 설정할 수 있습니다. 2. 기초예시 1) input type="date" 오늘 이후로 선택 안되도록 See the Pen date_max_date by netsus (@netsus) on CodePen. * JavaScript 코드 설명 var now_utc = Date.now() // 지금 날짜를 밀리초로 // getTimezoneOffset()은 현재 시간과의 차이를 분 단위로 반환 var timeOff ..
Contents 1. 배경 Javascript에서 디버깅을 하는 경우, 모달 창이 뜬다거나, 추가 동작이 있는 경우, 지정한 시간 이후에 디버깅을 하고 싶은 경우가 있습니다. 이럴 때, 간단하게 쓸 수 있는 코드를 소개하겠습니다. 2. 코드 setTimeout(() => {debugger}, 3000); setTimeout은 Javascript의 내장 함수입니다. 특정 시간 이후에 코드를 실행시켜주는 역할을 합니다. 위와 같이 setTimeout(() => {debugger}, 3000); 으로 작성하면 3000ms 즉, 3초 이후에 debugger를 실행하라는 의미입니다. 3. 결론 setTimeout(() => { SOME CODE }, 3000); debugger 외에도 특정 시간 이후에 동작시키고..
웹 개발을 하다 보면, Javascript에서 debugger;를 통해 콘솔 창에서 작업을 하는 경우가 많습니다. 이때, console 창이 지저분해지는 경우가 있는데, 싹 지워버리는 방법을 알아보겠습니다. 또한, 듀얼 모니터를 사용하시는 분은 개발자 도구창을 따로 창으로 띄워서 보면 좁게 보지않아 매우 편리한데요 이 방법 역시 알아보겠습니다. Contents Console Clear 방법 1. JavaScript 사용 console.clear() 2. Windows 단축키 Ctrl + L 3. Mac 단축키 Command + K Console창 따로 띄우는 방법 윈도우라면 F12를 눌러서, Mac이라면 option + command + i를 눌러 개발자 도구를 켭니다. 위 그림의 빨간 박스 부분처럼..
Contents 1. Node.js 설치 해당 링크에서 Noje.js 설치 (https://nodejs.org/ko/download/) 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. expo cli 설치 npm install -g expo-cli 3. 프로젝트 생성 expo init {project_name} blank에서 엔터 -> Hello World 테스트 용이기 때문에 zero부터 시작하는 blank 선택. 4. expo 시작 1) expo에서 회원가입 하기 : https://expo.io/ Expo Expo is an open-source platform for..
Transition이란? Transition은 기본적으로, 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법입니다. 변화는 이동이 될 수도 있고, 크기의 변화일 수 있고, 색깔의 변화 등 무엇이든지 될 수 있습니다. 변화가 일어나려면 기본적으로 변화하기 "전"과 "후" 그리고, "언제" 변화할지가 있어야 합니다. 이때 "언제" 변화할지를 지정하는 것이 상태(State)입니다. 예를 들어, 마우스가 올라가 있는 "상태"(:hover) 일 때 변화하도록 Transition을 지정할 수 있습니다. 상태(State)에 대해선 아래 링크에서 자세히 설명하였습니다. [CSS] States (active, focus, hover, visited, focus-within) 위 그림처럼, transiti..
속성 선택자란? 모든 HTML은 태그로 이루어져 있습니다. 이 HTML을 꾸며주는 것이 CSS의 역할입니다. CSS는 HTML의 태그를 선택해서 꾸며줍니다. 이때, HTML의 속성과 속성값을 이용해서 HTML 태그를 선택하는 것이 속성선택자입니다. 속성 선택자를 사용하면 속성(attribute)을 통해 어떤 것이든 선택할 수 있게 해줍니다. 아래 예시를 통해 속성 선택자를 알아보겠습니다. 기초 사용법(예시) CSS부분의 input[type="text"] 부분이 속성 선택자입니다. See the Pen attribute_selector_base by netsus (@netsus) on CodePen. input 태그에 type 속성을 주고, 그 값을 text로 한 뒤에, 속성 선택자를 사용하여 배경색(ba..
선택자란? HTML을 구성하는 모든 것은 태그(tag)입니다. HTML 태그들이 정보를 표현하는 역할을 하는 것입니다. 그런데 HTML 태그만 있다면, 그냥 하나의 문서처럼 보일 것입니다. 웹 사이트가 보기 좋고, 예쁜 것은 CSS가 HTML을 꾸며주기 때문입니다. CSS가 HTML을 꾸미기 위해선 태그를 '선택'해야 합니다. 이 때 사용되는 것이 선택자(Selector)입니다. 선택자 종류 3개 기본적인 선택자는 크게 3종류로 태그 선택자, 클래스 선택자, ID 선택자입니다. 태그 선택자(Tag selector) HTML 태그를 선택합니다. ex) HTML의 모든 div 태그에 대해 색깔을 파란색으로 지정합니다. See the Pen zYBrGgJ by netsus (@netsus) on CodePen..
States란? 가상 선택자(Pseudo Selectors)의 상태를 의미합니다. 즉, 선택한 요소가 특정한 조건을 만족하면 가상 선택자로 지정한 상태가 됩니다. 예를 들어 :hover(가상 선택자)는 지정한 요소에 마우스를 가져가면 설정한 상태로 변화합니다. 예시와 함께 알아보겠습니다. States 종류 active: 마우스로 클릭했을 때의 상태. See the Pen states-active by netsus (@netsus) on CodePen. 위 예시를 보면 hello 버튼(button)을 클릭했을 때, 버튼의 색깔이 tomato(주황)색으로 변화하는 것을 볼 수 있습니다. hover: 마우스 커서가 대상 위에 있을 때. See the Pen states-hover by netsus (@nets..
position 이란? position은 보통 레이아웃에 사용되기보단, 위치를 아주 조금 위로, 아주 조금 오른쪽으로 옮기고 싶을 때 사용합니다. position 종류 Position 설명 static 기본값으로, width와 heigth 조절이 안됨 fixed 화면에 고정. 스크롤 변동해도 항상 그 화면의 그자리에 존재 relative 상하좌우로 요소(element)를 약간 움직일 때 사용 absolute 가장 가까운 relatvie 부모를 기준으로 위치 설정 position: static이란? position의 기본값(default)으로, 따로 position을 지정하지 않아도 적용됩니다. top, bottom, left, right를 이용해 위치를 지정할 수 없으며, 그저 왼쪽에서 오른쪽으로, 위에..
가상 선택자(Pseudo selector)란? 보통 선택자는 HTML 태그, Class, Id 등 HTML 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며줍니다. (선택자 개념: [CSS] 선택자(Selectors)와 조합(Combinators)) 하지만, 가상 선택자는 HTML요소를 직접적으로 선택하지 않고, 요소의 상태에 따라 선택하여 꾸며주는 것을 의미합니다. 가상 선택자는 가상 클래스(Pseudo class) 라고도 합니다. 기본적인 형태는 다음과 같습니다. selector:pseudo-selector { property: value; } 예시) HTML div 요소 중, 첫 번째(상태)와 마지막(상태)에 있는 div요소를 초록색으로 바꾸기 See the Pen pseudo-sele..
flexbox란? box를 원하는 아무 곳에 놓을 때 사용하는 기능입니다. 매우 유연하게 사용할 수 있기 때문에 flex라는 이름이 붙여졌습니다. 특징: 1) 자식 element에 지정하지않고, 부모 element에 지정합니다. (부모가 자식을 제어) 2) 부모 element를 flex 컨테이너로 지정해야 합니다. 즉, 부모 element의 CSS를 dixplay: flex;로 지정해야 합니다. 기초 속성 justify-content: 수평(가로)축 위치 조절 속성 (main axis) align-items: 수직(세로) 축 위치 조절 속성. (속성을 변화하여 축 회전이 가능하다.) (cross axis) justify-content (빨간색 박스가 3개 있을 때) flex-start: 기본값(defau..
display 1) inline: width와 height를 가질 수 없다. 2) inline-block: width와 height를 가질수 있고, element가 옆으로 오게한다. 단점: margin, padding을 주지않아도 요소간의 빈 공간이 자동으로 생긴다. 반응형 디자인을 반영하지 않기 때문에, 창크기가 다르면, 요소들이 다르게 보일 수 있다. 3) block: width와 height를 가질 수 있고, element가 아래로 온다.(각 요소옆에 아무것도 안온다.) b c d 결과
