this.code();

📌 배열 랜더링하기

📌 useRef로 컴포넌트 내부 변수 생성하기

📌 배열에 항목 추가하기

📌 배열에 항목 제거하기

📌 배열에 항목 수정하기

🤔 배열 랜더링하기.
가령 아래와 같은 배열이 있을 때, 

const users = [
  { id: 1,
    username: 'velopert',
    email: 'public.velopert@gmail.com' },
  { id: 2,
    username: 'tester',
    email: 'tester@example.com' },
  { id: 3,
    username: 'liz',
    email: 'liz@example.com' }
];

이 내용을 컴포넌트로 랜더링 하고, 컴포넌트를 재사용 할 수 있게 한다면?

UserList.js

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  return (
    <div>
      <User user={users[0]} />
      <User user={users[1]} />
      <User user={users[2]} />
    </div>
  );
}

export default UserList;

---

🤔 만약, 동적인 배열을 랜더링 해야한다면? → map() 을 사용!!
map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만든다.
react에서 동적인 배열을 랜더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 react element로 이루어진 배열로 변환해주면 된다.

다만, react에서 배열을 랜더링할 때는 key라는 props를 설정해야 한다.

UserList.js

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하면 된다.

Ex)

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

cf. useRef (https://chan4im.tistory.com/190)

🤔 useRef로 컴포넌트 안의 변수 만들기
useRef의 Hook은 2가지 용도가 있다.
1. DOM 선택 용도
2. 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 용도

관리를 위한 변수
∙ setTimeout, setInterval을 통해 만들어진 id
∙ 외부 라이브러리를 사용해 생성된 인스턴스
∙ scroll 위치

Ex) UserList에서 컴포넌트 내부에 배열을 직접선언하는 대신, App에서 배열을 선언, UserList에게 props로 전달하는 예제

UserList.js

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

App.js

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

App 에서 useRef() 를 사용하여 nextId 라는 변수를 생성하며,

useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.

그리고 이 값을 수정 할때에는 .current 값을 수정하면 되고 조회 할 때에는 .current 를 조회하면 된다.

먼저 input 2개와 button 1개로 이루어진 CreateUser.js라는 컴포넌트를 src디렉토리에 추가

import React from 'react';

function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  );
}

export default CreateUser;

🤔 배열에 항목 추가하기
위의 CreateUser에서 컴포넌트의 상태관리를 하지 않고
부모 컴포넌트인 App에서 상태관리를 진행, input값 및 이벤트 등록 함수들은 props로 넘겨받아 사용해보자.

이 컴포넌트를 App에서 UserList위에 랜더링 해보자.

App.js

import React, { useRef } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
  };
  return (
    <>
      <CreateUser />
      <UserList users={users} />
    </>
  );
}

export default App;

CreateUser 컴포넌트에게 필요한 props를 App에서 준비,
그 후, users에도 useState를 사용해 컴포넌트의 상태로서 관리.

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

이제 배열에 변화를 줘야하는데, 이때 객체와 마찬가지로 불변성을 지켜줘야 한다.
따라서 배열의 push, splice, sort 등의 함수는 사용X
if, 사용해야할 때, 기존 배열을 한번 복사한 후 사용해야함.

📌 불변성을 지키면서 배열에 새 항목을 추가하는 방법
1. spread 연산자 사용
2. concat 함수 사용


- spread 연산자 사용(App.js)

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

- concat 함수 사용(App.js)

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

우선, UserList에 각 User 컴포넌트에 대해 삭제 버튼을 랜더링.

UserList.js

import React from 'react';

function User({ user, onRemove }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} onRemove={onRemove} />
      ))}
    </div>
  );
}

export default UserList;

🤔 배열에 항목 제거하기
이때, User 컴포넌트의 삭제버튼이 클릭될 때, user.id값을 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어 호출해야
한다. (onRemove함수는 "id가 ~인 객체를 삭제하라"는 역할)
이때, onRemove함수는 UserList에서도 전달받고, 이를 그대로 User 컴포넌트에게 전달한다.


이제 onRemove를 구현해보자.
배열에 있는 항목제거 시, 추가할 때와 마찬가지로 불변성을 지켜가며 업데이트 해줘야 한다.
이때, filter라는 배열 내장 함수를 사용하는 것을 추천!!

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

  const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
}

export default App;

