본문 바로가기

STUDY66

[JavaScript] input, change 이벤트와 and, or 연산자 input 이벤트와 change 이벤트  태그에서 발생하는 input 이벤트와 change 이벤트가 있다. 안에 입력할 때 발생하는 이벤트들이다. document.getElementById('email').addEventListener('input', function(){ console.log('안녕')});▲ 에 입력된 값이 변경될 때 input 이벤트가 발생한다. 에 값을 입력할 때마다 콘솔창에 안녕이 출력된다.document.getElementById('email').addEventListener('change', function(){ console.log('안녕');});▲ 에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생한다. 에 값을 입력하고 커서를 다른 곳에.. 2024. 8. 26.
[JavaScript] <form>, 조건문(if/if else/else if) 과 기능을 만들면서 조건문을 배워 보자. 로그인하세요 전송 닫기 Bootstrap을 이용해서 모달창 안에 을 만들었다.그리고 같은 폴더에 success.html 파일을 하나 만들어 '전송 완료' 이라는 내용을 넣었다.은 서버로 유저 정보를 전송하려고 사용한다. action="url"에 작성한 url로 폼 데이터가 전송된다.(현재 서버가 없기 때문에 로컬에 파일, success.html 을 만든 것) (주의) 안의 은 전송 버튼은 type="submit"으로 그 외.. 2024. 8. 26.
[JavaScript] UI 애니메이션 🌱 들어가기 전에버튼을 누르면 모달창을 띄워 보자.로그인 로그인하세요 닫기 .black-bg { display: none; width : 100%; height : 100%; padding: 30px; background : rgba(0,0,0,0.5); position : fixed; top: 0; left: 0; z-index : 5; }.white-bg { padding: 30px; border-radius: 5px; background: #fff;}.show-modal {display: block;}class 부착식으로 만들기 위해 모달창에 display:none을 추가하고 show-mo.. 2024. 8. 26.
[JavaScript] jQuery 사용법 자바스크립트는 코드가 매우 길고 복잡한 특징이 있다. 그래서 html 조작을 쉽게 바꿔 주는 라이브러리들을 사용할 수 있다. React, Vue, jQuery 등이 html 조작을 쉽게 바꿔 주는 라이브러리들이다. React, Vue는 자바스크립트 문법을 어느 정도 알아야 사용 가능하기 때문에 우선 jQuery를 사용해 보자.jQuery는 언어가 아니라 라이브러리일 뿐으로 자바스크립트랑 다른 문법을 쓰는 것이 아니라 함수명, 셀럭터 이름들을 짧게 바꿔 주는 것이다.    jQuery 설치구글에 jQuery cdn 검색하면 나오는 사이트(https://releases.jquery.com/)에서 jQuery 3.x 버전  이제 jQuery 설치한 곳 하단에서 jQuery 문법을 사용할 수 있다.(거의 모든 .. 2024. 8. 26.
[JavaScript] classList 다루기 버튼을 누르면 등장하는 서브메뉴를 만들며 자바스크립트로 class 탈부착하는 문법을 배워 보자.  Bootstrap 설치Bootstrap css 파일을 설치해 놓으면 버튼, 탭, 메뉴 같은 걸 가지고 와서 개발할 수 있다.1. Bootstrap 공식 사이트(https://getbootstrap.com/)에서 get started 버튼을 누른다.2. 우측 위에서 버진이 5.x 버전인지 확인한다.3. css 파일은 태그 안, js 파일은 태그 끝나기 전에 붙여 넣으면 설치는 끝이다.   Navbar 만들기Bootstrap 사이트에 원하는 웹 UI를 검색해서 복사 붙여넣기 하면 된다.상단 메뉴 Navbar부터 만들어 보자.(index.html) Navbar 이러면 상단바 .. 2024. 8. 23.
[JavaScript] EventListener, 이벤트리스너 getElementsByClassName 셀렉터테스트1테스트2이런 html 요소가 있다.셀렉터로 찾아 변경하고 싶으면 class명이 title인 것을 찾아라고 명령을 줄 수 있다. 테스트1테스트2이러면 태그 내용이 안녕으로 바뀐다.getElementsByClassName('클래스명')[순서] 이렇게 쓰면 된다. [0] 이렇게 [순서]를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아 주기 때문이다.그래서 그 중에 몇 번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여 줘야 한다.[0] : 찾은 것 중 위에서부터 1번째 요소[1] : 찾은 것 중 위에서부터 2번째 요소... (참고)getElementsByTagName (태그명으로 찾아 줌).. 2024. 8. 23.
[JavaScript] function 문법, function의 파라미터 문법 자바스크립트 function 문법- function(일명 함수)라는 문법은 길고 더러운 코드를 한 단어로 축약하고 싶을 때 쓰는 문법.- 특정 기능을 다음에도 쓰기 위해 모듈화해 놓은 문법. function 함수명(){ 축약하고 싶은 긴 코드}1. function 키워드 쓰고 소괄호, 중괄호 붙인다.2. 소괄호 왼쪽에 함수명은 작명한다.3. 긴 코드를 중괄호 안에 담으면 코드 축약은 끝이다.그러면 함수명() 쓸 때마다 그 자리에 긴 코드가 실행된다.     Alert 박스  코드 function으로 축약해 보기지난 포스팅에 만들었던 Alert 박스 코드를 보자. 알림창입니다. 닫기열기버튼의 onclick 안에 있는 긴 자바스크립트 코드를 함수 문법을 사용하면 짧게 축약해서 쓸 수 있다.  .. 2024. 8. 23.
[JavaScript] 동적 UI 만드는 법(Alert 박스 만들기) 기본적인 UI 만드는 법1. HTML/CSS로 미리 디자인(필요하면 미리 숨김)2. 버튼을 누르거나 할 경우 UI 보여 달라고 자바스크립트 코드 짜기   Alert 박스 만들기1.  Alert UI 디자인작업 폴더에 main.css 파일 생성 후 index.html 태그 안에 첨부(index.html)알림창입니다.(main.css)#alert-box { display: none; padding: 20px; border-radius: 5px; color: #fff; background-color: #87ceeb;}UI를 평소에 숨기고 싶으면 display: none, 다시 보여 주고 싶으면 display: block 넣으면 된다.visiblity: hidden도 있다. 2. .. 2024. 8. 23.
[JavaScript] 자바스크립트, 개발 환경 세팅 🌱 개발 환경 세팅0. 에디터 설치 (VS Code 사용)1. 작업 폴더 생성 후 에디터에서 [파일]-[폴더 열기]로 작업 폴더 열기2. index.html 파일 만들고 코딩 시작3. html 파일 미리보기 띄우고 싶으면     VS Code 에디터에서는 왼쪽 패널 Extensions 메뉴에서 Liver Server 설치, html 파일 우클릭 - Live Server 띄우기 클릭   자바스크립트란?HTML 파일 안에 "HTML 조작과 변경"을 담당하는 언어 자바스크립트 사용하는 이유- HTML 조작 가능- 서버와 통신 가능- 클릭, 타이핑 감지- 비동기 처리- 자료 다루기  자바스크립트로 HTML 조작하는 법안녕하세요 위의 코드를 실행해 미리보기로 확인해 보면 안녕하세요였던 태그가 안녕으로 바뀌어 .. 2024. 8. 22.
기본 세팅, 단축키 꺼내야 할 패널 : Color, Appearance, Navigator, Layers / Swatches, Pathfinder 선택꺼내지 않아도 되는 패널 : Stroke, Transparency, Align, Character, Gradient (ㄴ 옵션, [Window], [View], 단축키 등으로 빠르게 꺼낼 수 있음)   ▶ Ctrl + K => Preference   [Units]에서 General : Millimeters 확인    ▶ Ctrl + N => 새 창 열기Units = Millimeters, Bleed(재단선) 모두 0, Color Mode = CMYK (=> 컬러 패널 CMYK 사용)    (Color Mode = RGB => 컬러 패널 HSB 사용) ▶ Ctrl + Shift.. 2024. 8. 22.
[React] Context API 리액트 같은 Single Page Application(html 페이지가 하나인 사이트)의 단점은 컴포너튼간의 state 공유가 어려운 것이다. 즉, 컴포넌트에 state를 자식의 자식 컴포넌트(자손 컴포넌트)에 사용하고 싶으면 props를 2번 전송해 주어야 한다.  App 컴포넌트에 있는 shoes라는 state를 TabContent 컴포넌트에서 사용하고 싶으면 어떻게 해야 할까? App → Detail → TabContent 이렇게 props를 2번 전송해야 한다. (App.js)function App() { let [shoes, setShoes] = useState(data); return ( (생략) } /> );}(Detail.js)function Detail(props){ .. 2024. 8. 22.
[React] 탭 UI 만들기, 컴포넌트 전환 애니메이션 주는 법(transition) 탭 UI버튼 3개와 박스 3개를 미리 만들어 놓고 버튼 누를 때마다 그에 맞는 박스를 보여주는UI 탭 UI 만들기1. HTML, CSS로 디자인 미리 완성하기2. UI의 현재 상태를 저장할 state 하나 만들기3. state에 따라서 UI가 어떻게 보일지 작성하기 참고사항: 자식 컴포넌트에서 props 쉽게 쓰고 싶다면function TabContent(porps){ return [ 내용0, 내용1, 내용2 ][props.tab]} ▼ ▼ ▼function TabContent({tab}){ return [ 내용0, 내용1, 내용2 ][tab]} 자식 컴포넌트에서 props라고 파라미터를 하나만 작명하는 게 아니라 {state1이름, state2이름...} 이렇게 작성하면 props.state1.이름.. 2024. 8. 22.

티스토리툴바