반응형

트랜스폼은 바꾸다는 뜻으로 도형 엘리먼트 같은것들을 회전 , 반전 같은 모양을 바꾸는걸 뜻합니다. 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
반응형

CSS 의 FLOAT 는 LEFT, RIGHT 로 정해서 설정할수있다

주로 그림에 쓰며 그림과 글이 어울려서 서로 가각의 공간을 차지하면서

표한하기위해 쓴다.

​

clear 는 float의 영향을 안받게할수있다.

float은 left로 설정할경우 공간이 남으면 차곡차곡 쌓이고 없으면 밑으로 떨어진다

clear는 이걸 both,left,right 셋중 하나로 작성하여 float이랑 상관없이 밑으로 떨어지게 할수있다.

​

그리고 border를 할경우 테두리겹침현상이 일어날수있는데 그럴경우 margin 을 -1px 로 사용하면된다

또한 float으로 사용할경우 크기를 고정시킬떄 있는대 그럴경우 크기가 안맞는경우가있는대

boxsizing : boder-box 로 사용하여 크기를 바꿔주면된다.

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

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

CSS - Transform  (1) 2019.03.05
CSS -background  (0) 2019.03.05
CSS - flex  (0) 2019.03.05
CSS - 타이포그래피  (0) 2019.03.04
CSS - box-sizing  (0) 2019.03.04
반응형

​

시작은 css 의 display의 flex 라고 지정하고선 시작을 한다

flex는 부모태그에 지정을해서 자식태그들이 정렬 되게 한다.

​

​

flex 를 안줬을경우

​

flex를 줬을 경우

​

flex - direction 속성

​

1. flex-direction:row

row 는 기본값으로 flex-direction 이 설정안되도 row 가 기본값으로 들어가있음

row 는 가로를 뜻함 (행) 그래서 item 들이 가로로 정렬

​

​

2. flex-direction:column

column (세로 , 열) 으로 설정하면 item 들이 세로방향으로 정렬됨

​

​

3. flex-direction : column-reverse

column-reverse (세로 , 열) 으로 설정하면 item 들이 세로방향으로 반대로 역? 정렬됨

div의 내용까지 거꾸로 시작하면서 배치됨.

​

4. flex-direction : row-reverse

row-reverse (역가로 , 역행) 으로 설정하면 item 들이 가로방향으로 역방향으로 시작됨

div 내용도 오른쪽부터 순서대로 시작

flex - basis: 속성

​

basis는 기본값이라는 뜻이다 , 하위 엘리먼트들에게 크기값을 설정한다.

flex-direction 속성에 따라 basis(기본의) 의 크기값이 설정된다.

column 일 경우 세로의 크기가 200px

row 일경우 가로의 크기가 200px

내가 설정한 width 또는 height 는 무시되면서 설정된다.

1. flex - grow 속성

자식 엘리먼트에 사용하며 부모의 크기를 균등하게 나눠가진다.

​

flex-grow : 0 일경우

기존 설정된 width와 height 의 크기에 따라 크기가 할당된다

​

​

flex-grow : 1 일경우

각각의 엘리먼트들의 flex-grow:1 이라는 속성이 가지고잇어

1:1:1 비율로 부모의 크기를 차지한다.

​

​

flex-grow : 한엘리먼트만 2일 경우

위그림처럼 2번째 엘리먼트만 grow를 2로 할경우

1:2:1 비율로 크기가 설정이된다.

이경우 width 를 설정할경우 영향을 받고 글씨나 content가 잇을경우 그거에도 영향을 받는거 같은데

확실히 어떻게 영향을 받는지를 모르겟다 다 제거하였을경운 저렇게 깔끔하게 1:2:1 비율이 나온다

​

​

​

​

2. flex - shrink 속성

반응형? 크기를 줄일경우 (부모의 크기지정 x 자식 크기지정 o) 하였을경우 창크기를 줄이면

부모의 크기가 줄어들었다가 부모의크기가 다줄고나선 자식의 크기가 줄어드는데

자식의 크기를 비율로 줄어들게 할 수 있다.

(줄이기전)

(줄이고나서)

이렇게 1:2:1 비율로 빨리 줄어든다

flex-shrink 가 0 일경우 줄어들지 않는다.

​

3. flex - flow 속성

flex-flow 속성은 flex item의 flex-direction 속성과 flex-wrap 속성의 값을 한꺼번에 작성할 수 있는 단축 속성입니다.

flex-flow : || // 둘 중 하나 또는 둘을 선언해야 한다.

flex 의 여러 속성들

컨테이너(부모) 적용 속성들

1. flex-wrap