먼저 App 컴포넌트의 users 배열 안의 객체 안에 active라는 속성을 추가하자.

App.js 

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

  const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };

  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    </>
  );
}

export default App;​

🤔 배열에 항목 수정하기
User 컴포넌트에 계정명 클릭 시, 색상이 초록색으로 바뀌고 다시 누르면 검정색으로 바뀌도록 하는 구현

이제, User 컴포넌트에서 active 값에 따라 폰트색이 바뀌도록 해보자.
cf. cursor 필드를 설정해 마우스를 올렸을 때, 손가락 모양으로 바뀌도록 하자.

UserList.js

import React from 'react';

function User({ user, onRemove }) {
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
      >
        {user.username}
      </b>

      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} onRemove={onRemove} />
      ))}
    </div>
  );
}

export default UserList;

 

이제 App.js 에서 onToggle 이라는 함수를 구현, 
배열의 불변성을 유지하면서 배열을 업데이트 할 때에도 map 함수를 사용 할 수 있다.

id 값을 비교해서 id 가 다르다면 그대로 두고, 같다면 active 값을 반전시키도록 구현을 진행,

onToggle 함수를 만들어서 UserList 컴포넌트에게 전달한다.

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

  const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };
  const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    </>
  );
}

export default App;

그 다음에는 UserList 컴포넌트에서 onToggle를 받아와서 User 에게 전달해주고, onRemove 를 구현했었던것처럼 onToggle 에 id 를 넣어서 호출하자.

UserList.js

import React from 'react';

function User({ user, onRemove, onToggle }) {
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

https://chan4im.tistory.com/190

앞선 과정에서 react 컴포넌트를 만들 때, 동적인 부분은 하나도 없었다.

즉, 값이 바뀌는 일이 없었지만, 이번에는 사용자의 interaction에 따른 변화가 필요할 때, 어떻게 구현할 수 있는지 알아볼 필요가 있다.

Ex. 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 생성해보자!

Counter.js

import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

📌 이제, Counter에서 버튼이 클릭되는 이벤트가 발생한다면?

→ 특정 함수가 호출되도록 설정해보자.

여기서 onIncrease 와 onDecrease 는 화살표 함수를 사용해 button의 onClick 으로 함수를 연결해주었다.

즉, react에서 element에 이벤트 설정시, 다음의 형태로 설정한다.

on이벤트이름 = {실행하고싶은 함수}

Counter.js

import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

cf. =>함수 참고

-  좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어온다.

(https://learnjs.vlpt.us/basics/05-function.html#%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98)

🤔 동적인 값에 대한 컴포넌트 상태관리, useState..?

Ex. 아래 코드는 react 패키지에서 useState라는 함수를 불러온다.
이때, Setter함수는 param에서 전달받은 값을 최신값으로 설정한다.

Counter.js

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

InputSample.js

import React from 'react';

function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default InputSample;​

App.js

import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;​

여기에 대해, input에 입력하는 값이 아래에 나타나고, 초기화버튼을 누르면 input 값이 비워지도록 구현해보자.

useState를 사용, input의 onChange 이벤트를 사용할 때,
이벤트에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있고,
이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르키게 된다.
이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있으며, 이 값을 useState를 통해 관리해주면 된다.

InputSample.js

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

🤔 useRef로 특정 DOM 선택하기
JS에서 특정 DOM을 선택해야할 때, getElementId, querySelector 같은 DOM Selector함수를 사용해 DOM을 선택한다.

React에서도 가끔 DOM을 직접 선택하는 상황이 발생하는데, 이때 ref라는 것을 사용한다.
함수형 컴포넌트에서 ref사용 시, useRef라는 Hook함수를 사용한다.


Ex) 초기화 버튼 클릭 시, 이름 input에 포커스가 잡히는 기능 구현

InputSample.js


import React, { useState, useRef } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  const nameInput = useRef();

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.

🤔 React 라이브러리...?

 

JS를 사용해 HTML로 구성된 UI를 제어했다면, DOM 변형을 위해 아래와 같은 과정을 따른다.
1. Selector API를 사용해 특정 DOM을 선택
2. 특정 이벤트가 발생 시, 변화를 주도록 설정

다만, 웹의 규모가 커지게 되면, DOM을 직접 건드릴 때 코드가 난잡해지기 쉽다.
처리해야할 이벤트, 관리해야할 상태값, DOM 등이 다양해지기 때문.
이로 인해 업데이트 규칙도 많이 복잡해지게된다.

React는 어떤 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 방식이 아닌, 아예 다 날려버리고 처음부터 새로 만드는, 가상의 DOM인 Virtual DOM방식을 사용한다.

Ex.

import React from 'react';

를 통해 react 컴포넌트를 불러온다.
react 컴포넌트는 XML형식의 값을 반환하는데, 이를 JSX라 부른다.

export default Hello;

이는 Hello라는 컴포넌트를 내보내겠다는 의미로 다른 컴포넌트에서 불러와 사용할 수 있다.
ex)

