본문 바로가기

분류 전체보기

 (86)
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 데이터베이스를 만들었다. 그 다음에는 테이블(표)를 만드려고 했는데, 테이블의 이름으로는 숫자를 사용할 수 없다..
라이브러리와 프레임워크 오늘날 우리가 소프트웨어를 만든다면 혼자서 만드는 경우는 거의 없다. 대부분 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 만드는 것이다. 소프트웨어를 만들 때 다른 사람이 이미 잘 만든것을 부품으로 내가 만들고자 하는 것을 빠르게 만드는 것이 소프트웨어 만들기의 기본이라고 할 수 있다. 다른 사람이 만든 소프트웨어를 부품으로, 그것을 소비해서 내가 만드는 소프트웨어의 생산자가 되는 방법은 무엇일까? 이 때 알아두면 좋은 키워드는 라이브러리와 프레임워크이다. 라이브러리(library) 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어를 재사용하기 쉽도록 되어있는 곳이다. 라이브러리란 가져와서 사용하는 것이다. 예를 들어 자바스크립트의 라이브러리 중 가장 유명한 것은 jQuery 라이브..
WEB(5) : Java Script - 배열, 함수, 객체 정리정돈의 도구들 : 배열, 함수, 객체 시간이 지날수록 집에 살림은 늘어난다. 그러면 책장이나 수납상자와 같은 물품들을 구매하게 된다. 집에 있는 사물이 많아질수록 그 사물들을 정리정돈 할 필요성이 생기고, 그 필요성에 따라 여러 수납공간들을 마련하게 된다. 프로그래밍도 마찬가지이다. 프로그래밍을 하게 되면 굉장히 많은 데이터를 다루게 되고, 데이터는 제각각 성격도 다르다. 데이터가 많아짐에 따라 코드가 감당하지 못할만큼 복잡해지면 우리는 수납상자를 통해 정리정돈을 한다. 이렇게 서로 연관된 데이터를 정리정돈에서 담아두는 수납상자를 배열, 함수, 객체라고 한다. 그 중 가장 작은 배열 수납상자부터 알아보자. 배열 문자가 따옴표로 시작해서 따옴표로 끝나듯이, 배열은 대괄호로 시작해서 대괄호로 끝난다. 대..
WEB(5) : Java Script - 조건문, 반복문 프로그램의 순서를 제어하는 이유 자바스크립트는 프로그래밍 언어이지만, html은 프로그래밍 언어가 아니다. 이 차이는 무엇일까? 프로그램이란 순서를 뜻하는 말이다. 순서를 만드는 행위를 프로그램이라고 하며, 순서를 만드는 사람을 프로그래머라고 부른다. (반드시 컴퓨터 분야에서만 사용되는 용어가 아니다) 컴퓨터에는 여러가지 기능들이 있다. 컴퓨터로 어떤 일을 하려고 할 때 하나만 필요한 경우는 없고, 어떤 의도에 따라 순서대로 여러 기능들을 작동시키는 것이 컴퓨터를 사용하는 일반적인 방법이다. 순서가 반복되고, 반복되는 과정에서 시간이 많이 걸리고 실수를 한다면 반복적인 작업에 회의감을 느끼며 극복하고자 하는 의지가 생기게 된다. 시간의 순서에 따라서 실행되어야 할 기능들을 프로그래밍 언어의 문법에 맞게 ..
WEB(4) : Java Script - event, querySelector() html은 정적이다. 한 번 화면에 출력되면 언제나 그 모습 그대로이다. 반면에 우리가 알고 있는 여러 프로그램들은 사용자 조작에 반응해서 움직인다. 사람들은 웹페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원했고, 그래서 "java script" 기술이 태어나게 되었다. html이 정보라는 멈춰있는 이미지를 그리는 것이라면, 자바스크립트는 정보라고 하는 그 이미지를 마치 영화처럼 움직이게 한다. -유튜브 '생활코딩' 中 자바 스크립트란? 자바스크립트는 사용자와 상호작용하는 언어 웹 브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없다, 하지만 자바스크립트를 사용하면 자바스크립트의 코드에 따라 웹 브라우저를 바꿀 수 있다. 즉, 자바스크립트는 html을 제어하는 언어다. 웹페이지를 ..
WEB(3) : CSS CSS 기술의 서두 html을 통해 문서를 만들수 있게 된 이후에 사람들은 곧 여러가지 불만족을 쏟아냈다. 문자의 크기와 색상을 변경하고 싶다, 가운데 정렬을 하고 싶다 등등... 웹을 만든 사람들은 웹페이지를 아름답게 만들고 싶은 고민에 빠졌고, 두 가지 갈림길이 생긴다. 쉽지만 한계가 있는 방법 어렵지만 근본적인 해결책 html이라는 이미 있는 언어에 디자인과 관련된 새로운 태그를 추가하는 것과, 디자인에 최적화 된 완전히 새로운 언어를 만드는 것 중 어떤것이 더 쉬운 것일까? 전자가 더 쉬운 것이고 쉬운 길이다. 웹 개발자들은 쉬운 길을 선택했다가 한계를 깨닫고 근본적인 해결책을 찾게 되는데, 그것이 바로 CSS 이다. 태그는 링크라고 설명하는 정보이다. 태그는 웹페이지에서 제목이라는 것을 설명하는..
HTML 미니 프로젝트 : BEAUTEFUL POEM 리스트, 링크, 사진/동영상/오디오 첨부하기 기능을 사용해보고 싶어서 만들어본 아주 간단한 웹사이트이다. 메인 화면은 index.html 파일로 사진 한 장, 아래에 피아노 음악이 나오는 동영상, 그리고 클릭하면 해당 시가 나오는 페이지로 이동할 수 있는 다섯가지 시 리스트가 나온다. 웹페이지 제작에 사용된 사진들은 저작권이 없는 무료 사이트를 이용하였다. https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#1479ae11437d48c5beef8554c612149e https://www.notion.so/ab0ea69ebfe04a4cae2306913ae22ee9#0f71486d14e74dfa9e6fede335c0e6d2 head 태그 안에 을 넣고 body ..
CSS, JS, 백엔드 기술의 방향성 웹사이트를 아름답게 꾸미고 싶다면 CSS를 공부해야 한다. html이 태어난지 약 4년후 부터 만들어지게 되었으며, 이후 웹 퍼블리셔/웹 디자이너와 같은 직업들이 발전하기 시작했다. 만약 사용자와 상호작용하는 웹페이지를 만들고 싶다면, 자바 스크립트를 공부해야 한다. html이 태어난 지 약 5년후 부터 만들어지게 되었으며, 이후 웹 프론트엔드 엔지니어/웹 인터랙티브 디자이너와 같은 직업들이 발전하기 시작했다. 생산성의 한계에 봉착했다면, 백 엔드 기술을 배워야 한다. 백 엔드 기술을 이용하면 하나의 파일을 변경할 때 1억 개의 웹페이지가 동시에 바뀌는 폭발적인 효과를 경험할 수 있다. PHP, JSP, node.js의 익스프레스, 파이썬의 장고 등의 기술은 바로 이런 목적을 위해 고안된 기술들이다. 서..

티스토리툴바