본문 바로가기

FA

(40)

20220920 position 속성 원하는 위치에 배치하기 (position 속성) 속성 설명 static 요소들이 겹치치 않고 한 줄에 하나씩 나오게 된다. relative 원래 배치되어야 할 위치에서 지정한 값만큼 떨어진곳에 요소를 배치한다. absolute 가장 가까운 상위 요소의 위치를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치한다. fixed 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된다. https://developer.mozilla.org/ko/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), b..

220919 React 타이틀, 아이콘 바꾸는 방법 public 파일에 index.html파일에서 바꿔주기 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 여기서 아이폰+ 안드로이드 모든 아이콘 대응가능한 아이콘 만들 수 있음 1. 파일선택해서 > Favicon 만들기하고 2. 네모칸안에 나오는 것들 헤드안에 추가하고 Download the generated favicon 눌러서 다운로드하고 3. pu..

220917 배경에서 랜덤으로 이미지 나오게 하기 //랜덤으로 돌릴 이미지 가져오기 import img1 from "../../asset/assetLogin/img1.png"; import img2 from "../../asset/assetLogin/img2.png"; import img3 from "../../asset/assetLogin/img3.png"; //backgroundArr로 배열 만들어주기 const backgroundArr = [img1, img2, img3] //Math로 랜덤 함수 만들어주기 const randomIndex = Math.floor(Math.random() * backgroundArr.length); const backgroundImg = backgroundArr[randomIndex]; //리턴에서 return ( ..

20220916 input에서 글자 수 최대, 최소 지정하기 maxlength 최대 / minlength 최소 // 글자 수 최대 10 숫자로 조절하면 됌 // 글자 수 최소 5 숫자로 조절하면 됌

border-style border-radius 테두리 둥굴게 CSS 테두리 스타일 border-style속성은 표시할 테두리의 종류를 지정합니다 . 다음 값이 허용됩니다. dotted- 점선 테두리를 정의합니다. dashed- 점선 테두리를 정의합니다. solid- 단색 테두리를 정의합니다. double- 이중 테두리 정의 groove- 3D 홈 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. ridge- 3D 융기된 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. inset- 3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. outset- 3D 아웃셋 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. none- 경계를 정의하지 않음 hidden- 숨겨진 테두리..

React의 JSX / Javascript와 다른 점 / JSX 규칙 JSX (JavaScript XML) Javascript에 XML을 추가한 확장 문법 XML(eXtensible Markup Language)은 데이터를 저장하고 전송하기 위한 소프트웨어 및 하드웨어 독립적인 도구 JS와 JSX는 어떻게 다른가요? JS와 JSX는 둘 다 호환 가능하지만 차이점은 사용자 인터페이스가 생성되는 방식과 기능이 애플리케이션에서 분할되는 방식에 있습니다. JS의 경우 간단한 HTML이 먼저 작성되고 다음과 같이 스크립트 태그 내에 JS가 작성됩니다. Fruit List Orange 그런 다음 기능을 수행하는 JavaScript가 추가됩니다. 그러나 React의 유사한 JSX 코드는 고정 HTML 파일로 시작합니다. 그런 다음 HTML과 유사하지만 JSX인 코드가 작성됩니다. fu..

CSS 단위 width / length / font-size 단위변환 사이트 http://pxtoem.com/ 절대길이 cm 센치미터 mm 밀리리터 in 인치(1in = 96px = 2.54cm) px * 픽셀(1px = 1/96th of 1in) pt 포인트 (1pt = 1/72 of 1in) pc picas (1pc = 12 pt) * 픽셀(px)은 시청 장치를 기준으로 합니다. 낮은 dpi 장치의 경우 1px는 디스플레이의 하나의 장치 픽셀(점)입니다. 프린터 및 고해상도 화면의 경우 1px는 여러 장치 픽셀을 의미합니다. 상대길이 단위에 상대적 em 와 같은 활자체 속성의 경우 부모의 font-size글꼴 크기, 와 같은 다른 속성의 경우 요소 자체의 글꼴 크기 width. ex 요소 글꼴의 x 높이입니다. ..

js 기초 정리 //주석처리 🟡함수 함수 선언식: function do_something() { ... } 함수 표현식: let do_something = function [함수 이름]() { ... } //함수 이름은 생략가능 화살표 함수: let do_something = () => { ... } //함수 표현식의 단축형 🟡변수 1. 변수는 문자와 숫자, $와_만 사용 2. 첫글자는 숫자가 될수 없음 3. 예악어는 사용할 수 없음 4. 가급적 상수는 대문자로 알려줄것 const 절대로 바뀌지 않는 상수 수정x *일단 const로 하고 변동 있을 만한 것들을 let으로하기 (보안성) ex) const PI =3.14; 대문자로 선언하는게 좋음 변할 수 있는 값은 let으로 선언 5. 변수명은 읽기 쉽고 이해할 수 있게..

이전 1 2 3 4 5 다음

티스토리툴바