반응형

카카오 클론 코딩

​

카카오 클론코딩 파일입니다.

githubpages로 작동하며

파일 첨부합니다


KAKAO+완료.zip


​

아래 카카오톡 이미지 6장을 토대로

front 단만 만들었습니다.

html+css 로 구조만 짯습니다.

아이콘 같은경운 fontawesome를 사용하였고

추가 필요하신 css 부분은

소스를 첨부하시면 될것같습니다.

*주요기술*

css - flex








 
 
 
 
 

​


반응형
저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS - 가로세로단위 (VH,VW,REM 등)  (0) 2019.03.05
CSS - Box-shadow , text-shadow (그림자효과)  (0) 2019.03.05
CSS - Transition  (0) 2019.03.05
CSS - filter ,blend,접두어 (브라우저별 사용)  (0) 2019.03.05
CSS - Transform  (1) 2019.03.05
반응형

Transition 트랜지션 (화면전환)

​

l transition-property : 엘리먼트의 효과를 함께 적용할 속성들

l transition-duration : 장면전환의 시간을 설정한다

l transition: (property | duration , property | duration) 을 함께 쓸수있다

l transition:-delay : 장면전환이 시작될때 약간의 딜레이를 주고 할수있다.

l transition:-timing-function : 장면전환이 될떄의 x,y의 시간차 전환

◎ transition-timing-function 속성

▼ 내용

안에 있는 property 중 cubic-bezier(); 안에 숫자를 입력하면 속도롤 커스텀마이징 할수있다.

​

​​https://matthewlein.com/tools/ceaser

 
Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser CSS Easing Animation Tool Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love th...

matthewlein.com

◎ transition 과 transform 합친 예제

▼ 내용

div 크기가 줄어들면서 회전한다.

<html> <head> <style> div{ height:200px; width:200px; background:blue; color:White; transition: all .5s ease-in-out; /*모든 속성에대해 장면전환 transition 적용*/ } div:hover{ transform: rotate(5turn) scale(0.5,0.5); /*5번 회전 , 크기 1/2배로 줄임*/ background-color : red; color : green; } </style> </head> <body> <body> <div>안녕</div> </body> </body> </html>

​


반응형
저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS - Box-shadow , text-shadow (그림자효과)  (0) 2019.03.05
CSS - 카카오톡 클론 코딩 (프론트단만. BY nicollas)  (0) 2019.03.05
CSS - filter ,blend,접두어 (브라우저별 사용)  (0) 2019.03.05
CSS - Transform  (1) 2019.03.05
CSS -background  (0) 2019.03.05
반응형

filter 를 쓰기전에 이건 나온지 얼마안된 속성이라 CSS 속성 중에 접두어를 붙어야 되는 경우가 있습니다. 각 접두어의 의미를 알아 보겠습니다. 쓰는 방법은 속성 앞에 붙이면 됩니다.

​

l -webkit- : 구글 , 사파리 브라우저에 적용

l -moz- : 파이어폭스 브라우저에 적용

l -ms- :익스플로러에 적용 , 보통 생략합니다.

l -0- : 오페라 브라우저에 적용

​

​

◎ 브라우저별 css 접두어

▼ 내용아래 샘플은 그라데이션 속성을 브라우저별로 나눈것입니다.

접두사를 써야되는 대표적인 속성입니다. 참고로 webkit은 크롬과 사파리가 채용한 웹브라우저 엔진 이름입니다.

#grad1 { height: 200px; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(left, red , blue); /* For Opera 11.1 to 12.0 */ background: -o-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */ background: -moz-linear-gradient(right, red, blue); /* Standard */ background: linear-gradient(to right, red , blue); }

FILTER 속성

l grayscale : 회색화면으로변함 (자세한 내용은 아래 그림 참조)


​



◎ filter 예제

▼ Filter 기능은 위 그림과 같이 txt , img에 적용하여 위에 그림처럼 다양한 효과를 낼수있다. 마치 포토샾 디자인 , 또는 카메라 사진필터를 적용한것처럼 다양한 효과를 CSS 에서 적용할수있다.

또한 서로 다른 효과를 동시에 줄수도 있다.

img{ -webkit-filter: blur(2px); -o-filter: grayscale(100%); filter : brightness(30px) grayscale(100%); }

blend 속성 (blend : 합성,혼합)

l background-blend-mode : 배경화면들 끼리 섞여서 그림 표현

l mix-blend-mode : 블랜드를 주고싶은 엘리먼트와 그 엘리먼트의 배경과 합성하는것.

