odada

리액트 기본기능 첫 컴포넌트 만들기 App.js 파일에 Header, Body, Footer 컴포넌트를 만들어보자. import React from 'react' const Header = () => { return ( Header ) } const Body = () => { return ( Body ) } const Footer = () => { return ( Footer ) } function App() { return ( ) } export default App 컴포넌트 분리하기 Header, Body, Footer 컴포넌트를 따로 파일로 분리해보자. // Header.js import React from 'react' const Header = () => { retu..

React 비동기 처리1. 뉴스 API 데이터 가져오기- 뉴스 API 키 발급무료 뉴스 API 추천The Guardian APINew York Times API2. useEffect로 데이터 가져오기useEffect(() => { ... }, [deps])useEffect는 함수 컴포넌트에서 부수 효과를 수행할 수 있도록 하는 Hook이다. useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.// src/News.jsimport React, { useEffect, useState } from 'react';function News() { const [news, setNews] = useState([]); useEffect(() => { fetch(..

gitingnore 파일 만들기 gitignore 파일은 git으로 관리하지 않을 파일을 지정하는 파일이다. gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일 생성 gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일의 이름은 .gitignore이다. gitignore 파일 작성 # 폴더명/ : 폴더명의 모든 파일 무시 css/ # 파일명 : 파일명의 파일 무시 comm.css comm.css.map #폴더명/파일명 폴더명/파일명 # 확장자가 .txt인 파일 무시 *.txt # 윗 라인에서 확장자가 .txt인 파일은 무시하게 했지만 lib.a는 무시하지 않는다. !lib.txt gitignore 파일 적용이 안될 때 ign..

Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP)패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현1. CSS를 이용한 패럴랙스 스크롤링css perspective 속성을 이용한 패럴랙스 스크롤링해당 요소의 z = 0 평면과 사용자 사이의 거리transform 효과를 주고자 하는 부모 요소에 적용perspective에 따른 변형 효과perspective: 100px; => 100px만큼 멀어져 보임perspective가 클수록 (거리가 멀수록..

flexbox로 레이아웃 만들기 flexbox란? flexbox는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flexbox는 여러 요소들 사이의 공간 배분과 정렬 기능을 제공하여, 강력한 분산형 레이아웃을 제공합니다. flexbox의 구성 flex container: flexbox를 적용할 요소 flex item: flex container의 자식 요소 flexbox layout 만들기 1. layout1 - 스크롤 없는 100% 높이의 레이아웃 header main aside footer /* css */ :root { --hdH: 70px; --ftH: 70px; } #wrap { max-width: 1280px; margin: 0 auto; ..

box model - css 배우기 https://www.w3schools.com/css/css_boxmodel.asp 모든 HTML 요소는 박스 모델을 가지고 있다. width 요소의 너비를 지정한다. auto (기본값 100%) 브라우저가 너비를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { width: 1280px; } height 요소의 높이를 지정한다. auto (기본값 0) 브라우저가 높이를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { height: 500px; } max-width 요소의 최대 너비를 지정한다. none (기..

background 속성 - css 배우기 background 배경 이미지를 지정한다. background: url('https://www.w3schools.com/css/img_fjords.jpg'); https://www.w3schools.com/css/css_background.asp background-color 배경 색상을 지정한다. background-color: red; background-image 배경 이미지를 지정한다. background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-repeat 배경 이미지 반복을 지정한다. background-repeat: repeat-x; ..

font & text 관련 css font https://www.w3schools.com/css/css_font.asp font-family 글꼴을 지정한다. font-family: 'Times New Roman', Times, serif; font-family: Arial, Helvetica, sans-serif; web font 웹폰트란 로컬에 설치된 글꼴이 아닌 서버에서 제공되는 글꼴을 말한다. - google font https://fonts.google.com/ 구글 폰트 사이트에서 사용하고 싶은 폰트의 상세페이지로 이동한다. font-weight, font-style을 선택한다. 장바구니에 담긴 CDN 주소를 복사해 html 파일 내 head 태그에 추가한다. 또는 @import..

layout 관련 속성 block (기본값) width, height 속성을 가질 수 있다. margin, padding 속성을 가질 수 있다. div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, table, header, footer, section, article, nav, aside, blockquote, address 등 보였다 안보였다 .show { display: block; } .hide { display: none; } inline width, height 속성을 가질 수 없다. margin-top, margin-bottom, padding-top, padding-bottom 속성을 가질 수 없다. span, a, img, input, button, s..

CSS 기초 CSS란? Cascading Style Sheets (CSS)는 HTML이나 XML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. CSS는 HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS의 장점 HTML의 내용과 스타일을 분리할 수 있다. 스타일을 변경할 때 HTML을 수정할 필요가 없다. 웹 페이지의 로딩 속도를 향상시킬 수 있다. 스타일을 적용하는 방법이 다양하다. CSS의 구문 https://www.w3schools.com/css/css_selectors.asp 선택자 { 속성: 값; } 선택자(selector): HTML 요소를 선택한다. 속성(property): 스타일을 지정한..