import Hello from './Hello';

import React from 'react';

function Hello() {
    return (
            <div>
                Hello World
            </div>
        );
}

export default Hello;

🤔 JSX...?

JSX는 react의 생김새를 정의할 때 사용하는 문법으로 HTML같이 생긴 JS이다.

return <div>안녕</div>;

react 컴포넌트 파일에서 XML형태로 코드를 작성하면 babel이 JSX를 JS로 변환한다.
babel: JS의 문법을 확장해주는 도구

ex)

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

📌 JSX에서 태그의 style, CSS의 class를 설정하는 방법
1. 인라인 style은 객체형태로 작성
2. HTML에서 -로 구분되는 단어는 camelCase형태로 작성
3. CSS의 클래스는 className= 으로 설정

cf. 주석은 {/**/} 나 // 을 사용함.
를 사용해 HTML로 구성된 UI를 제어했다면, DOM 변형을 위해 아래와 같은 과정을 따른다.
1. Selector API를 사

📌 props를 통해 컴포넌트에 값 전달하기
- properties의 줄임말로 컴포넌트에 값을 전달하기 위해 사용.

Ex) App 컴포넌트에서 Hello컴포넌트의 name이라는 값을 전달하고 싶다면?

∙Hello.js 컴포넌트

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

∙App.js 컴포넌트

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

 

cf) 여러개의 props를 전달하고자 한다면?

∙App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;​

∙Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

 

defaultProps 로 기본값 설정

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

Javascript에서 객체란?
웹, 프로그램에서 인식가능한 모든 대상으로 JS에서 사용하는 객체는 다음과 같다.

∙내장 객체 : 웹프로그래밍 시 자주 사용하는 요소는 JS에 미리 객체로 정의되어 있다.

∙브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체이다.

∙문서객체모델(DOM) : 웹문서 내부 삽입된 링크는 물론, 웹문서 그 자체도 객체이다.

1.  기본적인 객체의 인스턴스 만들기

📌 객체의 인스턴스 만들기

new 객체명

ex)
let current = new Date();
document.write("현재 시각은 " + now.toLocaleString());

2.  Javascript의 내장 객체

• 🤔 Array 객체
• 🤔 Date 객체
• 🤔 Math 객체

🤔 Array 객체

◼︎ Array 객체로 배열 만들기

let num = new Array(4);	// 배열크기가 4인 num배열 선언


let arr = ['a', 'b', 'c', 'd'];

for (let i = 0; i < arr.length; i++){
	document.write("<p>" + arr[i] + "</p>");
}

◼︎ Array 객체 메서드
∙ concat
∙ every
∙ filter
∙ forEach
∙ indexOf : 주어진 값과 일치하는 배열요소의 첫 인덱스를 찾는다.
∙ join : 배열 요소를 문자열로 합치며 구분자를 지정 가능
∙ push : 맨끝에 요소 추가
∙ unshift : 시작부분에 요소 추가
∙ pop : 맨끝 요소 반환
∙ shift : 첫 요소 반환
∙ splice : 배열에 요소 추가/삭제
∙ slice : 배열에 특정부분 잘라냄
∙ reverse 
∙ sort
∙ toString : 배열에서 지정한 부분을 문자열로 반환, 요소는 (,)로 구분

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

🤔 Date 객체

◼︎ Date 객체를 사용해 날짜와 시간을 지정.
- 이때, JS가 인식할 수 있는 형식으로 날짜와 시간을 써야한다.

    1. YYYY-MM-DD 형식
    2. YYYY-MM-DDTHH 형식
    3. MM/DD/YYYY 형식

