이레

웹 접근성이란? 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킵니다. 자세한 방법에 대해선 따로 정리하겠습니다. 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 프로젝트이름 을 입력해줍니다. 엔터 한번 더 눌러주면 프로젝트 파일이 설치됩니다. 그다음 해당 프로젝트를 미..

1, 톰캣 설치하기 https://tomcat.apache.org/ Apache Tomcat® - Welcome! The Apache Tomcat® software is an open source implementation of the Jakarta Servlet, Jakarta Server Pages, Jakarta Expression Language, Jakarta WebSocket, Jakarta Annotations and Jakarta Authentication specifications. These specifications are part of the tomcat.apache.org 원하는 버전을 클릭 후 원하는 경로에 다운로드하고 압축을 해제해줍니다. 톰캣 설치 끝 2, 이클립스와 톰캣연동..

1, https://www.eclipse.org Eclipse Downloads | The Eclipse Foundation The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 415 open source projects, including runtimes, tools and frameworks. www.eclipse.org 이클립스 사이트에 접속해 다운로드 버튼을 클릭한다. -> 최신 버전 다운로드 https://www.eclipse.org/downloads/packages/ -> 구버전 오른쪽 하단을 통해 이전 버전을 다운로드 받을 수 있습니다. 원하는 버전을 클릭 후 다운로드 합니다. 다운로..

내가 보려고 정리하는 개발환경 세팅하기 Step 1 JDK 설치 1, Oracle에서 JDK 다운로드하기 https://www.oracle.com/java/technologies/downloads/archive/ 회원가입 후 사용해야 합니다. 저는 java se 11 버전을 다운로드하였습니다. 실행 파일을 누르면 라이선스 동의 창이 뜨는데, 체크 후 다운로드 진행 다운로드한 exe 파일을 실행하면 설치가 시작됩니다. 저는 기본으로 지정되어있는 경로 그대로 설치했습니다. 2, JDK 설치 후 기본 설정하기 JDK 설치 후 환경변수를 설정해줘야 합니다. 윈도우+R -> sysdm.cpl 검색 고급 탭 - 환경변수 버튼 클릭 - 시스템 변수 Path 클릭 후 편집 - 새로 만들기 - JDK 설치 폴더 경로 b..

클로저 함수란? 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 말합니다. 클로저 함수는 일종의 '현상' 이기 때문에 정해진 규칙은 없습니다. ⭐️ 예제 function basic(){ var count = 0; count++; return count; }; document.write(basic()+' '); //출력값 : 1 function closure(){ var count = 0; function countSample(){ count++; return count; } return countSample; } var counter = closure(); document.write('1, count' + counter(),' '); document.write('2, cou..

css로 text에 줄 효과주기 입니다. 앞으로도 추가할 예정 1, 형광펜 효과주기 기본 mark 태그 사용 mark 태그의 컬러변경 형광펜 그러데이션 효과주기 글씨의 반절, 형광펜으로 그은듯한 효과 See the Pen Untitled by jh-baek-95 (@jh-baek-95) on CodePen. 2, 기본 text-decoration See the Pen text-decoration by jh-baek-95 (@jh-baek-95) on CodePen.