목록프론트/리액트 (8)

코딩기록

리액트)2주차 학습 - 기본부터 끝까지 러닝메이트 HTML/CSS

1. 텍스트 요소 - 블럭요소. 텍스트 그대로 나타낼때 사용. 여러줄의 코드블럭을 나타낼때 사용. 이모티콘 등.  - 텍스트를 들여쓰기.  - css로 따로 꾸며야 함. - abbreviation 약어를 나타낼때 사용. WWW   - 주소. - 인용의 출처, 회의록, 이슈추적시스켐의 티켓 번호 등 변경점을 설명하는 리소스의 URI. - 글자를 오->왼 으로 작성한다. 아랍어 쓸때 사용.텍스트 포매팅 (Text Formatting) - 웹페이지상 텍스트에 효과를 준다. - 하이라이트. - 글씨를 작게. - 아래 첨자 요소. 활자배치를 아래  첨자로 해야하는 인라인 텍스트를 지정. 각주 등.  - 위 첨자 요소. 제곱 등. - 가운데 취소선. 문서에서 제거된 텍스트 범위. - 문서에 추가된 텍스트의 범위 표..
프론트/리액트 2024. 6. 10. 12:40
리액트)1주차 학습 - css 애니메이션

1. html에서 js로 이벤트 적용하기모달 열고, 닫기 제목입니다 내용입니다 수정하기 삭제하기 정말 삭제하시겠습니까? 취소 삭제   2. wiggle 애니메이션 복잡한 애니메니션이 필요할때 사용 안녕하세요!   wiggle.css  /* wiggle 애니메이션 */@keyframes wiggle { 0% { transform: rotate(0deg); color: red; } 25% { transform: rotate(10deg); color: orange; } 50% { transform: rotate(0deg); color: yellow; } 75% { transfor..
프론트/리액트 2024. 6. 8. 12:49
리액트)1주차 학습 - html, CSS 문법

html에서 아이콘 사용하는 2가지 방법 1. i 태그2. svg 1-1. 링크삽입https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"   integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="   crossorigin="anonymous" referrerpolicy="no-referrer" />1-2. https://fontawesome.com/icons아이콘 홈피에서 아이콘 테크 복사  예시) 돋보기 아이콘   2-1.  svg 안에 svg 태그를 쓴다  ...  head 태..
프론트/리액트 2024. 6. 4. 19:07
리액트)스터디6- 웹퍼블리셔-css메모장 선택자... /업뎃중

웹퍼블리셔 강의 기초부터 - https://wtss.tistory.com/168#실습 - https://blog.naver.com/rebehayan/221351418973  *텍스트한줄효과 2가지 방법- 1.overflow: hidden; width: 50px; height: 10px;2.overflow: hidden; text-overflow: ellipsis; white-space: nowrap; *이미지를 표현하는 방법 2가지1. html- img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현2. css - background 속성(의미가 없을 때) - 대체 문자 x3. 이미지를 background 속성 - 웹 표준 준수하기 위해서.     가상으로 대체 문자를 만듬(IR 효과)..
프론트/리액트 2024. 5. 16. 18:46
VSCode 자주 쓰는 필수 플러그인, 확장 프로그램, 익스텐션

오늘까지 생활코딩 HTML, CSS는 마무리하고간단히 ATOM Editor, 크롬개발자도구 강의를 보고 갈 생각이다.그 후에는 웹퍼블 강의 하나 듣고 리액트 강의, 자바스크립트 강의로 들어갈 계획이다. 1) Korean Language Pack for Visual Studio Code- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인 2) Prettier - Code formatter- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구 3) Atom KeymapAtom에서 자주 사용하는 바로 가기 키를 사용할 수 있음.  4) Settings Sync- github에 VS Code Setting을 올리고..
프론트/리액트 2024. 5. 10. 10:38
리액트)스터디3- css 참고 및 사이트

*훅의 이름은 use~ 로 시작한다.  HTML*모바일 지원  CSS생활코딩 css수업: https://opentutorials.org/course/2418/13340*css참고 사이트: codepen.io*아톰에디터- https://github.blog/2022-06-08-sunsetting-atom/사용법- 생활코딩: https://opentutorials.org/module/1579 *grid-화면에 나란히 위치시킨다. 150px 고정 display: grid;grid-template-columns: 150px 1fr; *반응형- 스크린의 최소폭이 800이되면 div디스플레이가 사라진다@media(min-width:800px) {  div{     display:none;   }}*반응형 순서 캐스..
프론트/리액트 2024. 5. 9. 12:47
리액트)스터디2- 개발자 도구 ( 생활코딩,제주코딩베이스캠프-칠리 )

생활코딩 - React class vs. function style coding 시작  *다음 들을 강의1. HTML의 모든것, HTML 기초 2. WEB2-CSS, CSS기본부터 활용까지3. 생활코딩 - JavaScript Immutability, WEB2 - JavaScript 4. 개발자도구  개발자도구Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구Sources: JS 디..
프론트/리액트 2024. 5. 8. 20:22
리액트)스터디1- 문법 리스트 & 개인메모장

개인메모장 1. JSX 2. Rendering Elements 3. Components and Props*** 4. State*** and Lifecycle 5. Hooks 6. Handling Events 7. Conditional Rendering 8. List and Keys 9. Forms 10. Lifting State Up 11. Composition vs Inheritance 12. Context 13. Styling 14. Mini Project 15. Appendix A. 리액트 버전18  8월 스케줄5번째 주  html/css 피드백 강의 & 프로젝트 마무리 하기mission04 (240829~30)mission05  (240830~31) 코딩 테스트 5차(240829)모던자바스크립트 ..
프론트/리액트 2024. 5. 6. 16:36
Prev 1 Next