정리공간

keyframes : 애니메이션이 동작할 전체 영역(시작과 끝) keyframes을 지정한 그 영역 안에서 애니메이션이 작동한다. => 전체적인 틀을 만듦! 특징 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 수 있다. 입력없이 스스로 작동할 수 있다. 반복이 가능하다. keyframes 사용방법 CSS 파일에 @keyframes 애니메이션이름 { } 형태로 작성한다. 시작과 끝은 퍼센트(%)와 from~to 두 가지 방법으로 지정할 수 있다. @keyframes ballBounce { 0% { top: 20px; } 50% { top: 400px; } 100% { top: 20px; } } Animation 속성 name : 내가 만들 애니메이션의 이름 duration : 애니메이션 작동 시간. 단..

1. CSS Transition 시작과 끝 두개의 상태만 지정할 수 있는 단순한 연출. 어떠한 입력이 있어야만 작동한다. ex)버튼을 눌렀을때, 마우스를 올렸을때 등 버튼을 눌렀을때 어떤 컴포넌트가 부드럽게 등장 하는 등 간단한 작업에 사용하기 좋다. 사용방법 CSS에 transition속성으로 직접 구현 button { display: inline-block; transition-property: all; transition-duration: 0.5s; } button:active { transform:translate(50px, 50px); } 이동하는 버튼 2. CSS Keyframe Animation ▷ transition과 비교해서 가능한 것! 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 ..

1. 이미지 형식 .jpg : 사진. 생삭과 명암을 다양하게 표현. .gif : 256색상 사용, 작은 아이콘, 작은 이미지 사용. .png : 투명한 배경색을 사용할 수 있고, 웹에서 많이 사용한다. 2. 이미지 경로 상대 참조: 현재 위치에서 올라가는 방법. ex) images/5.jpg 절대 참조 : 루트를 기준으로(JSP에서는 webapp) 찾아가는 방법. ex) ../folder/1.jpg 3. 이미지 태그 : src : 이미지 파일의 경로 alt : 이미지가 안보일때 나오는 이름. 4. 이미지 크기 픽셀 : 화면을 이루는 빛(하나의 점). 해상도는 점(빛)의 개수를 의미한다. % : 이미지 크기가 브라우저 크기에 따라 변동한다.

1. 제목 태그 2. 문단 : 3. 진한 글자 : , 4. 기울이기 : 5. 밑줄 : 6. 취소선 : 7. 글자 작게 : 8. 위첨자 : 9. 아래첨자 : 10. 들여쓰기 : 11. 줄바꿈: 12. 수평 밑줄: 13. 적은 그래도 출력 : 원하는 모양대로 출력한다고? 14. 공백 : &은 "앤퍼센트"라고 부른다. 15. 꺽새() : 16. 카피모양(©) : © 17. 앤퍼센트 모양(&) : &

1. 라우터 설치 npm i react-router-dom@5.2.1 2. BrowserRouter 적용. BrowserRouter: 웹 브라우저의 주소를 각 컴포넌트에 넘겨주어 현재 어느 주소를 보고있는지 알 수 있다. // index.js import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , document.getElementById('root') ); // public/index.html의 id=rootfmf 가진 태그에 렌더링(연결)하겠다는 의미 3. Route로 페이지 컴포넌트 연결 Route: 주소창과 맞는 컴포넌트를 연결시킨다. exact: 기존의 포함하면 다 보여주는 것이 아닌, 주소와 완전 똑같은것만 보여준다. 1) r..

태그에 href="주소" 속성을 주면 해당 주소로 이동한다. 1. url 이동 네이버 2. 파일로 이동 html01폴더 안의 Test01 3. 사진 연결 사진 연결 4. 다운로드 download 속성 사용. 사진다운로드 5. 새창열기 target="_blank" 속성 사용. 원래 링크를 누르면 해당 페이지가 변하면서 이동이됐는데, 새창과 함께 이동하는 옵션이다. 새창으로 열기 사진을 새창으로 열기 6. 문서 내의 특정 위치로 이동 가고싶은 위치에 id="이름" 을 지정하고 에 href="#이름">을 하면 해당 id이름을 가진 태그로 이동한다. 12월 3일로 이동 12월 3일

선택 입력 사용하는 두 가지 방법. 1. 태그 사용 내용1 내용2 내용3 2. 과 사용 1옵션 2옵션 3옵션

1. 테이블 요소 테이블을 만들겠다. -> 테이블 범위 표시 테이블 제목 테이블 헤더 그룹 지정. 행 구역 지정, 이나 를 포함해야한다. 헤더 셀 표시. 테이블 바디 그룹 지정. 셀 하나하나 지정 테이블 제목 과일색깔 사과빨강 바나나노랑 2. 열과 행 합치기 열 합치기: rowspan="숫자" 행 합치기: colspan="숫자" 지원 양식 개인정보 이름 학과 학번 연락처 지원분야

DOM이란 무엇일까? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 구글에 검색하면 위와 같은 설명을 볼 수 있다. 근데 잘 이해가 가지 않으니 하나하나 뜯어서 살펴보려고 한다. 1. 문서(Document) 말이 어렵게 느껴질 수 있지만 우리가 흔히 말하는 "문서"를 생각하면된다. 웹 페이지는 일종의 문서다. 세부적으로도 나눠지지만 쉽게 생각해서 웹 페이지 하나하나를 웹 문서라고 생각해보자. 이 문서는 웹 브라우저를 통해 해석되어 화면에 나타난다. 마치 프랑스어로 쓰여진 문서를 번역기를 통해 보여지는 거라고 생각하면 쉽다. 프랑스어로..

에서 파일 업로드 버튼을 만들었는데 너무 밋밋하고 버튼 이름을 커스텀할 수 없다. 업로드 버튼을 커스텀 하려면 기존의 태그를 숨긴 뒤, 새로만든 버튼에 연결해야 한다. 1. 기존에 만든 에 ref 추가 //ref를 사용하기 위해 useRef()라는 Hook함수를 사용한다. const fileRef= useRef(); *ref 란? 리액트에서 DOM에 이름을 붙이는 것. ref로 지정해둔 fileRef를 통해서 해당 함수를 실행할 수 있다. 2. CSS파일에서 해당 input태그 숨기기 .image_input { display: none; } 3. 새로 커스텀 버튼 만들기 그냥 일단 만들어봐! 4. 버튼에 연결된 함수 만들기 이 함수는 ref로 과 연결되있어서 input태그를 대신 누르게 된다. const..