기본값은 nowrap 이며 컨테이너에 쓰며 컨테이너 안의 items 들의 크기가 컨테이너보다 크면

(컨테이너 < items) 일경우 아이템들이 부모컨테이너를 넘지 않고 줄바꿈이 되는것을 말한다

​

flex-wrap : nowrap; // items들이 커도 줄바꿈을 안한다 (defult)

flex-wrap : wrap; // items들이 크면 줄바꿈을 한다

flex-wrap : wrap-reverse; // item들의 배치를 12345 에서 역순으로 54321로 배치한다

​

​

​

2. ALIGN-ITEMS ( 수직 정렬 : 세로 (direction:row일경우))

컨테이너에 쓴다. 기본값은 stretch(뻗다)

컨테이너의 크기에 맞춰 세로크기들이 정렬되거나 커진다.

**direction: column 일경우 수직정렬이아니라 수평정렬로 바뀐다.**

align-items : flex-start // 수직 세로로 윗줄로 items의 크기들에 맞춰서 정렬

align-items : flex-end // 수직 세로로 아랫줄로 items 정렬

align-items : center // 수직 세로로 가운데로 iems 정렬

align-items : baseline // 보이지않는 줄로 item 정렬 @아직도 잘 모르겟닷 이건

align-items : stretch // 부모 컨테이너의 모든공간 차지 (기본값 : default)

​

​

3.JUSIFY-CONTENT (수평 정렬 : 가로 (direction:row일경우))

부모컨테이너 안의 items 들을 가로로 정렬하는것을 말한다.

**direction: column 일경우 수평정렬이아니라 수직정렬로 바뀐다.**

​

justify-content : flex-start // 왼쪽에서부터 차례대로 시작

justify-content : flex-end // 오른쪽에서부터 차례대로시작

justify-content : space-between // items 사이의 간격을 균등하게 띄운다

justify-content : center // items 들을 가운대로 배치

justify-content : space-around // 양 끝에 공간을 주고 items 사이의 공간들을 균등하게 띄운다.

​

​

4.ALIGN-CONTENT (행으로 그룹지어서 수직정렬 (direction:row일경우))

기본값은 stretch 이며 align-items랑 매우 비슷하지만 align-items 들은 안에있는 아이템들을 각각 다

사용하여 정렬하였다면 이 content는 가로 행으로 기준으로 그룹하여 그룹정렬한다

(wrap 가 nowrap 일경운 다 한줄로 나오지만 wrap 일경운 크기에맞춰 items들이 줄바꿈된다)

align-content : stretch // 기본값 각 items들이 모두 공간을 차지

align-content : flex-start // items의 행그룹들이 크기별로 위로 정렬

align-content : flex-end // items의 행그룹들이 크기별로 아래로 정렬

align-content : center // items의 행그룹들이 크기별로 가운데로 정렬

align-content : space-between // items의 행그룹들이 그룹사이에 균등한 공간을 두고 정렬

align-content : space-around // 행그룹들이 컨테이너의 위아래 공간을 두고 행그룹 사이사이 균등공간 정렬

align-content : space-evenly // 부모컨테이너와 행그룹사이사이의 공간을 균등히 정렬

items(자식) 적용 속성

align-self (item개별의 수직 정렬)

items의 각각의 개별 자식들에게 수직정렬을 주고싶을떄 사용

align-self : auto // item 의 자동정렬

align-self : flex-start // item 의 처음부터 정렬

align-self : flex-end // item 의 마지막부터 정렬

align-self : center // item 의 가운데 정렬

align-self : baseline // item 의 가상의 줄을 만들어 정렬 (가상의 줄이 뭔지잘모르겠다)

align-self : stretch // item 의 전체 차지 (단어 뜻은 뻗기)

​

flex (flex를 한줄로 쓰기)

