그냥 그래

퍼블리싱, 프론트, 백 어떠한 디벨롭 환경에서도 일일히 하드코딩 하기란 힘들다.그래서 존재하는 파일과 명령의 집합인 라이브러리를 대부분의 코더들이 많이 사용한다. 대표적으로 Jquery와 AngularJS, reactJS 등 무수히 많은 라이브러리들이 존재하고이들을 이용하면 조금 더 수월한 스크립트를 짤 수 있다. CSS3는 애니메이션을 주기위해선 일일히 키프레임으로 애니메이션 효과를 주어야만 했다.근데 사실상 화려한 애니메이션이 아닌 간단한 WAS환경에서의 애니메이션 효과는 정말 간단하기에이를 코딩할 필요없이 간단한 애니메이션 효과를 적용 시키고 싶은 사람들을 위한명령 집합 라이브러리이다. 실제로 내가 즐겨 쓰는 방법이다. animate.css는 정말 단순한 사이트로 구성되어있다. 다운로드 링크와 개발..

안녕하세요 도롱군입니다. 이번 포스팅은 CSS를 이용한 하단고정배너 (bottom fixed banner)를 만들어 보려고합니다.준비할 것 html와 css, 배너 닫기 기능을 넣기 위해 Javascript 약간의 지식? 이 필요합니다. 하단고정배너? 그게 뭔가요? 위의 사진과 같이, 스크롤 영역에 상관 없이 창의 하단부분에 고정되어 자리하는 배너입니다.많은 웹사이트에서 이를 이용한 웹디자인이 되어있고 광고 효과도 괜찮게 평가되는 알아두면 괜찮을 법 한 녀석입니다. 1. html 작성 모든 웹의 기초가 되어주는 html. 독타입 선언을 한, 이 들어가있는,기본적인 html 구조를 잡아주셔야합니다. 이제 html 문서의 몸체 부분의 내용을 기입해주어야 하는데요.기본적으로 레이아웃을 나눌때 자주 사용되는 태..

안녕하세요 도롱군 입니다.1편, 2편에 이어서 3편에 들어갑니다.이제 어느정도 CSS 배열에 대해서 어떤 느낌인지 감이 오는 수준입니다. 이전 게시물 CSS 기초부터 활용하기 1편 CSS 기초부터 활용하기 2편 (스타일 시트 편) 오늘은 CSS의 색상에 대해서 알아보도록 하겠습니다.색은 사전 뜻과 같이 서로 구별되는 특성이라 합니다, 시각적인 요소가 포함되어 각 색상마다의 여러가지 의미를 갖기도 합니다.그 만큼 스타일을 표현할 때 정말 중요한 요소 중 하나입니다. CSS에서의 색상을 표현하는 방법은 많습니다, CSS 내에서만 3가지 방법으로 낼 수 있으며 CSS3를 통하여 opacity(투명도)를줄 수도 있습니다. 아래와 같이 3가지 방식으로 색상을 표현 할 수 있습니다.CSS 내 유효 색상 이름 : "..

안녕하세요 도롱군 입니다. 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 -..

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

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

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

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