[국비 코딩 수업 4일차!] CSS편 마무리 / 실습

CSS는 결국 어디에다가 어떤 디자인을 할 것인가! 다.

 

-플렉스(flex) :  1차원의 레이아웃을 만드는 개념! (정렬해주는 것. 수직or수평)

 

 

-flex container : 플렉스를 사용해서 부모의 역할을 함.

*. display, fle-flow, flex-direction, flex-wrap, justify-content, align-content, align-items

 

-flex items : 플렉스를 사용하면서 자식들을 역할을 함.

*, order, flex, flex-grow, flex-shrink, flex-basis, align-self

 

-display

*. flex :flex container 정의하기 위한 속성.

*. inline-flex : inline  요소처럼 사용할 수 있게 해주는 속성.

 

인라인 요소를 사용함으로써 최대한 커지려는 영역을 줄어들게 만듦.

 

-flex-direction: 주축(x,y 방향)을 설정.

*.row : 좌에서 우로 진행하는 방향

 

*.row-reverse : 우에서 좌로

 

*.column, column-reverse

 

-flex wrap

*.nowrap (기본값)

*.wrap : 여러줄로 묶음.

*.wrap-reverse : 반대로 묶음.

 

-justify-content

*. 주축의 정렬방법을 설정 (수평)

*. flex-start 

*. flex-end 

*. center 

 

 

-align-content (잘 사용하지는 않음)

*. 교차축(수직)의 여러 줄 정렬(수평) 방법.

*. stretch  : 시작점으로 정렬

*. flex-start  : 시작점으로 정렬

*. flex-end : 끝점으로 정렬

*. center :가운데 정

 

-align-items (주로 사용함)

*. 교차축의 한줄 정렬 방법

*.  stretch

*. flex-start : 시작점으로 정렬

*. flex-end : 끝점으로 정렬

*. center : 가운데 정렬

반응형

 

-order

*. 기본값: 0

*. 숫자 : 숫자가 작을 수록 먼저.

.container .item:nth-child(2) { order:2; }

오더는 기존 열에서 앞 뒤로 보낼 수 있음.

 

-flex-grow

*. flex item의 증가 너비 비율

*.기본값:0

*.숫자:증가비율

 

-flex-shrink

*. flex-grow : flex item의 증가 너비 비율

*. 기본값 : 0

*. 숫자: 증가비율

 

-flex-shrink : flex items의 감소 너비 비율

*. 기본값 :1

*. 숫자 : 비율감소

 

-flex-basis : flex items 의 공간 배분 전 기본 너비

*. auto : 요소의 content 너비

*. 단위 : px, em rem 등

 

- 전환 : transition

요소의 전 상태와 후 상태의 중간 단계를 자연스럽게 만들어주는 효과

*. transition : 속성명 (지속시간, 타이밍 함수, 대기시간;)

*. transition-property : 기본값 all , 속성 이름 : 전환 효과를 사용할 속성명을 명시.

 

*. transition-duration

 기본값 : 0s

 시간 : 지속시간 (s)을 지정

단축 속성 사용시필수 속성

 

*. transition-delay

기본값 :0s

시간:대기시간(s)를 지정

 

-변환 : transform

transform : 변환함수1 변환함수2 변환함수 3 ...

transform : 원근법 이동 크기 회전 기울임.

 

/변환함수에는 2/3d : matrix(n, n, n, n)

translate(x,y)

translateX(x)

translateY(y)

scale(x,y)

rotate(degree)

skewX(x)

skewY(y)

 

/변환함수(3d) : matrix3d(n, n, ..., n)

 

*. rotateX(x)

*. rotateY(y)

*. perspective(n) : (함수로 사용할 때는) 관찰 대상에 적용

 

속성

 

*.perspective : 값(px 단위 등, 관점) 관찰 대상의 부모에 적용.

*.backface-visibility : visible 또한 hidden (뒷쪽을 보여줄까 말까한)

 

 

 

---

 

 

 

오늘은 4일 간 배웠던 html 코딩 방법으로

간단한 예제와 실습을 해보려고 한다.

 

 

div를 통해 박스를 만들어 배경 안으로 이미지를 넣을 것이다.

이번에는 css를 따로 잡아서 진행하기 위해 스타일을 html에 추가하지 않았다.

 

 

 

div값에 다양한 설정을 주었고, 보더와 트랜스폼  라디우스와 같은 기능을 추가로

.hero*32>.image  하면 설정한 값이 32개가 만들어진다.

 

 

---

 

 

 

 

오버워치 페이지 만들어 봤습니다.

 

코딩 5일차! 1. JAVASCRIPT