new Date("2023-07-05")
new Date("2023-07-05T20:41:13")
new Date("02/28/2025")

◼︎ Date 객체 메서드

🤔 Math 객체
◼︎ 사용 방식

Math.프로퍼티명
Math.메서드명

ex)
Math.random()

◼︎ Math 객체 property 및 메서드

3.  브라우저 관련 객체

웹 브라우저 창에 문서가 표시되면 브라우저는 HTML소스를 한줄씩 읽으며 화면에 내용을 표시, 관련 객체를 생성한다.

4.  문서객체모델 (DOM)

📌 DOM 트리

📌 DOM 구성 기본원칙

• 모든 HTML 태그는 요소(element)노드이다.
• HTML 태그에서 사용하는 텍스트 내용은 자식노드인 텍스트 노드이다.
• HTML 태그의 속성은 자식노드인 속성노드이다.
• 주석은 주석(comment)노드이다.

🤔 DOM 요소에 접근하고 속성 가져오기

📌 DOM에 접근하기

// id 선택자로 접근하는 getElementById() 메서드
요소명.getElementById("id명")

// class값으로 접근하는 getElementByClassName() 메서드
요소명.getElementByClassName("class명")

// 태그 이름으로 접근하는 getElementByTagName() 메서드
요소명.getElementByTagName("태그명")

// 다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드
노드.querySelector(선택자)
노드.querySelectorAll(선택자 | 태그)

📌 웹 요소 내용을 수정하는 innerText, innerHTML 프로퍼티

요소명.innerText = 내용
요소명.innerHTML = 내용

📌 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

getAttribute("속성명")
setAttribute("속성명", "값")

 

🤔 DOM에서 이벤트 처리하기

📌 DOM 요소에 함수 직접 연결

📌 함수 이름을 사용해 연결

📌 DOM의 event 객체 알아보기

📌 addEventListener() 메서드 사용하기

📌 CSS 속성에 접근하기
 

🤔 DOM에서 노드 추가∙삭제하기

📌 노드 리스트란

📌 텍스트 노드를 사용하는 새로운 요소 추가

📌 속성값이 있는 새로운 요소 추가

📌 노드 삭제하기

📌 CSS 속성에 접근하기
 

이후 추가작성

(Typescript로 부트캠프가 방향을 선회해버려서...)

📌 변수 선언하기

var age = 23;​

 

cf. 만약 var 명령어를 빼게 된다면, 이는 전역변수를 의미한다.

🤔 HTML 파일에 코드 입력하기

<body></body> 태그 사이에 소스코드 입력

<!DOCTYPE html>
<html lang="kor">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
            var currentYear = 2023;
            var birth, age;

            birth = prompt("태어난 년도를 입ㅕ하세요. (YYYY)", "");
            age = currentYear - birth + 1;
            document.write(currentYear + "년 현재<br>");
            document.write(birth + "년 생의 현재 나이는" + age + "세 입니다.");
    </script>
</body>
</html>

📌 Javascript의 자료형

cf. undefined: 자료형이 정의되지 않을 때의 데이터 상태 (즉, 변수에 값이 할당되지 않았음을 의미)
cf. null: 데이터의 값이 유효하지 않은 상태 (즉, 할당은 되었지만 할당된 값이 유효하지 않음을 의미)


📌 Javascript의 조건문

if (조건) {
}
else {
}

📌 Javascript의 반복문

for(let i= 1; i < 6; i++) {
	sum += i;
}

while(let i < 6) {
	sum += i;
    i++;
}

📌 함수의 사용 in Javascript

function 함수명() {
	명령
}

ex) 
<script>
    function AddNum() {
        var n1=2;
        var n2=3;
        var sum = n1 + n2;
        alert("결과:" + sum);
    }

    AddNum();
</script>

<script>
    function AddNum(num1, num2) {
        var sum = num1 + num2;
        return sum;
    }
	var res = AddNum(3, 5);
    document.write(res);
</script>

🤔 let과 const
var를변수 선언시 보통 사용하며, var를 사용하지 않으면 자동으로 전역변수가 되어 버린다.
이를 방지하고자 let, const를 사용한다.

추가적으로 var, let, const의 가장 큰 차이는 scope 범위이다.
 ∙var: 함수영역의 스코프
 ∙let과 const: 블록영역{ }의 스코프
    - 보통 let 은 가변변수, const는 상수변수에 사용된다.


