프로그래밍/HTML5+CSS
티스토리 스킨 기본 레이아웃 알아보기
티스토리 스킨 기본 레이아웃 알아보기
2017.03.01티스토리 반응형 스킨 제작을 위한 레이아웃 구성하기&디자인 요즘 아주 간단한 스킨을 먼저 제작을 하고 싶어서 HTML+CSS에 관한 공부를 하고 있는데요. 물론 전에도 HTML+CSS에 관한 프로젝트를 친구들과 함께 진행을 했지만 정말로 몇 년전에 해봤기 때문에 거의 초보자라고 생각하고 다시 기본부터 공부하고 있습니다. 일단은 이 글은 "강좌"라는 개념보다는 제가 공부하면서 조금이나마 정리를 해서 올리는 글이라고 생각하시면 됩니다. 물론 웹 개발을 처음하시는 분들에게는 좋은 정보가 되면 좋겠네요. 시작할까요? 반응형 웹 디자인이란? 웹 디자인의 기법 중 하나이며 웹에 접속하는 디바이스에 반응하는 디자인을 말합니다. 위에 그림과 같이 접속하는 기계에 따라서 웹 사이트가 스스로 디자인을 바꿔준다고 생각하는게..
스킨 개발환경 구축하기 - Brackets를 설치하다.
스킨 개발환경 구축하기 - Brackets를 설치하다.
2017.02.24티스토리 스킨 제작을 위한 개발환경 구축하기 - 무료 개발 프로그램 Brackets 설치 올해 목표 중에 하나가 바로 블로그 주제에 맞는 스킨을 만들고 무료로 배포하는 겁니다. 물론 대략 적으로 스킨은 2~3개 정도 만들 예정이고 어떻게 서비스를 진행할까 생각도 하고 있습니다. 물론 처음 혹은 2번째까지는 무료로 제공하고 다음부터는 기부를 받는 형식으로 운영을 할까 생각하고 있습니다. 물론 아직 만들지 않았기 때문에 계획뿐이겠죠. 본인은 대학교 4학년때 HTML+CSS를 처음으로 다루어보고 프로젝트도 진행을 했는데요. 개인적으로 응용프로그램 제작은 정말로 재미있고 적성에 맞아서 잘 하겠지만 웹 프로그램은 아무래도 디자인도 같이 만들어야 해서 생각보다 정을 붙이기는 힘들더군요. 그럼에도 불구하고 이렇게 만..
Aptana studio 3 설치 및 Nodejs 오류 해결
Aptana studio 3 설치 및 Nodejs 오류 해결
2015.11.25오랜만에 프로그램이 아닌 프로그램 제작을 위한 소프트웨어 설치 리뷰를 올리네요. 전에 HTML5 + CSS3 처음 나왔을 때 한참 조원들이랑 반응형 피아노를 제작한 경력이 있는데요. 그 이후로는 다시 웹은 다루지 않을 줄 알았는데 티스토리 스킨 제작에 흥미를 느껴서 다시 설치를 해봤어요. Aptana Studio 3은 현재 무료로 다운이 가능하며 사용을 하실 수 있는데요. 홈페이지 http://www.aptana.com/로 접속을 하셔서 무료 다운로드를 하시면 됩니다. 참고로 현재 버전은 Aptana Studio 3.6.1입니다. 처음에 프로그램을 시작하면 설치 화면이 나오는데요. 그냥 “Next”를 누르시면 됩니다. 그 다음에는 “Java Runtime Environment”를 설치하라고 나옵니다. “..
[Aptana]Aptana Studio 3 설치하기
[Aptana]Aptana Studio 3 설치하기
2013.12.16HTML5 + CSS3 개발하는 툴은 현재 많이 있어요. 내가 HTML5+CSS3로 프로젝트를 진행했을 당시에는...거의 초창기라서 지원하는 하는 툴이 별로 없었지만... 지금은 많은 툴이 HTML5+CSS3를 지원하죠. 학교에서 프로젝트를 진행할 때 Aptana를 사용하였고 오늘 Aptana 설치를 간단히 살펴볼게요. 1. 간단히 Aptana 홈페이지를 가면 누구나 아무런 제한없이 무료로 설치를 파일을 받을 수 있어요.Homepage : http://www.aptana.com/ 2. Download Aptana Studio 3 의 아이콘을 누르시면 아래 페이지 처럼 뜨는 것을 볼 수 있어요. 총 2가지 다운로드가 있는데요. 한가지는 Standalone Version 그리고 Eclipse Plug in ..
[HTML5]HTML5 <audio> - loop
[HTML5]HTML5 <audio> - loop
2012.01.11간단한 Audio 관련되서 올렸다. loop란.. mp3의 플레이어가 다 끝났을때 다시 처음부터 돌아 가는 거다. 즉, mp3 Player에서 무한 반복이라고 생각하시면된다. -->loop가 되는거를 볼수가 있다.
[HTML5]box-shadow & -moz-linear-gradient
[HTML5]box-shadow & -moz-linear-gradient
2012.01.111. -moz-linear-gradient background-image: -moz-linear-gradient(center bottom, #FFFFFF 90%, #CCCCCC 100%); ( 시작위치, 시작 색깔, 겉 색깔) 2. box-shadow box-shadow: 0 -10px 2px 0px #838383 (가로 오프셋, 세로 오프셋, 그림자의 부드러움, 그림자의 색깔) 가로 오프셋 ( 양수 -> 오른쪽 그림자 생성) ( 음수 -> 왼쪽 그림자 생성) 세로 오프셋 ( 양수 -> 아래 그림자 생성) ( 음수 -> 위에 그림자 생성) 그림자의 부드러움을 0으로 설정하게 되면 박스 형태로 그림자가 생성된다...즉 날카로워 진다.
[HTML]HTML 생삭 코드표
[HTML]HTML 생삭 코드표
2012.01.06HTML5..접하면서 생상표가 필요 했는데..ㅋㅋ 마침 돌아 댕기면서...얻었네요^^ 출처 : http://qnsi.tistory.com/ ■ BLACK #000000 ■ DIMGRAY #696969 ■ GRAY #808080 ■ DARKGRAY #A9A9A9 ■ SILVER #C0C0C0 ■ LIGHTGREY #D3D3D3 ■ GAINSBORO #DCDCDC ■ WHITE #FFFFFF ■ SNOW #FFFAFA ■ GHOSTWHITE #F8F8FF ■ WHITESMOKE #F5F5F5 ■ FLORALWHITE #FFFAF0 ■ LINEN #FAF0E6 ■ ANTIQUEWHITE #FAEBD7 ■ PAPAYAWHIP #FFEFD5 ■ BLANCHEDALMOND #FFEBCD ■ BISQUE #FFE4C..
[HTML5]KeyEvent 설정하기!!!
[HTML5]KeyEvent 설정하기!!!
2012.01.02간단한 HTML5에 관한 이벤트를 설정하는 구문이다.. 솔직히 HTML5에 관해서는 아무것도 모르기 때문에 구글링과 네이버에서 많이 찾아서 적용하고 한번... 피아노를 렉탱글로 그려봐서 이벤트를 지정해봤다. 피아노를 누를시.. 새로운 사각형을 그리고 그 사각형에는 조금 색을 넣어서 이벤트가 작동하는지 알아 봤다. Canvas에 관해서는 담에 올리겠다. // 시작과 Init()함수를 실행한다.