CSS에서 반응형 웹페이지를 object-fit 속성으로 컨텐츠 제어하기 object-fit 이란? object-fit은 이미지나 비디오와 같은 대체 요소를 부모 요소 크기에 맞게 조절하는 속성이다. 이 속성은 다양한 값들을 통해 콘텐츠의 크기와 비율을 유연하게 제어할 수 있어, 반응형 레이아웃에 많이 활용되는 속성이다.https://dev-chim.tistory.com/entry/CSS-object-fit [CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기반응형 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 다양한 디바이스와 화면 크기에 맞게 웹 페이지를 최적화하는 것은 사용자 경험을 향상하는 중요한 과제 중 하나입니다.dev-chim.tistory.comhttps://www.daleseo.com/css-object-fit.. 2024. 9. 4. (2024) 리액트 트렌드 라이브러리 정리 https://youtu.be/k0oqyokMm5Y?si=XJvgDYyccSvdI9eq영상 참고하자. 2024. 9. 4. React Spring(애니메이션 라이브러리) https://youtu.be/jOSu8VzJbpQ?si=Dgv7v-blQvQuYozP(출처 ㅣ 코딩 알려주는 누나)리액트 프로젝트를 좀 더 풍성하게 만들어 줄 수 있다.리액트 스프링을 이용해서 라이브러리를 세팅, 이후 편하게 애니메이션을 줄 수 있다. 세세한 것은 영상 참고. 2024. 9. 4. CSS 애니메이션 사이트 https://youtu.be/OWaHfpHxgb8?si=NxfAguBRGPu8U2Lx(사용방법)https://animista.net/play Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net(사이트) 2024. 9. 3. 알아두면 좋은 자바스크립트 애니메이션 라이브러리 (드림코딩을 참고함)https://www.youtube.com/watch?v=wbDpZwDRgRk 이런 라이브러리 등, 애니메이션을 주면 뭔가 있어보이는 사이트가 탄생한다...+ (리액트에서도 잘 적용하게 만들 수 있다. 리액트는 자바스크립트을 잘 빌딩하기 위한 "라이브러리"라는 것을 기억해두자. 그건 알아서 구글링하고, 사이트를 참고해보자.) - (리액트의 풀 네임은 React.js임 ㅇㅇ) 2024. 9. 3. 리액트에서 외부링크 열기 온클릭 이벤트를 이용해서 외부링크 여는 법. React에서 클릭시 외부링크로 열기React에서 Link태그는 Router와 연관되어 내부의 route로 이동시키기 때문에 다른 외부 링크를 연결하기위해 a태그를 사용할 수 있다. 그렇지만 a태그 없이 클릭 이벤트로 외부링크를 연결하고 싶다면velog.io window.open("외부링크 URL")} ~~ 2024. 9. 3. 자바스크립트 - Intersection Observer(무한스크롤) 자바스크립트에서 스크롤 관련 이벤트 함수를 복기함.(스크롤에 따라 특정 이벤트를 발생시킴, 무한스크롤을 만들 수 있고, 이벤트가 일어나는 시간, 지연 시간도 전부 컨트롤할 수 있게 됨.)https://youtu.be/OrG1wGgGfcI?si=D5850ERYMdg-OtJF(자세한 건 영상을 참고하자.) 2024. 9. 3. 자바스크립트 복습 (심화버전) - 모듈 시스템 / 버블링&캡쳐링 모듈 시스템모듈(Module) 이란?개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있다. 이 모듈을 이용해서 코드를 효율적으로 제어할 수 있게 된다.모듈 장점유지보수용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선이나 수정이 용이.네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있음.재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 .. 2024. 8. 29. CSS 전체적인 복습 (시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)https://github.com/gymcoding/learn-html-css GitHub - gymcoding/learn-html-cssContribute to gymcoding/learn-html-css development by creating an account on GitHub.github.com(오픈 소스는 다음과 같음. 고마워요 짐코딩!!) HTML/CSS 강의 www.youtube.com CSS란? CSS란?Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일을 잘 정리한 시트(문서)이다. HTML로 웹 페이지의 뼈대를 만들고, CSS로 웹 페이지를 예쁘게 꾸미는 역할을 한다.CSS 구조C.. 2024. 8. 28. HTML 전체적인 복습 (시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)https://github.com/gymcoding/learn-html-css GitHub - gymcoding/learn-html-cssContribute to gymcoding/learn-html-css development by creating an account on GitHub.github.com(오픈 소스는 다음과 같음. 고마워요 짐코딩!!) HTML/CSS 강의 www.youtube.com개발환경 구축시작하기 앞서서, 프론트엔드 언어들을 잘 사용하기 위해 에디터를 하나 만들게 되었다. 에디터는 유명한 에디터인 "비주얼 스튜디오 코드" 이다.이후 몇 가지 확장 프로그램도 깔아줘야 한다.HTML이란? HTML이란, Hyper Text.. 2024. 8. 27. 리액트 삽질...(타입 검사) 미니 프로젝트인 블로그를 만들면서 3시간 정도 삽질을 했다. (살려줘....)이 삽질에 대한 정리를 짧게 하고자 한다.일단 문제의 파일은 "페이지" 부분이었다.문제는 간단하다.useParms의 타입은 문자열이지만 postid의 타입은 숫자인 것이다.문제는 내가 코드를 "==="으로 해두었다는 것이다.자바스크립트에서는 타입 검사를 엄격하게 하거나 혹은 좀 더 유하게 검사할 수 있다.문법은 "==" 혹은 "==="이다. 전자는 그냥 값만 같으면 True가 되지만, 후자는 타입도 같아야 True가 된다.당연히 문자열과 숫자는 다른 타입이니 False가 나오고, 이는 곧 오류를 뜻한다.tilte를 가져오지 못하는 이유는 tilte의 타입은 "문자열"이기 때문이다. 근데 나는 이게 숫자 타입도 같아야만 데이터를 .. 2024. 8. 25. 자바스크립트 복습 (심화버전) - npm / webpack NPM이 무엇인가 NPM(Node Package Manager)은 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이라고 정의할 수 있다. 이 패키지 매니저를 이용해서 자주 쓰는 기능을 모듈화 해서 사용하게 된다. 재사용성도 높아지고 관리도 쉬워지기에 정말 많은 개발자들이 사용한다.왜 npm을 사용해야 하는가?프로젝트에서 필요한 라이브러리를 쉽게 다운받을 수 있다. (npm install로 프로젝트에서 필요한 라이브러리를 한꺼번에 다운로드한다.)프로젝트에서 사용하는 많은 라이브러리의 버전과 의존성 관리가 편하다.필요한 라이브러리를 CDN 보다 편하게, npm 명령어를 통해 프로젝트 로컬 환경 및 전역 환경에 쉽게 설치하고 관리할 수 있다.빌드하는 명령어를 자동화해 프로젝트를 관리할.. 2024. 8. 24. 자바스크립트 복습 (심화버전) - bom / dom / this / defer 오랜만에 자바스크립트를 복습하였다.자바스크립트에서는 여러 문법을 지원하지만, 오늘은 다음과 같은 내용을 복습하였다.BOM / DOM / 자바스크립트 파일 효과적으로 가져오기 / ThisBOMBOM이란 브라우저 객체 모델을 뜻한다. 브라우저 객체 모델이란 브라우저를 객체처럼 여기는 것을 말한다.연산자는 " . "이다. 가장 많이 쓰는 것은 document이다. 자세한 부분은 영상을 참고하자.https://youtu.be/3c4xp8U3jjM?si=9DXZHx1Ly6YAWI-A참고로 window가 가장 최상위 객체이다. BOM은 그 밑에 존재하는 객체다. 이 부분을 헷갈려하지 말자.DOMDOM이란 문서 객체 모델을 뜻한다. 문서 객체 모델이란 "문서를 객체화"한 것을 말한다. 스크립트 언어로 브라우저를 해.. 2024. 8. 18. 처음 만난 리액트 V2 (로드맵) 카카오 구름 EDU에서의 "처음 만난 리액트 V2"이다. 소플님이 진행하신 강의이다. 이 강의는 버전 1 / 버전 2가 존재한다. 버전 1은 2020년이고 버전 2는 2022년에 나왔다. 그래서 최신 버전으로 진행하게 되었다.이 글은 한 번 로드맵을 정리할 겸해서 작성하게 되었다.로드맵은 위의 사진과 같다. 물론 리액트의 "전체"는 아니지만, 그래도 많은 부분을 내포하고 있다.특히 컴포넌트와 렌더링, JSX , 엘리먼트 등등... 중요 개념들은 무조건 배우고 넘어간다고 보면 된다.배우면서 느낀 점.새로운 개념들이기는 하지만, 어디까지나 리액트는 "자바스크립트"을 좀 더 잘 다루기 위한 라이브러리이기 때문에, 어느 정도 친숙한 부분도 존재한다. 본질적으로 볼 때에는 똑같다. ("객체" / "함수"라는 본질.. 2024. 8. 11. 리액트 삽질 < 매우 중요 (이 삽질은 카카오 구름 강의를 들으면서 생기게 되었는데..)npm start로 리액트 앱을 가져오는데... 이때 호완성, 버전 등 여러 문제 때문에 에러가 나고 있다. 처음엔 내가 친 코드가 문제인 줄 알고 있었지만,"챗 지피"을 노동 착취한 결과 몇 가지 힌트를 얻게 되었다.이게 오류가 나고 있는 문법인데... 문제는 "챗지피"에 의거하면 현재 코드를 보면, React 18에서 ReactDOM.createRoot를 사용하지 않고 ReactDOM.render를 사용하고 있기 때문에 오류가 발생하고 있습니다. ReactDOM.render는 React 18에서 제거되었고, 대신 ReactDOM.createRoot를 사용해야 합니다.- 챗 지피티-이게 맞다면 이미 제거된 문법을 나는 배우고 있다는 셈이 되.. 2024. 8. 8. 리액트 기초 역시 형이야. 믿고 있었어https://youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP&si=9gcW-e4b6OS_2ql4 2022 코딩애플 리액트 강의 www.youtube.com(리액트 기초로 블로그 프로젝트 만들기 영상)//https://youtu.be/qcphnSqneE0?si=mLI1Ua6dPPLv9c7f(이건 코딩 알려주는 누나 영상)더 딥한 건 다른 영상 참고하자.https://www.youtube.com/playlist?list=PLo3AHtncM26y0qX58gjc_QrkYlBCzQ2R_ 처음 만난 리액트 v2새롭게 리뉴얼 된 '소플의 처음 만난 리액트' 강의입니다.www.youtube.com(구름 - 소플) 2024. 8. 3. HTML - Sementic Tag Sementic Tag란시멘틱 태그(Sementic Tag)에서 Sementic의 사전적 의미는 "의미론적"이라는 뜻으로, HTML에서 시멘틱 태그란 "의미를 가지는 태그"를 말한다.가령 제목과 같이 큰 글씨를 나타낼 때 태그를 사용하여 나타낼 수 있다. 태그는 페이지 제목이라는 의미를 갖고 있다.반면 태그에 style을 입혀 태그와 동일한 스타일을 표시할 수 있다. 하지만 이것은 HTML 의미(Sementic)를 제대로 살리지 못한 것 이기 때문에 지양할 필요가 있다.페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미 있는 Sementic Tag를 사용하길 권장함.HTML Sementic Elements : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. : 다른 .. 2024. 7. 21. JavaScript 무료 풀강의 프론트엔드는 기본적으로 HTML / CSS / JavaScipt 이 기본 베이스이며 이에 더해 여러 라이브러리와 프레임워크가 결합된 것이라고 생각하면 됨. 이 때에 자바스크립트는 정말 많은 역할은 해줌. (사실상 메인) 또한 앞에 HTML / CSS는 "마크업 언어"라서 실질적인 코딩 언어라고 부르기 어렵지만, 자바스크립트는 "고급 언어"임. 다음은 자바스크립트 강의 목록임. 이 밖에도 많은 강의들이 존재한다.https://www.youtube.com/watch?v=ZOVG7_41kJE&list=PLLqUmIoAEUCRlPhypkA-k-5Dgw-NiR_wz&index=72024 버전https://www.youtube.com/playlist?list=PLlaP-jSd-nK-nRWstWs_MvCWhVHb7A.. 2024. 7. 12. CSS Flexbox / Grid css에서 Flexbox 와 Grid는 정말 중요한 개념이다. 이에 대한 설명은 밑의 영상을 참고하자. (아, 그리고 "절대 하나 하나 처 외우지 말 것)https://youtu.be/7neASrWEFEM?si=LVytunQ_Ozp0U2Ww플렉스박스https://youtu.be/nxi1EXmPHRs?si=TLNpAK_XtDSRaKXD그리드알아두면 좋은 사이트 (플레스 박스 / 그리드)https://codepen.io/enxaneta/full/adLPwv/(플렉스 박스 레이아웃 체킹) Flexbox playground...codepen.iohttps://www.joshwcomeau.com/css/interactive-guide-to-grid/(그리드 작동 원리) An Interactive Guide to .. 2024. 7. 12. MDN 웹 문서. (프론트 엔드를 위한 태그 모음) https://developer.mozilla.org/ko/ MDN Web DocsThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.developer.mozilla.org HTML / CSS 태그 하나 하나 외우기 금지. 현업하는 분들도 모르면 검색하면서 만듭니다. 이거 ㄹㅇ 반박불가 ㅇㅈ? 2024. 7. 10. 이전 1 2 3 4 5 다음