📌 Javascript 변수사용 Tip!
1. var 변수는 함수 시작부분에서 선언!
2. for문에서 counting변수는 var 예약어 사용X (let 사용)
3. 보통 var보다 let을 주로 사용하는 것이 좋다.
4. 전역변수는 최소한으로 사용.

🤔 이벤트와 이벤트 처리기

📌 이벤트 처리기

<태그 on이벤트 = "함수명">

ex)
<body>
	<ul>
    	<li><a href="#" onclick="changeBg('green')">Green</a></li>
        <li><a href="#" onclick="alert('green')">Green</a></li>
    </ul>
</body>

📌 외부 스크립트 파일로 연결해 자바스크립트 작성하기

<script src="외부 스크립트 파일 경로"></script>

ex)
<body>
	<h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭하세요</p>
    
    <script src="js/color.js"></script>
</body>​

🤔 JS 용어 및 기본 입출력 방법

◼︎ 식과 문 (expression. &. statement)
연산식, 문자열, 숫자도 식이다.

inch * 2.54	  // 연산식
"안녕하세요?";	// 문자열
5	         // 숫자

◼︎ 알림 창 출력하기 - alert(메세지)
◼︎ 확인 창 출력하기 - confirm(메세지)
◼︎ 프롬프트 창에서 입력받기 - prompt(메세지)

var reply = confirm("정말 창을 새로고침 하시겠습니까?");

var name = prompt("이름을 입력하세요.", "홍길동");

◼︎ 웹 브라우저 화면에 출력을 담당하는 document.write()문

<script>
	var name = prompt("이름을 입력하세요.");
    document.write("<b><big>" + name + "</big></big>님, 환영합니다.");
</script>

◼︎ 콘솔 창에 출력하는 console.log()문

<body>
	<h1>어서오세요</h1>
    
    <script>
    	var name = prompt("이름을 입력하세요.");
        console.log(name + "님, 환영합니다.");
    </script>
</body>

responsive  web  design

• 반응형 웹  &  미디어 쿼리
• 그리드 레이아웃  [플렉스 박스 레이아웃 &  CSS 그리드 레이아웃]

1. 반응형 웹  &  미디어 쿼리

🤔 반응형 웹 디자인이란?
기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시하기 위해 반응형 웹 디자인을 사용한다.
반응형 웹 디자인은 웹 요소를 화면크기에 맞게 재배치, 각 요소의 표시방법만 바꾸어 사이트를 구현한다.


📌 viewport ?
뷰포트(viewport)를 이용해 모바일 기기에 적합한 사이트를 제작할 수 있다.

◼︎ Viewport 지정하기

<meta name="viewport" content="속성1=값", "속성2=값", ...>

이와 같이 content 속성을 이용해 뷰포트 속성과 속성값을 지정하며 content 안에서 사용하는 뷰포트의 속성은 다음과 같다.
   ∙ width
   ∙ height
   ∙ user-scalable
   ∙ initial-scalable

단위: vw, vh, vmin, vmax

<style>
	h1 {
    	font-size: 5vw;
        text-align: center;
    }
</style>

<h1>안녕하세요</h1>

🤔 미디어 쿼리(media queries)란?
CSS의 모듈로 사이트에 접속하는 장치에 따라 특정 CSS스타일을 사용하는 방법.
즉, 접속 기기의 화면 크기에 따라 레이아웃이 달라진다.

◼︎ Media Queries 기본형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

ex)
@media screen and (min-width: 720px) and (max-width: 1440px) {
	...
}

위에 미디어 유형에 들어가는 미디어 유형의 종류는 다음과 같다.
   ∙ all : 모든 미디어 유형에서 사용할 CSS 
   ∙ print : 인쇄장치에서 사용할 CSS
   ∙ screen : 컴퓨터 및 스마트폰 스크린에서 사용할 CSS
   ∙ tv : 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS
   ∙ aural : 음성 합성 장치에서 사용할 CSS
   ∙ handheld : 태블릿 같은 장치를 위한 CSS
   ∙ projection : 프로젝터를 위한 CSS
   ∙ tty : 디스플레이 기능이 제한된 장치를 위한 CSS

/*웹 문서의 가로 세로 길이 속성*/
@media screen and (min-width: 1440px) {...}

