STUDY61 [React]시작하기 리액트란? 리액트는 페이스북에서 만든, 사용자 인터페이스를 만들기 위해 사용되는 자바스크립트 라이브러리이다. 출처 : 위키백과 리액트의 대표적인 특징 JSX 문법 (JavaScript eXtension) 사용 React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. Component 기반 컴포넌트(Component)는 프로그램에 있어서 재사용이 가능한 각각의 독립 모듈이다. 소프트웨어 시스템에서 독립적인 기능을 수행하는 '모듈'로서 시스템을 유지 보수 하는데 있어서 일부분 교체가 가능하도록 만든 기술이다... 2022. 11. 25. [Git] 시작하기 1. Git 설치하기 https://git-scm.com/ 1-1. 기초 환경설정 git bash 열기 유저 이름 생성하기 git config --global user.name "myname" 유저 이메일 생성하기 git config --global user.email "email" 깃허브 가입할때 사용한 이메일을 사용하도록 한다. 정보가 맞는지 확인하기 git config --list 해당 부분만 확인하면 된다. 2. Git 프로젝트 만들기 2-1. 깃허브 repository 만들기 1. 우측 상단에 + 버튼을 클릭해 New repository 버튼을 클릭한다. 2. 원하는 repository 프로젝트 이름을 쓰고 create repositort 버튼을 눌러 만든다. Owner 저장 공간을 선택할 수 .. 2022. 11. 25. [CSS] box-shodow로 inline으로 border 만들기 box-shadow : inset border의 경우는 px 을 지정하게 되면, 그만큼의 값이 block 속성에 포함되서 크기가 150px 이라고 하면 151px로 잡히게 된다. 그때는 width:149px; border 만큼의 크기를 width height 에서 빼줘야 하는데, 해당 방법 사용이외에 다른 방법이 뭐가 있을가에 대한 고민으로 찾아본 결과 box-shadow : inset 속성을 사용하면, width 값을 줄이지 않고도 사용 할 수가 있게 된다. div { width: 150px; height: 50px; background-color: green; box-shadow: 0 0 0 3px #000 inset; } HTML 삽입 미리보기할 수 없는 소스 2022. 11. 25. [CSS] 제목 줄 넘어가는 부분 ... 처리 · 이미지 박스에서 제목이 밖으로 빠져나갈때 상황 (한줄처리) 제목이 들어가는 이미지 게시판이라던가, 한줄로 쓰고 싶거나, 박스 안에서 내용이 넘쳐 밑으로 빠지는 경우들이 있을것이다. 01. white-space : nowrap white-space 는 요소 안에서 공백을 설정 해준다. nowrap 속성은 공백을 1개만 표시하고 제외 다른 공백을 하나로 합쳐준다. 02. overflow : hidden overflow 는 요소 안에서 내용의 표시 방식을 설정 해준다. hiddend 속성은 요소의 크기를 넘기는 내용을 잘라 보여지지 않게 해준다. 03. text-overflow : ellipsis text-overflow 는 요소 안에서 텍스트의 표시 방식을 설정 해준다. ellipsis 속성.. 2022. 11. 25. [CSS] 스크롤바 없애기 -ms-overflow-style: none; ::-webkit-scrollbar {display: none;} 풀 페이지나 스크롤 바 부분이 없었으면 하는 상황에서 유용한 코드이다. 기능은 그대로이나 보이지 않게 설정 할 수 있다. 2022. 11. 25. [HTML] <a> tag a 태그 태그는 하이퍼링크를 걸어주는 태그다. 속성 href: 클릭시 이동 할 링크 target: 링크를 여는 방법 _self: 링크를 현재 페이지에서 오픈. (기본값) _blank: 링크를 새로운 창 새로운 페이지에서 오픈. _parent: 링크를 현재 프레임의 부모 프레임에서 오픈. _top: 링크를 윈도우페이지에서 오픈. (최상위 페이지) 프레임이름: 직접 프레임이름을 명시하고, 명시한 프레임 이름이 있는 곳에서 오픈. 사용방법 링크 열기 a태그의 href를 사용하고 싶지 않을때, href속성을 사용하지 않고 onClick() 이벤트를 사용하거나, 디자인적으로 사용하기 위함이다. 그럴때 유용히 쓰는 방법이 href= "" 값에 특정 값을 넣어주는 방법이다. 01. # 해시(hash) # 해시(has.. 2022. 11. 25. [library] Swiper.js 편하게 슬라이드 캐러셀 구현하기 Swiper https://swiperjs.com 유명하고 더 편한 터치 반응형 슬라이더들도 많지만 (slick 등등..) 제이쿼리를 쓰지 않고 바닐라JS만을 가지고 사용이 가능하며, 무료로 사용이 가능하기에 프로젝트에 자주 이용 하고 있는 슬라이더 라이브러리다. React, Svelte, Vue, Angular 에서도 사용이 가능하다. 사용 방법 NPM 으로 설치하기 $ npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/css'; const swiper = new Swiper(...); CDN에서 사용하기 //CSS 파일 추가 //JS 파일 추가 기본적으로 설정해.. 2022. 11. 25. 이전 1 ··· 4 5 6 7 다음 728x90
