본문 바로가기

Web/CSS38

CSS 애니메이션 라이브러리 간단하게 애니메이션 구현 퍼블리싱, 프론트, 백 어떠한 디벨롭 환경에서도 일일히 하드코딩 하기란 힘들다.그래서 존재하는 파일과 명령의 집합인 라이브러리를 대부분의 코더들이 많이 사용한다. 대표적으로 Jquery와 AngularJS, reactJS 등 무수히 많은 라이브러리들이 존재하고이들을 이용하면 조금 더 수월한 스크립트를 짤 수 있다. CSS3는 애니메이션을 주기위해선 일일히 키프레임으로 애니메이션 효과를 주어야만 했다.근데 사실상 화려한 애니메이션이 아닌 간단한 WAS환경에서의 애니메이션 효과는 정말 간단하기에이를 코딩할 필요없이 간단한 애니메이션 효과를 적용 시키고 싶은 사람들을 위한명령 집합 라이브러리이다. 실제로 내가 즐겨 쓰는 방법이다. animate.css는 정말 단순한 사이트로 구성되어있다. 다운로드 링크와 개발.. 2018. 3. 2.
CSS를 이용한 하단 고정 배너를 만들어보자. 안녕하세요 도롱군입니다. 이번 포스팅은 CSS를 이용한 하단고정배너 (bottom fixed banner)를 만들어 보려고합니다.준비할 것 html와 css, 배너 닫기 기능을 넣기 위해 Javascript 약간의 지식? 이 필요합니다. 하단고정배너? 그게 뭔가요? 위의 사진과 같이, 스크롤 영역에 상관 없이 창의 하단부분에 고정되어 자리하는 배너입니다.많은 웹사이트에서 이를 이용한 웹디자인이 되어있고 광고 효과도 괜찮게 평가되는 알아두면 괜찮을 법 한 녀석입니다. 1. html 작성 모든 웹의 기초가 되어주는 html. 독타입 선언을 한, 이 들어가있는,기본적인 html 구조를 잡아주셔야합니다. 이제 html 문서의 몸체 부분의 내용을 기입해주어야 하는데요.기본적으로 레이아웃을 나눌때 자주 사용되는 태.. 2018. 2. 22.
CSS 기초부터 활용하기 3편 (색상 편) 안녕하세요 도롱군 입니다.1편, 2편에 이어서 3편에 들어갑니다.이제 어느정도 CSS 배열에 대해서 어떤 느낌인지 감이 오는 수준입니다. 이전 게시물 CSS 기초부터 활용하기 1편 CSS 기초부터 활용하기 2편 (스타일 시트 편) 오늘은 CSS의 색상에 대해서 알아보도록 하겠습니다.색은 사전 뜻과 같이 서로 구별되는 특성이라 합니다, 시각적인 요소가 포함되어 각 색상마다의 여러가지 의미를 갖기도 합니다.그 만큼 스타일을 표현할 때 정말 중요한 요소 중 하나입니다. CSS에서의 색상을 표현하는 방법은 많습니다, CSS 내에서만 3가지 방법으로 낼 수 있으며 CSS3를 통하여 opacity(투명도)를줄 수도 있습니다. 아래와 같이 3가지 방식으로 색상을 표현 할 수 있습니다.CSS 내 유효 색상 이름 : ".. 2017. 8. 24.
CSS3 그라디언트 배경화면 만들기 안녕하세요 도롱군 입니다. 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 -.. 2017. 8. 20.
CSS 기초부터 활용하기 2편 (스타일 시트 편) 안녕하세요 도롱군입니다. 이번 포스팅은 전 CSS 기초부터 활용까지 1편을 이어서 진행하도록 하겠습니다. 지난 포스팅에서 CSS 스타일 시트를 어떻게 만드는지 배웠는데, 이번엔 이렇게 만든 css 파일을 어떻게 사용할 수 있는지에 대해, 또한 내부 스타일을 어떻게 줘야하는지에 대해 알아보도록 하겠습니다. CSS를 사용하는 3가지 방법 CSS를 사용할 수 있는 방법은 3 가지가 있습니다. 인라인 스타일 내부 스타일 시트 외부 스타일 시트 이렇게 3가지의 방법을 이용하여 HTML 문서에 스타일을 적용 시킬 수 있습니다. 심화 1. 외부 스타일 시트 외부 스타일 시트는 css 파일만 수정하여 해당 css 파일을 사용한 모든 HTML 문서의 스타일을 변경 할 수 있습니다. 태그를 이용하여 외부 스타일 시트를 불.. 2017. 8. 15.
CSS 기초부터 활용까지 1편 안녕하세요, 도롱군입니다. CSS의 기초부터 활용까지 1편 포스팅을 해보도록 하겠습니다. CSS란 무엇인가요? CSS의 의미는 Cascading Style Sheet 의 약자입니다. CSS는 HTML의 요소를 화면에 가시화할 수 있으며, 많은 HTML 스타일을 저장하여 따로 디렉토리를 만들고 그 안에 .css 문서 안에 코딩을 하게 되면 여러 html 레이아웃을 제어 할 수 있습니다. 디자인, 레이아웃 등 다양한 Function과 모바일이 보급되며 대중화 되어 반응형 웹 디자인을 할 때 필수적인 요소로 자리매김 하였기 때문입니다. CSS는 왜 써야할까요? HTML은 웹 페이지의 레이아웃 형식을 지정하기 위해 Tag를 포함하지 않았습니다. 일반적으로 HTML만 이용하여 웹 개발을 할 경우 일일히 Tag마다.. 2017. 8. 14.

티스토리툴바