/*단말기의 가로 세로 길이 속성*/
@media screen and (min-device-width: 375px) and (min-device-height: 812px) {...}

/*화면 회전 속성*/
@media screen and (min-device-width: 812px) and (orientation: landscape) {...}


============<미디어 쿼리 적용하기>============
/*외부 CSS파일 연결하기*/
방법 1.
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일경로">

방법 2.
@import url(css파일 경로) 미디어 쿼리 조건

/*웹 문서에 직접 정의하기*/
방법 1.
<style media="<조건>"> {
	<스타일 규칙>
}
</style>

방법 2.
<style>
	@media <조건> {
    	<스타일 규칙>
    }
</style>

조건 예시: screen and (max-width: 320px)
스타일 규칙 예시: background-color: orange;

2. 그리드 레이아웃 

🤔 그리드 레이아웃이란?
화면 너비에 따라 웹 문서의 요소를 재배치 해야하는데, 기준이 되는 레이아웃으로 사용하는 방법
웹 사이트를 여러 column으로 나눈 후 화면에 맞게 배치하는 방법

[그리드 레이아웃의 3가지 특징]
 - 시각적 안정된 디자인 생성가능
 - 업데이트가 편한 웹디자인 구성가능
 - 요소를 자유롭게 배치가능


◼︎ 그리드 레이아웃 생성방법

2-1.  플렉스 박스 레이아웃

2-2. CSS 그리드 레이아웃 사용

https://www.usefulparadigm.com/2017/03/31/a-few-ways-to-make-a-grid-layout/

https://learncoderepeat.tistory.com/40

transition과   animation

• transform
• transition
• animation

1. transform

transform: 함수

ex)
<style>
	.rot:hover {transform: rotate(50deg);}
    #pers {perspective: 300px}
</style>
...
<div class="origin">
	<div class="rot">
    	<img src="a.png" alt="">
    </div>
    <div class="origin" id="pers">
    	<div class="rot">
        	<img src="a.png" alt="">
        </div>
    </div>

• 함수 종류
  • translate(tx, ty)
    • translate3d(tx, ty, tz)
  • scale(sx, sy)
    • scale3d(sx, sy, sz)
  • rotate(degree)
    • rotate(rx, ry, degree) 
    • rotate3d(rx, ry, rz, degree)
  • skew(ax, ay)

2. transition

transition이란, 웹 요소의 배경색이나 도형의 테두리 등 스타일 속성이 바뀌는 것.

• transition 대상을 지정하는 transition-property 속성
• transition 실행시간을 지정하는 transition-duration 속성
• transition 실행 형태를 지정하는 transition-timing-function 속성
• transition 지연시간을 지정하는 transition-delay 속성
• 위 4 속성을 한꺼번에 정하는 transition 속성

transition-property: all | none | <속성 이름>
transition-duration: <시간>
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-beizer(n, n, n, n)
transition-delay: <시간>


ex)
transition-property: background-color; 
transition-duration: 2s, 1s;
trasition-timing-function: linear;
transition-delay: 2s

transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>

3. animation

• pass

CSS 고급 선택자

• 연결 선택자
• 속성 선택자
• 가상클래스와 가상요소

1. 연결 선택자

• 하위선택자와 자식선택자

• 하위선택자: 부모요소에 포함된 하위요소를 모두 선택
  • 자손선택자라 불리며, 모든 하위요소에 적용

상위요소 하위요소

section p {}
상위요소(section)  하위요소(p)


ex)
	section p {color: blue;}
</style>
...
<section> /*section의 모든 하위 p 요소에 적용 가능*/
	<p> ... </p>
    <p> ... </p>

• 자식선택자
  • 자식선택자는 한단계 아래까지만 적용

부모요소 > 자식요소

ex)
	section > p {color: blue;}
</style>
...

웹 문서에서 부모요소가 같은 경우, 형제관계라 한다.

이때, 먼저 나오는 요소를 형, 나중에 나오는 요소를 동생 요소라 한다.

• 인접형제선택자와 형제선택자

• 인접 형제 선택자

요소1 + 요소2


ex)
	h1 + p {color: blue;}
</style>

...

	<p>...</p>  /* 첫번째 형제인 이곳만 적용됨*/
    <p>...</p>

• 형제 선택자

요소1 ~ 요소2


