Findings (배운 점)

SVG

확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽이다. HTML 태그의 집합으로 이루어져 있다. 즉, css와 javascript로 컨트롤이 가능하다.

장단점

장점

확대: 아무리 확대를 해도 이미지가 깨지지 않는다.
용량: 이미지의 크기를 키워도 용량이 늘어나지 않는다.

단점

용량: 코드로 이루어져있다보니, 복잡한 이미지의 경우 파일사이즈가 커진다.

➡️ 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다.

사용방법

1. 이미지 태그로 사용하기

<img src="icon-home.svg" alt="home">

2. CSS background 배경으로 넣기

background: url(./icon-home.svg) no-repeat 50% 50% / contain;

3. 인라인으로 넣기

<button class="inline">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
      stroke="#767676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M9 21V12H15V21" stroke="#767676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  <span class="a11y-hidden">Home</span>
</button>

SVG 이미지 파일을 사용하지만 별다른 조작을 하지 않을 것이라면 HTML img 태그나 CSS background 속성을 사용하면 된다. 이미지에 조작이 필요하다면 인라인으로 넣자!

Apply (적용)

깃헙페이지

https://kyokyoya.github.io/hyunwoo_picture/

최현우

kyokyoya.github.io

Feeling (느낀 점)

css만을 이용해서 캐릭터를 만들어봤다. 지금까지 해봤던 실습 중에서는 가장 많은 시간을 썼던 거 같다.
하지만 그만큼 얻은 것도 많은 실습이었는데, 특히 positon에 관해서 이해도가 많이 높아졌다. 높아진 이유는 캐릭터의 눈 코 입 등 위치를 잡아줘야 하는 과정이 많아서였다. 그 과정에서 어려움도 많았는데 그중 absolute 때문에 고생을 많이 했다. absolute는 가장 가까운 조상 중에서 relate를 적용한 조상의 위치를 기준으로 삼는데, 난 직속 부모 위의 조상에 relate를 적용해서 위치가 계속 이상하게 잡혔다. 이걸 알기 위해 구글링과 유튜브를 정말 많이 찾아본 것 같다. 그래도 이 과정을 통해서 absolute에 대한 이해도가 많이 늘었다.
난 이 과정이 힘들지만 정말 나에게 큰 도움이 된다 생각한다. 하나라도 더 알아보는 과정이 흥미롭다.
또한 내가 원하는 걸 구현했을 때의 성취감은 개발의 재미라고 생각한다.