​

◎ background-blend-mode

▼ 서로 다른 배경화면끼리 섞어서 표현것을 말한다




<style> .blend{ background-color: rgba(255,0,0,0.5); /* 배경*/ /* rgba(255,0,0,0.5) 색깔은 빨간색 0.5는 투명도를 뜻한다. 1은 : 불투명 0은 : 투명 */ background-image:url('산.jpg'); /* 배경2 */ background-blend-mode: darken; /* 다양한 방법으로 섞는다 */ /* 배경 2개중 산 이미지와 50%의 투명도를가진 빨간색을 다양한 방법으로 섞어놧다*/ } </style>

​

◎ mix-blend-mode

▼ 배경화면과 엘리먼트들을 섞는다. 아래사진의 x 랑 y 는 텍스트고 인물사진은 배경이다.

x 와 y 가 배경화면과 섞여서 이처럼 다양한 색감으로 표시가 된다.

<html> <head> <style> body{ background-image:url('사람.jpg'); /* 배경 */ } .blend{ color: red; mix-blend-mode: screen; /* 엘리먼트를 배경과 섞는다 */ } </style> </head> <body> <div class="blend"> X Y </div> </body> </html>



반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 카카오톡 클론 코딩 (프론트단만. BY nicollas)  (0) 2019.03.05
CSS - Transition  (0) 2019.03.05
CSS - Transform  (1) 2019.03.05
CSS -background  (0) 2019.03.05
CSS - FLOAT  (0) 2019.03.05
반응형

트랜스폼은 바꾸다는 뜻으로 도형 엘리먼트 같은것들을 회전 , 반전 같은 모양을 바꾸는걸 뜻합니다. transform은 여러가지 속성이 있지만 여기서 이걸 다기술하긴 힘들고 URL 링크로 대체합니다.

TransForm 은 엘리먼트가 block 이거나 inline-lock 일경우에만 동작합니다.

​

https://codepen.io/anon/pen/BMOQgd

​

▼ 트랜스폼 속성에 사용되는단위

l deg : 각도 (degree)

l turn : 바퀴 (1바퀴 2바퀴 3바퀴 1= 360도)

l rad : radians (모서리 둥글게하는)

l grad : gradians 등등

​

◎ transform 속성 (가운데에서 엘리먼트의 크기와 각도를 다양하게 바꿈)

div{ background-color: red; /* 배경 */ height: 200px; width: 200px; transform: scale(5 , 5) rotate(180deg); //가로를 5배크기 세로를 5배 크기 //이렇게 설정값을 2개 넣을수있음 }

◎transform-origin 속성 (바뀌는 크기를 가운데가아닌 곳에서 바꿈)

<style> div{ background-color: red; /* 배경 */ height: 200px; width: 200px; } div:hover{ transform: scale(5,5); transform-origin: left 50%; //가로 , 세로 (기준점) } </style>

​

syntax - mozilla

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: unset;

css로 표현한 3d

​https://codepen.io/thebabydino/pen/adYaQX


반응형
저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS - Transition  (0) 2019.03.05
CSS - filter ,blend,접두어 (브라우저별 사용)  (0) 2019.03.05
CSS -background  (0) 2019.03.05
CSS - FLOAT  (0) 2019.03.05
CSS - flex  (0) 2019.03.05
반응형

background-color : tomato; // 배경색을 토마토색깔

background-imge: url('퓨마.jpg'); //배경이미지 경로지정

background-repeat : repeat; //배경 반복 , no-repeat// 노반복 , repeat-x,y //x축만반복 y축만반복

background-attachment: fixed //배경 고정 scroll 배경 스크롤

background-size : 500px 100px ; //배경이미지 가로 500 세로 100 지정

//cover 화면을 일단 그림으로 다채운다 //contain 화면의 이미지 손실없이 채운다

background-position : center //배경이미지의 위치를 지정할수있다 //left , right // 100% 100%

​

background: tomato url('run.png') no-repeat fixed center // 이렇게 축약형으로 사용할수도 있다.

.profile .profile_header{ background-image: url('../images/backgrounsimg.jpg'); /* background-color: red; */ background-position: center center; background-size: 100% 100%; }


반응형
저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS - filter ,blend,접두어 (브라우저별 사용)  (0) 2019.03.05
CSS - Transform  (1) 2019.03.05
CSS - FLOAT  (0) 2019.03.05
CSS - flex  (0) 2019.03.05
CSS - 타이포그래피  (0) 2019.03.04

+ Recent posts

티스토리툴바