본문 바로가기

🖥️ Frontend25

💟프론트💟 - 모던 웹을 위한 상세한 CSS background 이해 CSS ReferenceCSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.cssreference.io참고💟 CSS background 관련 프로퍼티 background-repeat 프로퍼티!!!배경 이미지가 요소 사이즈보다 작을 때 반복해서 해당 사이즈를 채울 것인지를 설정repeat,space,round,no-repeat 반복 세부 설정 가능여러 개 이미지 덮기 가능여러 개 이미지 각자 세부 설정 가능  background-size 프로퍼티 background-attachment 프로퍼티fixed .. 2023. 10. 1.
💟프론트💟 - 모던 웹을 위한 CSS 박스모델 이해 잔재미코딩 - 풀스택을 위한 탄탄한 프런트엔드 부트캠프CSS 박스 모델box 형태의 세부 사항 수정 가능 대표적 박스 요소컨텐트는 항상 안 보이는 보더가 있고 그 사이에 패딩 존재마진도 지정 가능  width / height 프로퍼티 box-sizing 프로퍼티:  content-box로 지정=> width/height : content 영역의 너비 높이 됨 box-sizing 프로퍼티:  border-box로 지정=> width/height  : content+padding+border 영역의 너비 높이 됨 컨텐츠가 지정된 width height를 넘치면 영역 밖으로 나감 => overflow 프로퍼티를 hidden으로 설정하여 넘친 컨텐츠 감추기+ max-width / max-height 프로퍼티요소.. 2023. 9. 28.
💟프론트💟 - 모던 웹의 핵심 상세한 CSS 기본 잔재미코딩 강의 -풀스택을 위한 탄탄한 프런트엔드 부트캠프CSSCascading Style SheetsHTML로 구조화된 문서를 어떻게 브라우저 상에 렌더링할지 표현 기법 정의하는 언어화면 렌더링 표현 방법 정의  HTML 과 연동하는 방법1. 적용할 태그에 style 속성으로 넣기2. HTML 문서 head 안에 style 태그로 넣기3. HTML 문서 head 안에 css 파일로 링크하기 3번을 제일 많이 사용~  Reset  CSS웹브라우저마다 다른 default 스타일 설정 -> 초기화하여 다양한 웹브라우저에서도 동일한 스타일로 표시하기! 실무에서 필요에 의해 임의로 만든 설정 normalize.css 사용 ( 기본 스타일은 남기고 / 브라우저별로 다를 부분만 초기화 )head에 링크시켜주기!CS.. 2023. 9. 26.
💟프론트💟 - 모던 웹 기본 기술 이해 그래.. 리액트 하겠다고 나댓는데..js 옛날에 공부한 거 다 까먹은 거 음박치기하면 될줄대학생 되면 정해진 길이 없다! 공부할 거 자기가 정하는 거다! 우와~가 아니었어요 길을 못찾겠어요 여기가 어디죠 어디로 가야 하는거난 프론트 스터디원 아니지만~몰래 썌비지 해서 강의 나두 들어야지20시간? 세미나도 끝냈겠다 중간고사 본격 공부 전에 부숴버리겠어0강0-1강0-2강0-3강0-4강챗지피티 잘 사용하자\4유료결제해야 하나1-1강 html태그와 속성 사이 , 속성과 속성 사이에는 한 칸 띄어야 함css프로퍼티와 값 사이 띄어쓰기 없어도 됨 css Selecter ES6 :ECMAScript 의 약자 / 숫자 6은 여섯번째 ES (프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격)1-2강 Emmeth.. 2023. 9. 25.
⚛️ React ⚛️ - 2.리액트 프로젝트 만들기 내일 아침에 이어서.. CPA (create-react-app) : 리액트 프로젝트 제작 npx (node pakage program) 리액트 웹 애플리케이션은 CRA라는 프로그램으로 node.js 프로젝트를 생성하여 제작 npx create-react-app fir_react --template typescript package.json CRA로 생성한 프로젝트에는 항상 이 파일 존재 터미널에서 npm start 명령을 실행하면 이 파일 내에서의 react-scripts start 명령 실행 npm run start - start 명령 : 프로젝트를 개발 모드로 실행 npm run build - build 명령 : 프로젝트를 빌드 모드로 실행 웹팩 webpack : 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러 다양.. 2023. 9. 11.
⚛️ React ⚛️ - 1. 리액트 개발 준비 ⚛️ 싱글 페이지 애플리케이션 / SPA 멀티 페이지 애플리케이션 : 사용자 요청이 있을 때마다 완전히 새로운 HTML을 전달받는 기존 방식 (HTTP 요청 -> HTTP 응답 -> 렌더링 (반복)) 주소 창으로 요청하는 자원이 하나뿐 -> 렌더링을 지우는 과정에서의 깜빡임 노노 !이거! 내가 아빠 생일 프로그래밍 만들 때 엄청 고심한 거잖아! SPA로 하면 되는구낭 리액트 : 싱글 페이지 애플리케이션을 만드는 프런트엔드 자바스크립트 프레임워크 ⚛️ 클라이언트 동작 템플릿 엔진 프엔은 백에서 제공하는 json 데이터를 해석하여 자바스크입터 객체들의 조합을 얻은 후 이것을 웹이 이해할 수 있는 DOM 객체로 변환해줘야 함 프엔 프레임워크는 자바스크립트 객체를 DOM 객체로 전환해 주는 역할을 수행 프론트엔.. 2023. 9. 4.
👩🏽‍🦱니꼬쌤 클론코딩 :🍨바닐라 JS로 그림 앱 만들기🍨 🍦바닐라 JS로 그림 앱 만들기🍦 바닐라 JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders HTML, CSS, JS nomadcoders.co 🍦완강🍦 🔳사각형 그리기 🔳 - 사각형 선 그리기: ctx.rect(x, y, w, h); (선의 색이 적용되지 않아서 보이지 않음) -> 다음 줄에 ctx.stroke() : 테두리 그리기 -> ctx.fill() : 채우기 fillrect - 끊어가기를 원하는 곳 맨 앞에 ctx.beginPath(); 추가해 새 경로 만들기 - moveTo(x, y); -> 브러쉬의 좌표를 움직여줌 - lineTo(x, y) -> 라인을 그려줌 🍦코드🍦 index.html 🩸 Fill 💣 Destroy ❌ Erase 💅🏻 Add Photo 🖼 Save image .. 2023. 7. 27.
👩🏽‍🦱니꼬쌤 클론코딩 :🍦바닐라 JS로 크롬 앱 만들기 무료강의! 언제나 클론코딩을 해보고싶었지! 백엔드 공부중이지만 사실 난 프론트공부를 하고싶었지! 인스타 팔로우와 유튜브 구독을 하는 난 니꼬쌤의 팬이지! 🍦바닐라 JS로 크롬 앱 만들기🍦 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다. 🍦강의 수강 & 메모🍦 🍦수업 결과물🍦 background.js const images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg".. 2023. 7. 2.
<HTML.CSS.JS> 개미 생일 가위바위보 게임 시간 지연 -- setInterval / setTime setTimeout과 setInterval을 이용한 호출 스케줄링 ko.javascript.info object / entey Object.entries() - JavaScript | MDN Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). developer.mozilla.org JS var imageWhere = 0 var dictionary = { //딕셔너리자료구조 rock : '0', scissor : '-10px', paper :'-20px' }; f.. 2022. 8. 21.
<HTML.CSS.JS>로또 추첨 게임 제로초님의 강의를 보고 만들었습니다. 실행 링크 https://RoTTo.goldchae.repl.co Lottogame ** 당첨 숫자 ** * 보너스 숫자! * 도박문제 전문상담 1336 RoTTo.goldchae.repl.co -array(숫자) 숫자만큼의 공간이 있는 빈 배열 생성 -empty는 반복 불가 -배열 map() 메서드 -Math의 random() 함수는 진짜 랜덤하지 않다. "유사난수" 사용. https://ko.wikipedia.org/wiki/%EC%9C%A0%EC%82%AC%EB%82%9C%EC%88%98 -splice() 함수 splice(a) a(인덱스번호)부터 끝까지 가져옴 splice(a,b) a부터 끝까지 - slice()함수 slice(a,b) a(인덱스번호)부터 b까.. 2022. 8. 4.

티스토리툴바