이레

css에서 색상을 표현하는 방법은 3가지가 있습니다. 1, 색상 이름 사용 원하는 색상의 이름을 바로 입력하여 사용합니다. 140가지의 색상을 이름으로 지원하지만, 디자인에 맞는 색상을 사용하기엔 한계가 있습니다. https://www.w3schools.com/cssref/css_colors.asp CSS Colors W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위의 ..

css 핵이란? 브라우저의 구현 차이나 버그를 이용해 특정 브라우저만을 대상으로 css를 적용하는 법 크로스 브라우징을 위한 꼼수라고 생각하면 됩니다. 1, 스타핵 (star hack) 셀렉트 앞에 *html을 붙이면 IE6에서만 적용됩니다. 2, 언더스코어 핵 (underscore hack) 속성 가장 앞에 언더스코어(_)를 붙이면 IE6에서만 적용됩니다. 3, 해시 핵 (hash hack) 속성 앞에 #를 붙이면 IE6이하 버전에서만 적용됩니다. 4, 닷 핵 (dot hack) 속성앞에 닷(.)을 붙이면 IE6,7에서만 적용됩니다. 5, 속성핵 속성 값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다. 속성 값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다. 속성값 뒷부분에 \0..

화면에서 버튼을 만드는 방법은 여러 가지 있습니다. 저는 그중 a태그와 button태그를 사용하고 있습니다. a태그는 페이지의 이동, 페이지 내의 이동과같은 역할 (문서를 url로 연결) button 태그는 단순 클릭 이벤트의 역할(type="button" 으로 지정해야 함) ✨ a태그 (anchor) href 요소와 결합하여 하이퍼링크를 만듭니다. target 속성을 사용해 이동하는 방법을 지정합니다. 페이지간의 이동을 위해 링크를 생성할 때만 사용합니다. 페이지 내의 동적 UI 작성할 때에는 a태그 사용을 지양해야 합니다. ✨ button 태그 페이지 내의 단순 클릭이벤트를 주는 경우에는 button태그를 사용합니다. button에는 3가지 타입이 있습니다. button / submit / reset..

css로 말풍선 만들기입니다. 말풍선의 뾰족함의 정도는 after의 border-radius를 조절하면 됩니다. 크기도 마찬가지 *codepen 참고 See the Pen 말풍선만들기 by jh-baek-95 (@jh-baek-95) on CodePen.

SQL 문법의 종류 DDL - Data Definition Language 데이터 정의어, 테이블이나 관계의 구조를 생성하는 데 사용합니다. CREATE - 데이터베이스의 객체를 생성합니다. DROP - 데이터베이스의 객체를 삭제합니다. (테이블의 모든 구조와 데이터를 삭제, 롤백 불가능) ALTER - 데이터베이스의 구조를 변경합니다. TRUNCATE - 데이터를 삭제합니다. (데이터 선택삭제 불가능, 롤백 불가능) DML - Data Manipulation Language 데이터 조작어, 데이터를 관리할 때 사용합니다. SELECT - 데이터를 검색 INSERT - 데이터를 추가 UPDATE - 기존 데이터를 수정 DELETE - 원하는 데이터 삭제 (롤백 문을 사용하여 데이터를 원상태로 돌릴 수 있..

웹 접근성이란? 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킵니다. 자세한 방법에 대해선 따로 정리하겠습니다. blind css 콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우 사용합니다. 우선, 콘텐츠를 숨기는 방법 중 display:none과 visibility:hidden , font-size:0, line-height:0, width:0, height:0과 같이 화면에서 영역이 잡히지 않는 속성들이 있습니다. 이런 속성들은 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않은 속성입니다. 스크린리더는 width, height가 0인 속성들은 읽을 수 없으므로, 사이즈는 최소 1px 이상으로 해야 합니다. 아래 css는 제가 사용하..

1, 리액트 컴포넌트 만들기 새로운 파일을 생성해줍니다. 파일 이름은 임의 test로 하고 js 형식으로 저장합니다. 리액트 컴포넌트를 만들 때는 import로 리액트를 불러와야 하는데 import React from "react"; 를 제일 첫 줄에 작성해줍니다. 제일 하단에는 컴포넌트를 내보내는 코드를 작성해줍니다. 이 코드가 있어야 다른곳에서 컴포넌트를 불러와 사용할 수 있습니다. export defalut Study; 첫줄과 마지막 줄 사이에는 컴포넌트 형태가 들어가게 되는데, 리액트는 함수형과 클래스형 이렇게 두 가지가 있습니다. 일단 함수형으로 정리할게요 Study.js 로 저장해준다음, 아래 코드를 작성해줍니다. import React from "react"; function Study() ..

종종 작업을 하다 보면 디자인에 맞춰 스크롤바를 커스텀해야 할 경우가 생깁니다. (티스토리도 적용가능) See the Pen 스크롤바 커스텀 by jh-baek-95 (@jh-baek-95) on CodePen.

프로젝트를 하다 보면 팝업창을 만들어야 하는 경우가 자주 있습니다. 팝업 종류에는 여러가지가 있는데, 오늘 정리할 것은 '모달 팝업'입니다. (혹은 레이어 팝업) ⭐️ modal popup 만들기 1, 딤(Dim) 배경 2, 팝업 큰틀 3, 팝업 오픈 클로즈 이벤트 만들기 1, 배경 팝업을 강조하기 위해 딤(Dim)/딤드(Dimmed)라고 하는 배경을 만들어줍니다. 스크롤이 생겨도 고정되게 position 은 fixed로 잡고 화면에 꽉 차게 하기 위해 width, height 100%으로 줍니다. 보통 팝업의 배경(Dim)은 반투명 검은색입니다. background : rgba(0, 0, 0, 0.3)으로 설정해줍니다. 0.3은 투명도이기 때문에 원하는 정도로 조절하시면 됩니다. .modal-bg {w..

1, node.js 설치하기 14버전 혹은 16버전으로 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 터미널에서 node -v 로 설치가 잘 되었는지 확인을 합니다. 설치 후 컴퓨터 재부팅하기 (하단에 이유있음) 2, 프로젝트 생성 저는 vs code 를 사용하기때문에 vs code 기준으로 정리하겠습니다. vs code로 작업할 폴더를 열어줍니다. vs code의 터미널을 열어줍니다. 터미널에 npx create-react-app 프로젝트이름 을 입력해줍니다. 엔터 한번 더 눌러주면 프로젝트 파일이 설치됩니다. 그다음 해당 프로젝트를 미..