본문 바로가기

전체 글

[React] 이미지 넣기 1. css파일에 이미지 넣어서 사용하기 .main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center; } 2. html에 직접 이미지 넣기 import bg from './bg.png'; div className="main-bg" style={{ backgroundImage : 'url('+bg+')'}}> 3. public 폴더에 이미지 넣어서 사용하기 - 이미지 같은 static 파일의 경우 public 폴더에 보관해도 됨 - public 폴더에 이미지를 저장하면 리액트 프로젝트 빌딩(html, js, css 압축) 시 압축 되지 않음 1) 간단한 사용.. 더보기
[React] <input /> 태그 1. 입력을 받을 수 있는 박스 생성 방법들 2. 에 입력 시 코드 실행하기 onChange/onInput 등 이벤트 핸들러 사용(필요 시 검색) 3. 에 입력한 값 가져오기 이벤트 핸들러에 들어가는 함수에 파라미터 e 추가하기 {console.log(e)}} /> e는 이벤트 객체, 현재 발생하는 이벤트와 관련한 기능을 제공하는 일종의 변수(e라는 이름 사용안해도 됨) 이벤트가 발생한 html 태그: e.target {console.log(e.target)}} /> 이벤트에 발생한 html 태그에 입력한 값: e.target.value {console.log(e.target.value)}} /> 이벤트 버블링 막기: e.stopPropagation() {console.log(e.target.value).. 더보기
[CSS] CSS(Cascading Style Sheets)와 선택자(selector) 1. CSS란? 1) 스타일링을 위한 언어 2) Cascading(계단식)이라는 뜻으로 여러 스타일이 적용될 경우 충돌을 막기 위해 계단식으로 스타일이 적용됨 3) 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음 4) CSS는 크게 선택자(selector)와 스타일(style)로 구성되어 있음 2. 선택자(selector) 1) 정의 스타일을 어떤 엘리먼트에 적용할지 선택하게 해주는 것 2) 문법 - 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술 - 각 스타일은 CSS속성과 값으로 이뤄진 키-값 쌍이며 CSS속성의 이름과 값을 콜론(:)으로 구분 3) 선택자 유형 ① 엘리먼트 선택자(elemen.. 더보기
[CSS] 폰트(font) 관련 속성 1. font-family - 어떤 글꼴을 사용할 것인지를 결정하는 속성 - 속성 값으로 사용할 글꼴의 이름을 적어주면 됨(글꼴 이름에 띄어쓰기가 들어갈 경우 큰따옴표로 묶어줘야함) #title { font-family: "글꼴명"; } - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 줘야 함 font-family 속성에 fallback 시스템 - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 주는 것 - 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올수 있도록 하기 위함 #title { font-family: Arial, Verdana, Monaco, "Times New Roman"; } - 일반적인 글꼴 분류(generic font .. 더보기
[GitHub] 하나의 Repository에 여러개 프로젝트 1. 부모 리포지토리 1) 부모 리포지토리 생성 2) 부모 리포지토리 클론 서브 리포지토리도 원격 리포지토리가 존재해야함! 2. 서브 리포지토리 1) 서브 리포지토리 생성 프로젝트 생성하고 프로젝트와 원격 리포지토리 연동 확인 3. 부모 리포지토리- 서브 리포지토리 연결하기 1) 부모 디렉토리로 이동 여기서는 JavaWebDevelp-study git subtree add --prefix={폴더명} {깃헙URL} {브랜치명}  ⚠️ 이때 부모 리포지토리에 아무 커밋이 없는 경우, 'ambiguous argument 'HEAD': unknown revision or path not in the working tree.' 라는 오류가 뜰 수 있다. 해결 방법 : git commit --allow-empty.. 더보기
JPA 설정 persistence.xml 파일로 JPA 환경 설정 및 관리 sky.spring.domain.Board 1. 영속성 유닛 이름 // Java 소스 EntityManagerFactory factory = Persistence.createEntityManagerFactory("{영속성 유닛 이름}"); EntityManager manager = factory.createEntityManager(); persistence.xml 파일의 루트는 는 영속성 유닛에 해당하는 엘리먼트를 가짐(영속성 유닛은 연동하려는 데이터베이스 당 하나씩 설정) 영속성 유닛을 설정하면 어플리케이션에서는 영속성 유닛 설정을 로딩해서 EntityManagerFa.. 더보기
톰캣 버전 확인  톰캣이 설치된 폴더로 이동 -> lib 로 이동 java -cp catalina.jar org.apache.catalina.util.ServerInfo 명령어 입력 더보기
[JavaScript] <script> 위치에 따른 동작 순서 1. head 내부 동작순서: HTML parsing 후 main.js 가져오고 실행 parsing HTML page is ready fetching js executing js - 단점: js파일에서 데이터를 가져와서 페이지를 보여줘야하는 경우 에러 발생 3. head + async 동작순서: asyn 옵션 boolean type(default: true), 브라우저가 pasing 하다가 fetch 명령하고 실행, 그리고 다시 parsing HTML parsing HTML blocked parsing HTML page is ready fetching js executing js 4. head + defer 동작 순서: defer 옵션: parsing 하다가 fetch만하고 다시 parsing후 pars.. 더보기

티스토리툴바