속성_ display, background

속성
display 요소를 표시하는 방법을 지정함
- 기본 값이 인라인인 태그 : <span>,<a>,<img>,<input>,<select>,<em>,<mark>...
- 기본 값이 블럭인 태그 : <div>,<p>,<ol>,<ul>,<dl>,<dd>,<dt>,<h1>~<h6>,<table>...

속성값
black 요소를 블럭요소로 지정
inline 요소를 인라인요소로 지정
inline-block 가로를 100%로 차지하지 않으며 크기와 여백을 지정할 수 있음
none 요소를 보이지않게 해줌
imline-block지정시 margin없애는방법 
1. margin-right: -6px;
2. body에 fon-size: 0px; (다른요소에는 폰트사이즈를 직접 줘야함)

width사용시 %로 사용할시 최대크기는 부모요소의 크기이다.


css 배경 - 배경에 효과를 주는데 사용되는 속성들

1)background-color 배경색을 지정
red/#000000/rgb(r,g,b)/rgba(r,g,b,a)

2)background-image 배경 이미지를 지정
ex) background-image:url("dog.jpg");

3)background-repeat 배경 이미지의 가로 및 세로로 반복지정
no-repeat / repeat-x / repeat-y 

4)background-position  배경이미지의 시작 위치를 지정
top center bottm
left center right
ex) div { background-position: right bottom; } 오른쪽 아래에 위치하도록 설정

5)background-attachement : 배경이미지에 스크롤을 첨부할지 정함
scroll : 기본값 / Fixed : 그림은 고정되어있음

6)background-size 배경이미지의 크기
ex) div { background-size: 200px; auto; } 너비, 높이

속기법
background: url(' ') no-repeat 50px 50px / 200px (위치 다음 사이즈를 입력)\

7) background-blend-mode / 배경화면 겹치도록하기 overay등..