본문 바로가기

프로젝트

(4)
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..
mysql) TodayILearn 자신이 아는 것을 공고히 다질수 있는 방법은 프로젝트를 만들어보는 것이라고 한다. 얼마전에 배운 MySQL 데이터베이스 기술을 복습하고 싶어서 간단한 프로젝트를 결심하게 되었다. 데이터를 구조화된 틀 안에 넣어 깔끔하게 정리정돈 한 것이 표이고 그러한 표들을 모아두는 표의 집합이 데이터베이스라고 나는 이해했다. 따라서 매일 공부한 내용을 작성하는 todolist 표를 만들고 그 표들을 모아두는 "TodayILearn" 데이터베이스를 구상해보았다. 만들어진 데이터베이스 안에서 select * from 날짜를 쓰면 그 날짜에 공부한 것들을 한 눈에 볼 수 있으면 좋겠다. 우선 TodayILearn 데이터베이스를 만들었다. 그 다음에는 테이블(표)를 만드려고 했는데, 테이블의 이름으로는 숫자를 사용할 수 없다..
HTML 미니 프로젝트 : BEAUTEFUL POEM 리스트, 링크, 사진/동영상/오디오 첨부하기 기능을 사용해보고 싶어서 만들어본 아주 간단한 웹사이트이다. 메인 화면은 index.html 파일로 사진 한 장, 아래에 피아노 음악이 나오는 동영상, 그리고 클릭하면 해당 시가 나오는 페이지로 이동할 수 있는 다섯가지 시 리스트가 나온다. 웹페이지 제작에 사용된 사진들은 저작권이 없는 무료 사이트를 이용하였다. https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#1479ae11437d48c5beef8554c612149e https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#0f71486d14e74dfa9e6fede335c0e6d2 head 태그 안에 을 넣고 body ..