.item { flex: flex-grow [flex-shrink] [flex-basis];

이렇게 flex를 한줄로 줄여서 쓸수있다.

flex : 1 0 100%;

첫번쨰 프로퍼티는 grow , 2번쨰는 shrink , 3번째는 basis가 된다.

​

order (items 의 순서)

.item1 { order : 1;}

.item2 { order : 2;}

.item3 { order : 3;}

.item4 { order : 4;}

이렇게 정렬 하면 정렬 순서대로 item 들이 배치가된다

1
2
3
4
5
6
7
8
9
10

본 필자의 내용정리는 이고잉 자바스크립트를 보고 공부한것을 적은것이다.

아래 주소는 생활코딩 홈페이지에서 가져온 예제 작동? 예제들이다.

https://codepen.io/enxaneta/pen/adLPwv

flex layout

flex로 레이아웃을 짜보자. 먼저 가장 대표적이고 많이 사용되는 레이아웃을 소개하겠다.

flex holy grail layout (성배레이아웃) 이다.

사람들이 레이아웃을 여러가지방법으로 짜면서 가장 많이쓰고 화두되는 레이아웃 방법이다.

​

​

​

주로 이런식의 레이아웃으로 짠다

아래는 소스코딩과 브라우저 띄운 모습이다.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, consectetur! Quam, id debitis repudiandae illo accusamus voluptatum iure eaque, sapiente expedita non nulla doloremque voluptatibus natus, atque eos aperiam velit. Omnis officiis voluptates id itaque ad ducimus quisquam sunt! Fugiat iusto explicabo atque eaque fuga error harum facere ad repellat eius? Eum cumque velit tenetur voluptate at quia architecto odio? Amet dignissimos architecto atque libero quibusdam animi, aut, iure sunt blanditiis consequatur recusandae modi, cumque enim et placeat ipsa eveniet quod necessitatibus explicabo dolorem omnis natus cum! Iure, quisquam beatae. Architecto quod dolor pariatur ex omnis rerum dignissimos inventore possimus quis at ipsum aut sunt fugit dolores facilis, perspiciatis ducimus repellat quas alias ea! Possimus eum nam vel alias atque. Quis, repellat corporis. Recusandae aspernatur nemo facilis quos vitae facere provident asperiores porro labore quae ullam consequuntur eum minima ipsa soluta beatae maiores at minus, aperiam temporibus libero dicta. Corrupti. Pariatur aliquam ipsam vero beatae. Quaerat a ea iusto nisi quo eum, tempore dolorem. Eius, libero ipsa. Soluta facilis libero, non magni quo quod reiciendis modi! Nam id quaerat tempora!

CopyLight 아빠@꼬릿말

​

여기까지 보시느라 수고하셨습니다.

그러면 게임을 통해 숙련을 해봅시다.

이건 유명한게임이라 잘알고 계실 겁니다.

개구리를 색깔 맞춰 잎파리에 놓는겁니다.

http://flexboxfroggy.com/#ko


반응형

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

CSS -background  (0) 2019.03.05
CSS - FLOAT  (0) 2019.03.05
CSS - 타이포그래피  (0) 2019.03.04
CSS - box-sizing  (0) 2019.03.04
CSS - GRID  (0) 2019.03.04
반응형

css 의 단위

​

px , em , rem

PX

EM

REM

16px

1em

1rem

절대적 , 고정된크기

상대적

상대적

브라우저 설정 크기 고정

브라우저 설정 크기 바뀜

브라우저 설정 크기 바뀜

설명이 좀 빈약한대

결론적으로 REM을 써야 한다.

그 노인모드로 글씨를 50% 200% (돋보기말고 브라우저설정) 에서 바꿀때

PX 는 고정이지만 REM 은 상대적으로 변함.

​

​

text-allign

center , left , right 는 각각 이름에 맞게 정렬하는거고

justfy 값은 오른쪾 왼쪽을 균형에 맞게 공백을 재배치한다.

​

​

font

font-weight : 글씨의 굵기

font-height : 행과 행 사이의 굵기

font-family : 글씨 글꼴 설정

ex) font-family: arial,verdana,"Helvetica Neue" ,serif; /* serif (장식이 있는폰트) sans-serif cursive (흘림체) fantasy monospace (고정폭) */

위 에 처럼 브라우저에 arial 폰트가 없으면 verdana 폰트 그것도없으면 helvetica 폰트가 나온다..

한글폰트의 경우는 차이가 없다, serif 를 쓰면 장식이 있는 폰트를 쓸것이고

sans-serif를 사용하면 장식이 없는 폰트를 사용한다.


산세리프체(sans-serif, 여기서 sans는 "없음"을 뜻하는 프랑스어 낱말 sans에서 비롯)로 부른다

이처럼 뒤에 serif ,sans-serif 를 사용할수있다.

만약 monospace를 사용할경우엔 크기가 고정폭이 된다.


​외부 FONT 가져다 쓰기 (google font)


1. google 에 google font 검색

2. 기본적으로 open sans 검색

3. 클릭후 customize 로 선택후 embed 에서 링크 복사


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

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

CSS - FLOAT  (0) 2019.03.05
CSS - flex  (0) 2019.03.05
CSS - box-sizing  (0) 2019.03.04
CSS - GRID  (0) 2019.03.04
CSS - multi-column (다단)  (0) 2019.03.03

+ Recent posts

티스토리툴바