ex)
	h1 ~ p {color: blue;}
</style>

...
	/*모든 형제요소 p에 적용됨*/
	<p>...</p>  
    <p>...</p>

2. 속성 선택자

• 특정 속성이 있는 요소를 선택하는 [속성] 선택자

• 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
• 단어별 여러값 중 특정값이 포함된 요소를 택하는 [속성 ~= 값] 선택자
• 특정 속성값이 포함된 속성요소를 선택하는 [속성 |= 값] 선택자
• 특정값으로 시작하는 속성요소를 택하는 [속성 ^= 값] 선택자
• 특정값으로 끝나는 속성요소를 선택하는 [속성 $= 값] 선택자
• 일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

Ex)
 /* href속성이 있는 a요소를 찾아 ...내용을 적용 */
a[href] {...}

/* <a target="_blank"> 인 요소를 찾아 ...를 적용 */
a[target = _blank] {...}

/*class값 중 button이 있는 요소에만 적용*/
[class ~= button] {...}

/* title 속성값에 us나 us-로 연결된 속성값이 있는 a요소를 찾아 적용 */
a[title |= us] {...}

/* title 속성값이 eng로 시작하는 a요소를 찾아 적용 */
a[title ^= eng] {...}

/* href에 링크된 파일이름의 마지막 단어가 xls를 찾아 적용 */
[href $= xls] {...}

/* href속성값 중 'w3' 이 포함된 요소 선택후 적용 */
[href *= w3] {...}

3. 가상클래스와 가상요소

• 가상 클래스
  • 사용자 동작에 반응하는 가상클래스
    • :link, :visited, :hover, :active, :focus

:link
 - 방문하지 않은 링크에 스타일을 적용

:visited
 - 방문한 링크에 스타일 적용

:hover
 - 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용

:active
 - 웹 요소 활성화 시, 스타일을 적용

:focus
 - 웹요소에 초점이 맞춰졌을 때, 스타일 적용

<style>	
    .navi ul li {
    	float: left;
        width: 150px;
        padding: 10px;
    }
    .navi a:link, .navi a:visited {
    	display: block;
        font-size: 14px;
        color: #000;
        padding: 10px;
        text-decoration: none;
        text-align: center;
    }
    .navi a:hover, .navi a:focus {
    	background-color: #222;
        color: #fff;
    }
    .navi a:active {
    	background-color: #f00;
    }
</style>

	<nav>
    	<ul>
        	<li><a href="#">이용안내</a></li>
            <li><a href="#">객실소개</a></li>
            <li><a href="#">예약방법 및 요금</a></li>
            <li><a href="#">예약하기</a></li>
        </ul>
    </nav>​

- 마우스를 위로 올리면 검은색으로 바뀌고, 클릭하면 붉은색으로 바뀜

• • 요소 상태에 따른 가상클래스: for 화면에서 요소상태에 따라 스타일 적용
    • :target 가상클래스 선택자
    • :enabled, :disabled 가상클래스 선택자
    • :checked 가상클래스 선택자
    • :not 가상클래스 선택자

📌 앵커 대상에 스타일 적용하기 (:target)

<style>
	#intro:target {
    	background-color: #0069e0;
        color: #fff;
    }
</style>

	<nav class="navi">
    	<ul>
        	<li><a href="#intro">이용 안내</a></li>
            <li><a href="#intro">객실 소개</a></li>
            <li><a href="#intro">예약방법 및 요금</a></li>
            <li><a href="ps-2.html">예약하기</a></li>
        </ul>
    </nav>
    <div id="intro" class="contents">
    	<h2>이용안내</h2>
        ...
    </div>
    <div id="intro" class="contents">
    	<h2>예약방법 및 요금</h2>
        ...
    </div>​

📌 선택된 라디오 버튼의 스타일 적용하기 (:checked)

<style>
	#signup input:checked + label {
    	color: red;
        font-weight: bold;
    }
</style>


	<ul>
        <li>
        	<input type="radio" name="room" id="basic">
            <label for="basic">기본형(최대 2인)</label>
        <li>
        <li>
        <input type="radio" name="room" id="family">
            <label for="basic">가족형(최대 8인)</label>
        </li>
    </ul>​

