[CSS]CSS 기본 정리 - 3

1. 배경 이미지
background-image: url('주소');

 

background-repeat : no-repeat;

이미지의 반복여부

 

background-position : center;
이미지의 위치

 

background-size: cover;
cover 높이나 넓이기준으로 이미지를 가득채움
contain은 높이나 넓이기준으로 이미지가 잘리지않게 채움

한번에 작성하기
background : url('주소') no-repeat center / cover;


2. 그라디언트
background-image : linear-gradient( (각도), 시작색깔, 끝색깔);
만들기 복잡해서 인터넷에서 gradient generator 검색하면 쉽게 만들 수 있음


3. 배경 위에 그라디언트 겹쳐보기
background-image :
  linear-gradient( (각도), 시작색깔, 끝색깔) ,
  url('이미지 주소');

 

4. 그림자
box-shadow : 가로 세로 (블러크기) ((퍼지는 정도)) 색깔;
box shadow generator 검색해서 사용

 

5. 불투명도
태그 전체에게 불투명도를 적용한다.
opactiy : 0~1;

 

6. 아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png가 깔리고, 맨 밑에는 c.png가 깔립니다.
background-image:
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');

 

7. 박스모델
margin : 테두리 밖 여백
border : 테두리
padding : 테두리 안 여백
content : 내용

 

 

8. border(외곽선)
border : 1px solid #ffffff;
border-radius : 모서리의 둥근정도 설정

 

9. box-sizing
width와 height 길이의 기준을 정해줌
border-box : 보더, 패딩, 컨텐츠를 합한값이 width, height가 됨
content-box : 컨텐츠 크기가 width, height가 됨, 그 이후 padding과 border값이 더해짐

 

10. overflow
박스 크기를 넘어가는 내용의 디자인 설정
hidden 넘친 내용을 숨겨줌
scroll 넘친 내용을 스크롤해서 볼 수 있음

white-space : nowrap;
white-space는 content 안에 있는 공백 문자를 의미(띄어쓰기나 줄 바꿈)
nowrap은 줄바꿈을 안하겠다는 의미

overflow : scroll; 과 같이 사용하면 가로 스크롤이 가능하다


11. 마진 상쇄(margin collapsing)
세로 마진이 겹칠 때 더 큰 마진을 적용한다
부모 자식간에도 세로 마진이 겹칠 수 있다.
부모요소에 보더나 패딩이 있어 경계가 생기는 경우에는 마진상쇄가 일어나지 않는다


12. 디스플레이

- block 블록
h1 p div 같은 것
블록은 위에서부터 아래로 배치 됨
너비랑 높이를 지정가능 함

- inline 인라인
a span 같은 것
평소에 글 쓰는 방향
화면에 꽉차면 다음 줄로 넘어강
너비나 높이를 지정할 수 없음
예외적으로 img 같은 것은 가능함
마진은 가로로(글 쓰는 방향)만 가능, 패딩은 둘다 가능하다

- 인라인 블록
inline-block
배치는 인라인처럼 되지만 크기를 지정할 수 있으며 마진,패딩이 다른 영역을 침범하지 않음

 

13. float
글과 같이 이미지를 삽입할 때 많이 사용
left right를 많이 쓴다.