아름다운 CSS와 JavaScript

아름다운 CSS와 JavaScript

CSS와 JavaScript

역시나 오늘 아침에도 간단한 사이트 구조를 수정했다.

언어를 새롭게 공부하면서 응용해보려니 쉽지가 않다. 영어를 조금 잘할 줄 안다면 코딩이 조금 쉽게 느껴질 텐데, 역시나 어렵다. 지금에서야 웹코딩 정도만 할 줄 알고 각종 프로그래밍 언어를 공부해야 한다고 하면 어느 세월에 그걸 다 하게 될지 모르겠지만, 그래도 자유롭게 사이트 구조를 내 입맛대로 바꾸고 수정할 수 있는 정도까지는 열심히 배워보고 싶다.

인터넷에 널려있는 정보들을 하나하나 분석해보고 적용시켜보고 하는 반복 작업이지만 거기서 추가로 내가 조금씩 배웠던 것들을 응용시키면 화려하지는 않더라도 나름대로 봐줄 만한 디자인 작업이 완성된다.

일러스트나 포토샵과는 다르게 논리와 순서, 그리고 정확한 값이 요구되는 웹코딩은 그야말로 수학 공부를 하는 것 같은 느낌을 받는다.

요즘은 워드프레스 블로그도 하고 있으며, 가입형 또는 설치형 기반으로 워드프레스 블로그도 운영하고자 한다. 티스토리는 개인적인 연구공간이지만 워드프레스는 글로벌 사이트를 목표로 한 두 개의 콘텐츠를 가지고 운영하게 되지 않을까 싶다.

 

워드프레스 구글 검색엔진 최적화 색인을 위한 5가지 방법

워드프레스 블루호스트 장점 8가지

워드프레스를 통한 웹호스팅 설치형 사이트가 구축하게 되면 네이버 블로그나 티스토리와는 다른 자체적인 나만의 플랫폼이 구축될 것이라고 생각한다.

티스토리와 워드프레스를 운영하면서 어쩔 수 없이 요구되는 CSS와 JavaScript 그리고 PHP까지 배워야 할 것들이 산더미다. 정말 많은 시행착오를 겪을 거라고 생각한다.

 

오늘 내가 배운 JavaScript와 CSS, jQuery

jQuery(document).ready(function($) { 
$(".center").click(function(event){ event.preventDefault(); 
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); });

위 소스는 해당 버튼을 클릭했을 때 원하는 위치를 ID 값으로 잡아서 부드럽게 스크롤링이 되는 소스이다. JQuey 또는 JavaScript로 소스 구성이 가능한데, 인터넷으로 알아본 결과 구현하는 방식은 여러 개다.

똑같은 결괏값을 도출하기 위해서 여러 가지 방법이 가능한 것이 바로 웹코딩의 묘미라고 생각한다.

 

transition: .2s ease-in-out;

위 CSS는 애니메이션 효과를 주는 소스이다. 컬러부터 링크 텍스트까지 다양하게 활용이 가능한 소스인 만큼, 활용범위가 높다. 사이트에 생명력을 불어넣어 주는 요소 이기도하다.

일이라고 생각하면 일이고 공부라고 생각하면 공부인 것이 웹에서 배우는 모든 것들은 경제적인 수익으로도 연결할 수 있다. 매일 조금씩 수시로 알아보면서 배우고 있다. 학원에서 배우는 것보다 독학으로 배우는 것이 더 빠르다는 것은 사실인 것 같다. 물론 제대로 배우면 좋겠지만, 누군가 설명을 해준다고 해서 내가 이해를 할 수 있을까 싶기도 하다.

 

CSS

아름다운 CSS

이미 세상은 온라인 시대가 되었고 영어나 다른 외국어를 배우는 것만큼이나 컴퓨터 언어를 배우는 것은 매우 중요하다. 마치, 이것을 자유롭게 사용하는 것은 마법주문을 외우고 읽는 것과 같다. 진정, 이 시대의 마법사가 아닐까 싶은 우스꽝스러운 생각도 해본다.

 

 

스크롤바 없애는 CSS

CSS3 filter 속성과 함수 및 예제

CSS 다중 선택자 참조