본문 바로가기

전체 글

(54)
[HTML]table 셀 병합, 입력 관련 태그 table 셀 병합 셀 병합은 왼쪽에서 오른쪽, 위에서 아래 방향으로만 가능하다 즉, A 에 colspan, B에 rowspan을 지정해서 병합할 수 있다. Colspan : 가로방향으로 병합 A C D E : 열 3칸 합침 Rowspan : 세로방향으로 병합 A B C : 행 2칸 합침 입력 관련 태그 input 태그 input 태그는 사용자로부터 입력을 받기 위해 사용하는 태그 중 가장 대표적인 태그이다. input 태그의 type input 태그에 type속성을 활용하면 다양한 형태의 입력 요소를 만들 수 있다. 회원가입 type="text" 텍스트를 입력받는 유형이다. input 요소의 기본 유형으로 따로 지정해주지 않아도 사용할 수 있다. type="password" password 또한 텍스트..
[HTML] HTML구조, 기본 태그 HTML이란? 화면 구성에 필요한 개체의 나열이다 (구조화된 나열) 색깔, 크기, 형상이 없는 정해지지 않는 개체들의 나열이다 HT (Hyper Text) 와 ML(Markup Language)의 줄임말로 링크기능이 가능한 구조화된 문서를 말한다. HTML의 구조 //시작 태그 (HTML의 문법 영역을 표시) //종료태그 기본 태그들 exam1. br태그, hr 태그 텍스트 내의 줄바꿈을 할 때 사용합니다. 수평 가로선을 말합니다 속성을 지정할 수 있는데 이렇게 지정하면 수평선의 두께와 길이를 각각 3, 300으로 지정할 수 있습니다. exam2. a태그 anker태그로 하이퍼링크 기능입니다. 네이버로 가기 여기서 href는 Hyper Reference로 참조링크를 말합니다. a태그를 클릭하면 href로..
자바스크립트 2/7 복습 버튼1 누르면 "아이디입력하세요" 알림창 버튼2 누르면 "비밀번호 입력하세요" 알림창 - 내가 짠 코드 아이디입력하세요 닫기 비밀번호입력하세요 닫기 버튼1 버튼2 - 강의 p 태그 사용해서 아이디 입력으로 바꾼 후 띄워주는 것으로 하였다. 알림창임 닫기 버튼1 버튼2 서브 메뉴 만들기 - 클래스 탈부착 애니메이션 추가 쉬움 나중에 재사용 편리 버튼을 누르면 list 보이게 - 버튼 누르면 show 붙여주셈 Navbar An item A second item A third item A fourth item And a fifth one 버튼 한 번 더 누르면 숨기기? - 버튼 짝수번 누르면 show 제거해주셈 > toggle 함수 사용 classList.toggle('show') : show가 있으면 제거,..
redux state 변경 3step redux state 변경 3step 1. state 변경해주는 함수 만들기 2. export 하기 3. dispatch( state변경함수() ) redux의 store의 state 변경하는법 먼저, reducer 함수를 만들고 그곳에 state 수정해주는 함수를 만들고 원할 때 dispatch() 함수를 사용해 reduce에 써진 함수를 실행해달라고 store.js에 요청하면 된다. state 수정하는 법 1. state 수정해주는 함수 만들기 - reducers let user = createSlice({ name: 'user', initialState:'backminjoo', reducers : { changeName(state){ // 기존 state를 뜻함 return 'john ' + sta..
[코딩애플] 장바구니 페이지 & redux 문법 장바구니 페이지를 만들고 장바구니 state가 app, detail, cart 에 필요하면 어디 만들어야할까? redux를 사용하면 컴포넌트들이 props 없이 state 공유가 가능해진다 * 리액트 구인시 대부분 redux를 요구한다. redux란 애플리케이션 상태를 관리하기 위한 오픈 소스 JavaScript 라이브러리이다. redux를 왜 쓸까? 컴포넌트간 state공유가 편해지기 때문이다. props 전송 없이도 모든 컴포넌트가 state를 사용할 수 있게 만들어준다. 장바구니 페이지 작성 1) Cart.js 페이지 만들기 Cart.js 폴더를 만들고 react bootstrap을 이용하여 테이블 레이아웃을 만들어 준다. Card 컴포넌트를 만들어서 app.js 에서 사용해준다 * table 태그..
array- sort, map, filter함수 sort() , map() , filter() array 내 모든 요소를 반복해서 가공시키는 메소드임 👉sort() array의 요소들을 sort 함수 내용대로 재정렬하여 반환함 기본 sort() var array = ['a','c','b']; array.sort(); console.log(array); //[a,b,c] var array = [1, 8, 100, 33, 5] array.sort(); //[1,100,33,5,8] ⭐sort()의 파라미터 값에 아무것도 넣지 않으면 문자열로 취급되어 유니코드 값 순서대로 아이템을 정렬함 숫자도 맨 앞의 숫자를 기준으로 문자열처럼 반환함 파라미터를 활용한 오름차순 정렬 var array = [1, 8, 100, 33, 5] array.sort(functio..
GET POST 방법 ajax란? 서버와 데이터를 주고 받는 방법 중 하나로 새로 고침 없이 get, post요청하는 기능을 말함 새로 고침없이 쇼핑몰 상품을 더 가져오거나 새로고침 없이 댓글을 서버로 전송하는 기능을 만들 수 있음 서버란? 유저가 데이터를 요청하면 데이터를 보내줌 서버에 데이터를 요청할 때 1. 어떤 데이터 url인지 잘 기재해야 함 2. 어떤 방법(get/post)으로 요청할 것인지를 결정 get/post 요청하는 법 get: 서버에서 데이터를 읽고 싶을 때 post: 서버로 데이터를 보내고 싶을 떄 get사용법 브라우저 주소창에 url 을 적으면 그곳으로 get요청을 날려줌 post 사용법 jquery로 ajax 요청하기 get요청하는 법 $.get('url~~'); $.get('url~~').done(..
js - 조건문( if, if else, if else if ) [if문] 조건식이 참이면 코드 블록 사이의 실행문을 1회 시행하고 거짓이면 if문을 탈출함 [if else문] 조건식이 참이면 실행문 A실행 , 조건식이 거짓이면 실행문B 실행 [ if else if문 ] 두 개 이상의 조건식을 사용하고 싶을 떄 사용할 수 있는 조건문 if, else if, else의 명령어를 모두 사용함 조건식 A가 참이면 실행문 a 가 작동, 조건식 A가 거짓일 경우 조건식 B로 이동 조건식 B가 참이면 실행문 b가 작동되고 조건식 B가 거짓이면 실행문 c가 마지막으로 작동됨 [조건 안에 들어가는 비교 연산자] 전송버튼을 눌렀을때 input에 입력한 값이 공백이면 알림창을 띄워주는 예제 로그인하세요 전송 닫기 1. 먼저 작성할 코드를 한글로 적는다 2. 한글로 작성한 코드를 자바스..