오늘은 과제중에 들었던 CSS image sprite 와 공통 세션으로 들었던 데이터베이스 기초를 정리해보려고한다. 학부생때 들었던 내용이지만 오래되서 많이 흐릿해지기도 했고 당시에도 별로 좋아하던 과목은 아니었다. 흥미롭게 생각하지 않았던듯🤔
CSS image sprite
위코드 옵션 과제중에 간단한 게임을 만들어보는 과제가 있었는데, 그걸 살펴보던 과정에서 image sprite에 대해 알게 됐다. 예전에 게임 만드는 툴 등을 사용할 때 보면 이미지 리소스가 큰 한페이지에 2d캐릭터의 상하좌우 모습이 모두 들어있는 것을 봤었는데 마치 예전에 가위로 스티커를 잘라 붙이는 것과 흡사했다.
image sprite란
이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다.
image sprite의 사용이유
웹 페이지에 이미지가 사용될 경우 웹 브라우저는 매번 해당 이미지를 요청해야 하기때문에 이미지가 많아질수록 로딩 시간이 매우 오래 걸리게된다.
하지만 이미지 스프라이트를 사용하면 이미지 요청횟수를 효율적으로 줄일 수 있다. 큰 하나의 이미지를 불러온 다음 이미지 크기만큼의 네모박스를 생성하고, 필요한 부분의 이미지로 좌표를 이동하며 해당 이미지를 보여주는 방식이다.
필요한 이미지 개수가 많은 경우에 로딩 시간이 줄어드는 것 뿐만 아니라, 이미지 관리 차원에서도 큰 이미지 몇 개만 관리하면 되기 때문에 유지보수에도 도움이 된다.
그림의 사용은 CSS 에 Background-position을 사용하여 그림을 상하좌우 로 움직여가며 내가 설정한 박스에 나오는 이미지를 바꿔주며 사용하면 된다.
DataBase
DataBase란?
데이터베이스는 컴퓨터 시스템에 저장된 정보나 데이터를 모두 모아 놓은 집합을 의미한다.
DataBase의 사용이유
데이터를 오랜 기간동안 신뢰성있게 저장 & 보존하기 위해 데이터 베이스를 사용한다. 또한 데이터를 체계적이고 효율적이게 관리 할 수 있다.
관계형 DataBase(RDBMS, Relational DataBase Management System)란?
관계형 데이터베이스란 말 그대로 데이터 사이의 관계에 초점을 맞춘 데이터 베이스 시스템을 말한다.
관계형 데이터베이스에서 모든 데이터는 2차원 테이블로 표현할 수 있다.
테이블 사이 관계의 종류
- 1:1
- 1:N
- N:M
위의 3가지가 있다. RDBMS 내부에 어떤 테이블들이 존재한다고 할 때 무조건 세가지 가운데 한가지 관계에는 해당해야 한다.
테이블 간의 연결방법과 이유
테이블 끼리는 주로 외부키를 사용하여 연결한다. 하나의 테이블에 모든 정보를 다 넣게 되면 동일한 정보들이 불필요하게 중복될 수 있다. 또한 더 많은 저장공간이 필요하기 때문에 비효율적인 설계가 될 가능성이 커진다.
마무리
오늘 공부한 것 중에 데이터 베이스와 image sprite에 대해 알아봤는데 image sprite는 인상적인 방법이었는데 실무에서도 자주 사용한다고 하니 잘 활용할 수 있어야겠다. 데이터 베이스도 많이 까먹었지만 복습을 해서 좋았다.👍
