[CSS] [8~11/11] 웹 퍼블리싱 끝장내기

모든 정보는 얄코 유튜브(새 창으로 열기)를 참고하였습니다.

 

8. 배경 꾸미기

background-image : :url(주소) 이미지 넣기

 

background-repeat : repeat이 기본값인데 원본 크기의 사진을 반복해서 채운다.

:no-repeat 반복 채우기 안 하기

:repeat-x 가로만 반복해서 채운다.

:space  모서리에 하나씩 채운 뒤, 빈 공간에 채운다.

:round 반복하며 이미지를 채우면서 이미지 크기를 조절한다.

:repeat space처럼 혼합 가능

 

background-position : 기본 위치 지정 가능 (left, center, 50% 50% 등등)

:center bottom처럼 혼합도 된다. default값은 top left이다.

 

background-size : 이미지 크기를 조절한다

:auto 자동 조절한다

:10% 크기를 퍼센트로 조절한다

: 200px auto 가로는 200px여유 주면서 세로만 크기 조절한다.

:contain 이미지형태가 변하지 않으면서 닿는 데까지 채운다.

:cover 이미지를 화면에 꽉 채운다. (조금 잘림)

 

css 꾸밀 때 보통 no-repeat, center, contain을 사용한다.

 

 

 

배경에 그라데이션 넣기

background: linear-gradient

색상 여러 개를 넣을 수 있고 기울기, 중심선도 설정 가능하다.

 

 

요런 것도 가능

 

---

9. 포지셔닝

div(부모) 안에 div(자식) 9개가 들어있다. 정 가운데 div(노란색)안에 div(빨간색)를 하나 더 넣었는데

position :  요소들이 화면에 어떻게 배치될지 정한다.

:static 동적으로, 페이지의 흐름을 따른다. top, bottom 등 영향을 안 받는다.(default)

:relative 상대적으로 혼자 떨어져 있게 설정할 수 있다. 다른 칸들은 변화 x

:absolute 첫 부모 요소를 기준으로 위치를 삼을 수 있다.

:fixed 부모가 아닌 화면을 기준으로 따른다. 스크롤도 영향 x (팝업에 효과적)

:sticky 화면에 붙어있다가 일정 스크롤 내려도 따라오게 만든다.

 

 

3가지 색의 div를 만든 모습. 나중에 만든 게 앞으로 나온다.

z-index : (숫자) 앞뒤의 우선순위를 정한다.  숫자가 높을수록 앞으로 나오고 음수도 가능하다.

 

---

10. 요소들을 감추는 방법들

cursor : 커서가 올라갔을때 커서 모양을 바꿀 수 있다.

:auto 상황에 맞게 커서가 바뀜(default)

:default 기본에서 아무런 변화가 없다.

:none 커서가 사라진다.

:pointer 클릭 모양으로 바뀐다.

:zoom-in 돋보기 모양으로 바뀐다.

:not-allowed 금지 모양으로 바뀐다.

커서 모양들

 

 

 

요소를 감추는 세가지 방법이 있다.

1.  opacity: 0~1

0이랑 가까울수록 안 보이게 된다.

하지만 단순 가리는 용도라 커서랑 상호작용이 된다.

 

2. visibility: hidden

가려지면서 커서랑 상호작용도 안된다.

 

3. display: none

화면에서 아예 빼버린다. 만약 정렬된 형태로 뒤에 요소가 있으면 앞으로 당겨오게 된다.

 

---

11. Flex 레이아웃

제일 중요하다!! 여기가 따로 정리가 잘 되어있다.

화면을 채우는 display부터 알아보자.

 

span과 div 기본 범위를 알아봤을때를 기억 하는가?

div의 기본값인 블럭과 마찬가지로 가로로 늘어난다.

 

flex를 사용하면 반대로 세로로 늘어난다.

 

 

inline-flex를 사용하면 아래로 밀어내지 않고 옆으로 올 수 있게 한다.

 

 

 

flex-direction : 화면 display를 다시 조정할 수 있다. 여기서 block은 제외한다

 

:row 가로로 방향으로 배치된다.(default)

:colume  세로로 방향으로 배치 된다.,

뒤에 -reverse 붙여서 거꾸로도 가능하다.

 

 

flex-wrap : 자식 요소가 넘쳤을때 처리하는 방식이다.

:nowrap 줄바꿈을 하지 않는다(default).

:wrap 줄바꿈을 한다.

 

★ flex-flow로 flex-direction, flex-wrap을 한번에 지정할 수 있다. 

예) flex-flow: row wrap;

 

여기선 내부 div를 아이템이라고 하겠다.

 

justify-content : 메인축의 방향을 정렬한다.

flex-start :아이템들을 시작점으로 정렬한다.(default)
flex-direction이 row일 때는 왼쪽, column일 때는 위

:flex-end 아이템들을 끝점으로 정렬한다.
flex-direction이 row일 때는 오른쪽, column일 때는 아래

:center 아이템들을 가운데로 정렬한다.

:space-between 아이템들의 사이에 균일한 간격을 만들어 준다.
:space-around 아이템들의 둘레에 균일한 간격을 만들어 준다.
:space-evenly 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

 

align-items : 수직축 방향 정렬

:stretch 아이템들을 수직축 방향으로 채운다.

:flex-start 아이템들을 시작점으로 정렬한다.

:flex-end 아이템들을 으로 정렬한다.

:center 아이템들을 가운데로 정렬한다.

 

:baseline 아이템을 텍스트 베이스라인으로 정렬한다.

 

justify-content: center;
align-item: center; 하면 화면 가운데에 박스를 두기 편하다!

 

 

align-content : 아이템이 두줄 이상 되었을때 정렬. 위에 적은 키워드랑 역할이 같다.

:stretch 아이템들을 수직축 방향으로 채운다.

:flex-start 아이템들을 시작점으로 정렬한다.

:flex-end 아이템들을 으로 정렬한다.

:center 아이템들을 가운데로 정렬한다.:space-between 아이템들의 사이에 균일한 간격을 만들어 준다.
:space-around 아이템들의 둘레에 균일한 간격을 만들어 준다.
:space-evenly 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

 

개구리 정렬게임에서 연습하며 배워보자.