본문 바로가기

전체 글

 (87)
스프링이란? 스프링의 기초 개념 1. 스프링은 프레임워크이다. 프레임이란 틀이고 워크는 동작한다는 뜻이다. 즉, 틀 안에서 동작을 한다는 것이다. 틀이 있으면 안에 구슬을 집어넣고 좌우로 움직이거나 위 아래로 움직여도 구슬은 틀을 벗어날 수 없다. 프레임워크란 이 틀을 벗어나지 말라고 정해주는 것이다. "개발자 마음대로 만들지 말고 틀을 제공할테니, 틀에 맞춰서 개발을 하라" 라는 뜻. 2. 스프링은 오픈 소스이다. 오픈소스라는건, 소스코드가 공개되어 있고, 내부를 고칠수도 있다는 것이다. 스프링이 어떻게 만들어져있는지 내부를 볼 수가 있고, 불편한 부분은 고쳐서 기여도 할 수 있다. 3. 스프링은 IOC 컨테이너를 가진다 (*스프링의 핵심이다) IOC란 Inversion of controll의 약자이자, 제어의 역전이라는 뜻이다. 제..
web) video 태그를 사용하여 표현한 4계절 완성된 웹페이지의 모습 오전에 video 태그에 대해 공부하였고, 해당 태그로 동적이고 아름다운 웹페이지를 만들면 재미있겠다는 생각이 들었다. 현재 계절이 겨울이다보니 주제를 겨울로 정하고 만들어보다가 한 페이지 안에 4계절을 모두 표현하면 아름다울것 같아서 봄, 여름, 가을, 겨울 리스트를 만들어보았다. 리스트는 hover하면 계절에 맞게 색깔이 바뀌는 링크인데, 봄은 빨간색/여름은 초록색/가을은 노란색/겨울은 파란색으로 변경된다. 하지만 생각보다 자연스럽지 않고 디자인적인 부분이 뭔가 아쉬웠다. 웹페이지는 header / main / footer로 상,중,하를 나누었다. header에는 동그란 썸네일이 들어가도록 했고, 아래에 간단한 문구와 리스트가 나온다. main에는 column-count를 3을..
web) 이미지가 있는 버튼 만들기 오늘은 배운 것을 응용하여 아래와 같은 이미지 버튼들을 만들어 보았다. 해당 이미지는 사실 태그를 이용한 링크이다. 클릭하면 y축으로 5px만큼 이동하여 마치 버튼을 누른듯이 동작한다. 먼저 body안에 태그로 5개의 링크를 만들었다. 위와 같이 만들어진다. 이 링크들에 예쁜 이미지를 씌우기 위해 background-image 속성을 사용할 것이다. 우선, 모든 링크들은 다음과 같은 특성을 가진다 크기는 가로 250px 세로 250px 원형의 이미지 테두리에 그림자같은 효과가 있다 head 안의 style태그에 다음과 같이 작성한다. .btn은 모든 링크들이 공유하는 클래스이다. 1) display 속성으로 각각의 링크들이 inline-block level을 가지도록 설정하였다. 기본값은 inline l..

티스토리툴바