Korean English Japanese

아름다운 CSS와 JavaScript

아름다운 CSS와 JavaScript

CSS와 JavaScript

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

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

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

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

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

 

 

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

이 글은 워드프레스를 운영하면서 많은 사람들에게 잘 알려진 정보를 토대로 직접 활용해보고 워드프레스와 다른 CMS 블로그와의 장단점과 차이점 등을 서술하고자 한다. 먼저, 워드프레스의 경

creativestudio.kr

 

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

워드프레스 블루호스트 호스팅 서비스는 워드프레스 입문자들에게 매우 적합한 공유 호스팅이다. 워드프레스 호스팅을 선택할 때, 어떤 워드프레스 호스팅이 가장 좋은지 구체적인 장점과 단

creativestudio.kr

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

티스토리와 워드프레스를 운영하면서 어쩔 수 없이 요구되는 CSSJavaScript 그리고 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

스크롤 기능은 존재하지만, 스크롤바가 보이지 않는 CSS 부분적으로 적용할 경우, 특정 섹션에는 클래스로 선택자를 잡고 적용하면 된다. 한 웹사이트의 전체에 적용할 경우, 아래의 스타일을 그

creativestudio.kr

 

CSS3 filter 속성과 함수 및 예제

HTML5이나 CSS3를 처음 시작했을 때 너무 어려워서 어떻게 공부를 시작해야 하는지 감이 안 왔던 적이 있습니다. 그렇다고 시간이 지나서 어떤지를 묻는다면 여전히 너무 어려워서 미칠 것 같다.라

creativestudio.kr

 

CSS 다중 선택자 참조

CSS 선택자 CSS에서 선택자는 스타일을 설정할 요소를 선택하는 데 사용되는 패턴이다. 대부분의 선택자 요소에 대한 사용법과 설명을 번역 및 이해하기 쉽도록 구분해놓았으므로, 이를 통해 선

creativestudio.kr