[포스코x코딩온] 풀스택 부트캠프 1,2주차 정리 -4 (CSS 完)

positon:

position: static;  

(default값)

 

position: relative;

(자기 자신을 기준으로 움직임,

top:0, left:0은 자신이 원래 있던 자리, 자신이 있던 자리는 다른 tag가 들어갈 수 없음.)   

 

position: absolute;

(static 요소가 아닌 부모 요소를 기준으로 움직임.

top:0, left:0은 부모의 (0,0)  계속 부모를 찾다가 없으면 viewport를 기준으로 설정됨)

 

position: fixed;

(view port를 기준으로 움직임.

top:0, left:0은 viewport의 (0,0)으로 설정됨)

 

*positon 값을 absolute와 fixed로 설정하고 top 등의 값을 주지 않으면 block element일 때 위치했어야 할 위치에 있다.

*position값이 absolute, fixed인 경우 display:block으로 자동 설정된다.

---

z-index:

position이 relative, absolute, fixed 값인 tag에 대해서 z축 값을 지정해준다.

즉, 여러 element들이 겹쳤을 때 윗 방향을 설정하는 속성, 따로 설정하지 않는다면 html에서 뒤에 정의된 값이 위에 있다.

수가 높을수록 위로 가서 아래 tag들을 덮는다.

 

---

background-size:

background-size: 100px;

(width 값만 설정, y축은 원본 비율 유지)

background-size: 100px 200px;

(width, height)

background-size: cover; 

(큰 pixel 기준으로 담음, 사이즈가 잘리지 않는 대신 distort 됨, 원본 비율을 유지하고 싶다면 object-fit: cover;를 주자)

background-size: contain;

(작은 pixel 기준으로 담음)

---

background-attachment:

background 이미지가 overflow 했을 때 어떻게 할건지

 

 background-attachment: local;
        (default값)

 background-attachment: scroll;
(스크롤을 하면 백그라운드 이미지도 같이 스크롤 되기 때문에 스크롤을 해도 움직이지 않는 것처럼 보임)
        

background-attachment: fixed;
view port(0,0) 기준으로 background 설정, 내부 스크롤을 움직이면 안움직이지만  외부 스크롤을 하면 움직임

 (*왜냐?  fixed를 하면 view port를 기준으로 background-size가 설정되기 때문으로

    내부 스크롤을 아무리 움직여도 바깥쪽의 view port를 바꿀 수 없기 때문이다. 다만 background-position 속성을 통해 바꿔줄 수 있다.

 

예제로 아래 코드를 container 속성에 넣고 background-image를 넣으면 view port의 넓은 쪽을 기준으로 background 이미지가 확대되어 div가 있는 틈만 배경이 보인다.

background-size: cover;
/* contain도 상관 없음.*/

background-attachment: fixed;

body에 background를 입힌 모습.

아래로 스크롤을 하면 background-image가 fixed 되었기 때문에 아래쪽 배경이 점점 잘리는 모습을 볼 수 있다.

 

---

flex

flex-direction

row, row-reverse, column, column-reverse 값이 있다.

flex-wrap:

 wrap, nowrap, wrap-reverse 값이 있다.

 

justify-content (주요 축 정렬)
align-items (교차축 정렬)

align-content  (두 줄 이상일 때 wrap을 어떻게 처리할건지, )

 

Q. flex에서 left, top에서 row 방향으로 시작되던 순서를 완전히 반대로 (right, bottom에서 시작) 하려면?

 

A:

flex-direction: row-reverse;
flex-align-items: flex-end;
flex-wrap: wrap-reverse;

---

transform

translate (x,y축 이동)

 

scale (크기 확대)

 

rotate (각도 돌리기)

 

skew (요소의 경사를 비틀어 왜곡시키기),

(x는 x방향으로 늘어나고 , y는 y방향으로 늘어남)

 

---

transition

가상선택자 (hover, active, focus 등)의 조건이 충족되었을 때만 수행하는 속성

 

---

animation

초 단위를 설정해서 from (0%)부터 to (100%) 까지 animation effect를 줄 수 있는 속성