•  
•  
  • 구조 가상클래스
    • 특정위치의 자식요소 선택하기
      • :only-child
      • A:only-type-of
      • :first-child
      • :last-child
      • A:first-of-type
      • A:first-of-type
      • :nth-child(n)
      • nth-last-child(n)
      • A:nth-of-type(n)
      • A:nth-last-of-type(n)
    • 수식을 사용해 위치 지정하기

/* div요소에서 3번째 자식인 p요소에 스타일 적용 */
div p:nth-child(3)

/* div요소에서 홀수번째로 나타나는 자식인 p요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)

• 가상 요소
  • ::first-line, ::first-letter 요소
    • 첫번째 줄, 첫번째 글자에 스타일 적용
  • ::before, ::after 요소
    • 내용 앞뒤에 콘텐츠를 추가

<style>
	li.new::after{
    	content: "NEW!"
        font-size: x-small;
        padding: 2px 4px;
        margin: 0 10px;
        border-radius: 2px;
        background: #f00;
        color: #fff;
    }
</style>
...
<div class="container">
	<h1>제품 목록</h1>
    <ul>
    	<li class="new">제품 A</li>
        <li>제품 B</li>
        <li>제품 C</li>
        <li class="new">제품 D</li>
    </ul>
</div>

이미지 그라데이션 및 배경 꾸미기

• 배경색과 배경범위 지정하기
• 배경 이미지 지정하기
• 그라데이션 효과로 배경 꾸미기 

1. 배경색과 배경 범위 지정하기

• 배경색을 지정하는 background-color 속성

background-color: #008000;

• 배경색 적용범위를 조절하는 background-clip 속성
  • border-box : 박스모델 최외각인 테두리까지 적용 (기본값)
  • padding-box : 박스모델 테두리 제외한 padding범위까지 적용
  • content-box : 박스모델 콘텐츠부분에만 적용

<style>
	#clip-border {background-clip: border-box;}
    #clip-content {background-clip: content-box;}
</style>
...
<div id="container">
	<div class="desc" id="clip-border">	...	</div>
    ...
</div>

2. 배경 이미지 지정하기

• 요소에 배경이미지를 넣는 background-image 속성

<style>
	body {
    	background-image: url('img/cat.png');
    }
</style>

• 배경이미지의 반복방법을 지정하는 background-repeat 속성
  • (repeat, repeat-x, repeat-y, no-repeat)

• 배경이미지의 위치를 조절하는 background-position 속성

background-position: <수평위치> <수직위치>;
수평위치: left | center | right | <백분율> | <길이 값>
수직위치: top | center | bottom | <백분율> | <길이 값>


ex) 
<style>
	ul {
    	list-style-type: none;
        margin-left: -30px;
    }
    li {
    	background-image: url('img/book_icon.png');
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 50px;
        line-height: 40px;
    }
</style>
....
<h1>아이기스 퍼블리싱</h1>
<ul>
	<li>회사소개</li>
    <li>도서</li>

• 배경이미지의 적용범위를 조절하는 background-origin 속성
  • centent-box, padding-box, border-box

• 배경이미지를 고정하는 background-attachment 속성
  • scroll, fixed

<style>
	body{
    	background-image: url('img/bg.png');
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
    }
    div{
    	...
    }
    
    #bg1 {background-origin: padding-box;}
	...
</style>

• 배경이미지 크기를 조절하는 background-size 속성
  • auto, contain, cover, <크기>, <백분율>

<style>
	.box {
    	...
        /*배경이미지를 반복하지않고 왼쪽상단에 위치*/
        background: url('img.png') no-repeat left top
    }
    #bg1 {background-size: contain;}
</style>

3. 그라데이션 효과로 배경 꾸미기

• 선형 그라데이션

linear-gradient(to <방향>또는<각도>, <색상 중지점>, [<색상 중지점>, ...]);


ex)
	.grad {
    	background: blue;
        background: linear-gradient(to right bottom, blue, white);
    }
    .grad1{
    	background: red;
        background: linear-gradient(45deg, #f00, #fff) /*빨간색에서 흰색으로*/
    }
</style>

• 원형 그라데이션

radial-grdient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ...]);


ex)
<style>
	.grad1 {
    	background: red;
        background: radial-gradient(white, yellow, red);
        /*모양을 지정하지 않으면 타원형이 기본값*/
    }
    .grad2{
    	background: red;
        background: radial-gradient(circle, white, yellow, red);
    }
</style>