IT/Front

Component리액트로 만들어진 앱을 이루는 최소한의 단위입력(props)을 받아 출력(element)을 하는 역할UI의 일부를 제어하는 재사용 가능한 코드JS의 함수 역할을 React에게서 담당애플리케이션을 논리적이고 재사용 가능한 부분으로 구성하는데 용이함하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성 가능 Component의 종류1. Function Componentfunction Welcome(props) { return Hello, {props.name};}React 요소를 반환하는 JS 함수Class Component보다 간결하고 작성하기 쉬워 많이 사용됨useState, useEffect, useContext 등과 같은 React 훅을 사용할 때 사용pro..

Navigation Bar Dropdown index.html ... Java 입문 수업 Java 제어문 3 4 ... index.css nav { /* border: 1px solid black; */ width: 100%; height: 50px; display: flex; justify-content: space-evenly; position: relative; top: 0; left: 0; z-index: 10; } nav .menu { /* border: 1px solid blue; */ width: 10%; height: 100%; } nav .menu .menu-title { /* border: 1px solid blue; */ width: 100%; height: 50px; /* text-..

index.html index.js $(function () { //-- at1 btn img slide let cnt = 0; $(".at1-btn li").on("click", function () { let at1No = $(this).index(); if (at1No == 2 && cnt 0) { cnt--; $(".at1-img").animate({ left: "+=100%" }, 500); } $(".disp").text(cnt + 1 + " / 4"); }); }); index.css /* article 1 *..

z-index? HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다. z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다. 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치한다. z-index 속성을 너무 많이 사용하면 유지보수가 매우 힘들어질 수 있기 때문에 가급적이면 z-index 속성을 아예 사용하지 않는 편이 좋다. z-index가 없을 때 요소(element)간의 깊이 A Box B Box 상위 일반 요소 일반 요소 B Box position 속성(not static) 일반 요소 A Box position 속성(not static) positi..

.attr() 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 하나의 인자를 주면 해당 속성 값만을 조회하고 두 개를 주면 해당 속성 값을 변경한다. .attr(attributeName) // 속성값 가져오기 .attr(attributeName, val) // 속성값 제어하기 적용 //-- left menu $(function () { $(".menu").on("click", function () { let leftMenuNo = $(this).attr("class").substring(5, 6); $(".right").hide(); $("#view_" + leftMenuNo).show(); }); let menuNo = 0; //-- right view_4 $(".r..

jQuery? jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손 쉽게 구현할 수 있으며, Ajax 응용 프로그램 및 플러그인도 jQuery를 활용하여 빠르게 개발할 수 있다. jQuery 문법 $(선택자).동작함수(); 달러($) 기호는 jQuery를 의미하고, 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. $() 함수 $() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할이다. $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자..

class class 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용된다. 이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름은 가지는 요소들을 모두 선택한다. 선택자 명명시 숫자로 시작하면 안되며, 언더코어(_)나 하이픈(-)을 제외한 특수문자는 사용 불가하다. id id 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용된다. 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만 선택한다. 여러 요소에 같은 아이디 이름을 사용해도 작동은 하지만 중복된 아이디를 가지고 javascript 작업을 하게 되면 오류가 발생하여 되도록 하나의 웹 페이지 안에서 중복되지 않게 사용해야한다. id 속성 명명시 최소 1글자 이상이며, 공백은 없어야한다. id는..

Padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 padding 영역의 크기를 설정한다. 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 받는다. padding 속성 padding : 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다. padding-top : 윗쪽의 padding 값을 설정한다. padding-right : 오른쪽의 padding 값을 설정한다. padding-bottom : 아래쪽의 padding 값을 설정한다. padding-left : 왼쪽의 padding 값을 설정한다. Margin margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. 마진 ..

와 의 차이 HTML 문서에서 특정 영역이나 구획을 정의할 때 사용한다. 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로도 사용되며, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정할 때에도 종종 사용된다. 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다. HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용한다. 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용할 수 있다. 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요..

1. Material UI MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com 리액트 기반 UI 라이브러리 중 가장 인기 많음 구글 머테리얼 디자인을 기반으로 제작 타입스크립트, 플로우 타입 모두 지원 2. React Bootstrap React-Bootstrap The most popular front-end framew..