그냥 그래

안녕하세요 도롱군 입니다.이번 포스팅은 JavaScript를 이용하여 HTML Table을 Sort 할 수 있는 방법에 대해 알아보도록 하겠습니다.극히 주관적으로 포스팅 되었으며, 최근 사내 인프라 개발하면서 쓰던 스크립트 파트를 조금 정리하여 포스팅 해보자라는생각으로 포스팅하게 되었습니다. 우선 테이블을 만들기 위해 html 문서를 위와 같이 준비해보도록 합니다.기본적인 베이스로 저정도만 소스를 작업 해주시면 되며, 한 html 문서 안에서 모든 것을 해결할 예정이니,head에 내부 스타일을 적용 시켜줍니다. (이는 Table CSS 디자인을 이용하여 테이블 구분을 하기 위함입니다. 상기의 사진은 html 문서의 head 부분만을 캡쳐한 것 입니다. Table, th, td의 태그를 border sty..

안녕하세요 도롱군 입니다. CSS3를 이용하여, 배경 등 색상을 입힐 수 있는 모든 것에 그라디언트 효과를 줄 수 있는 것은 아시나요?또한, 키프레임을 이용하여 색상 변환이 이루어질 수 있도록 애니메이션 효과를 적용시킬 수도 있습니다. 들어가기 전, 우선적으로 CSS3를 이용하여 그라디언트를 적용하는 방법에 대해서 써보도록 하겠습니다. 그라디언트는 두가지로 나뉠 수 있습니다. Linear Gradients ( 상,하,좌,우,대각선 [top,bottom,left,right] )Radial GradientsCSS3 웹 브라우저 호환성 참고: Chrome IE Firefox Safari Opera linear-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.15.1 -..

안녕하세요, 도롱군 입니다.이번 포스팅 주제는 크롬에서 티스토리가 정상적인 작동을 하지 않을 때, 해결 방법입니다. 국내에서 3,4년 전까지만 해도 인터넷 익스플로러(Internet Explorer)의 브라우저 점유율은 상당히 높았습니다.또한 블로그를 운영하는 다양한 주제를 가지고 있는 전문 블로거 분들도 많이 생기고, 또한 실시간으로발행되는 포스팅이 어마어마하다는 것을 알 수 있고, 그야말로 현세는 정보의 바다 속에 살고 있다고 하더라도 과언이 아닙니다. 그러면서 어느순간 구글에서 야심차게 내놓은 크롬(Chrome)이 점유율을 치고 올라가면서,대부분의 많은 사람들이 기본 브라우저로 크롬을 사용하기 시작했고 도롱군 또한 크롬을 주력으로 사용했고티스토리 포스팅 또한 크롬을 사용했으나 크롬으로 티스토리를 이..

안녕하세요 도롱군입니다. 이번 포스팅은 전 CSS 기초부터 활용까지 1편을 이어서 진행하도록 하겠습니다. 지난 포스팅에서 CSS 스타일 시트를 어떻게 만드는지 배웠는데, 이번엔 이렇게 만든 css 파일을 어떻게 사용할 수 있는지에 대해, 또한 내부 스타일을 어떻게 줘야하는지에 대해 알아보도록 하겠습니다. CSS를 사용하는 3가지 방법 CSS를 사용할 수 있는 방법은 3 가지가 있습니다. 인라인 스타일 내부 스타일 시트 외부 스타일 시트 이렇게 3가지의 방법을 이용하여 HTML 문서에 스타일을 적용 시킬 수 있습니다. 심화 1. 외부 스타일 시트 외부 스타일 시트는 css 파일만 수정하여 해당 css 파일을 사용한 모든 HTML 문서의 스타일을 변경 할 수 있습니다. 태그를 이용하여 외부 스타일 시트를 불..

스마트폰의 보급률이 높아지면서 언제부터인가 SNS가 우리들의 생활에 없어서는 안되는 서비스가 되었습니다. 기업, 개인 구별할 것 없이 기업은 사업 아이템을 마케팅하기 위한 수단으로 사용됬고, 개인의 경우 얼마나 내가 잘 사는가, 일상에 대해 타인 혹은 지인에게 거리감 없이 어필할 수 있는 공간이 되어 버렸습니다. 필자 또한 SNS를 하루에도 수십번 들여다 보는 것 같습니다. Facebook에서 사이트 혹은 블로그 URL을 업로드 하였을 경우 카카오톡에서 사이트 혹은 블로그 URL을 업로드 하였을 경우 저러한 링크를 붙여넣을 때 생기는 제목과 이미지, 설명은 어떻게, 어디서 출력되는 것일까요? 모든 인터넷 상 사이트들은 HTML 문서로 이루어져 있고 그 외로 HTML 문서를 조금 더 기능적이게, 이쁘게 할..

안녕하세요, 도롱군입니다. CSS의 기초부터 활용까지 1편 포스팅을 해보도록 하겠습니다. CSS란 무엇인가요? CSS의 의미는 Cascading Style Sheet 의 약자입니다. CSS는 HTML의 요소를 화면에 가시화할 수 있으며, 많은 HTML 스타일을 저장하여 따로 디렉토리를 만들고 그 안에 .css 문서 안에 코딩을 하게 되면 여러 html 레이아웃을 제어 할 수 있습니다. 디자인, 레이아웃 등 다양한 Function과 모바일이 보급되며 대중화 되어 반응형 웹 디자인을 할 때 필수적인 요소로 자리매김 하였기 때문입니다. CSS는 왜 써야할까요? HTML은 웹 페이지의 레이아웃 형식을 지정하기 위해 Tag를 포함하지 않았습니다. 일반적으로 HTML만 이용하여 웹 개발을 할 경우 일일히 Tag마다..

최근 사이트가 브라우저별, 디바이스 별로 잘 호환이 되는 지 확인 하는 도중,여러가지 문제가 생겼었다. 구버전의 브라우저와 호환이 안되는 경우도 빈번하게 일어났고.html5, css3가 대중화 되고 반응형 웹이 사이트 Design시에 필수적으로 일어나기에,각 구버전 브라우저에서는 호환이 안되는 경우도 빈번하게 발생하게 된다. 웹 사이트를 구축 시엔, 여러가지 요소를 신경써야 하지만, css 접두 등 누구나 호환되어 이질감 없이 볼 수 있어야한다.그 만큼 모바일과 인터넷 보급이 대중화 되었기 때문이다. 이번에 나도 이러한 문제를 쉽게 확인하기 위하여 이것 저것 알아보다가 좋은 서비스를 발견하여블로그에 기록하게 되었다. Microsoft사에서 제공하는 사이트 스캔 (Site scan) 툴이다.해당 사이트의 ..

안녕하세요 도롱군입니다. 보통 웹페이지 작업을 할 때 따로 웹 폰트 혹은 홈페이지 내부에 임베디드 하지 않은 상태라면 사용자들은 기본적으로 디바이스에 저장되어있는 Default font 정보를 이용하여 웹 데이터 리드를 하게 되는데요. 타이포그래피를 도롱군은 꽤나 중요한 요소로 생각하기에 그런 사소한 부분까지 일일히 신경 써주는 스타일 입니다. 오늘은 웹 폰트를 적용 시켰을 때, 장점과 단점을 서술하고 웹 폰트를 이용하여 내부 CSS 시트에 어떻게 불러들일 수 있을지에 대하여 포스팅 해보도록 하겠습니다. 웹 폰트는 웹 폰트 정보를 제공하는 사이트에서 폰트 스타일을 간단하게 코드 몇 줄로 불러올 수 있습니다. 대표적으로 무료 라이선스인 나눔고딕과 Google에서 제공하는 Google Fonts가 있습니다...

CSS를 이용한 스타일은 어떤식으로든 포토샵 처럼 결과물이 다 다르기 마련 입니다. 최대한 창의적으로 사용 하는 것이 가장 중요하고, 어떻게 응용하느냐에 따라 다른 태그와 혼합 되었을 때 Crush 없이 정상적으로 작동이 되는지가 중요한 핵심 포인트가 되겠습니다. 예를 들어 화면 정중앙에 align 시키는 작업도, 결과는 같지만 코드는 무궁무진하게 짤 수 있습니다. 상황에 맞추어서 코딩을 해야하고, 확장성, 웹 표준성을 준수하는지 여부에 따라 좋은 코드인지 아닌지 파악할 수 있습니다. 이번 포스팅에 이용되는 코드 편집 툴은 Brackets를 이용했으며, 해당 HTML 및 CSS 소스는 자유롭게 이용해도 상관 없습니다. 다만, 유의해야 할 점은 이 포스팅에 들어가는 코드들은 모두 이렇게 사용할 수 있다고 ..

해당 블로그의 첫 포스트이기도 하고, 원래 목적대로 About DEV의 카테고리는 개인 개발 일지나 디자인 등 업무 일지를 나타내는 것이기에 편하게 작성하도록 하겠습니다. Git / Github 프론트 엔드 작업이든 백엔드 작업이든 혼자 진행할 수 없는 프로젝트를 진행하다보면 협업이 필요한 경우가 많다. 이런 경우 누군가가 공유된 파일을 나보다 먼저 편집하고 있을 때 내가 편집을 하게 되면 서로 충돌이 되어 기존에 작업했던 데이터는 모두 지워지게 된다. 그 만큼 버전관리가 중요하고 이러한 것을 방지해줄 뿐 아니라 효율적이게 관리할 수 있도록 해주는 Tool이다. 필자는 참고로 SVN만 충실히 사용해왔던 터라, 주위에서 Git의 언급이 늘며 관심이 생겼다. 실제로 당장 취업 정보 포털 사이트에서의 지원 자..