css 배경속성(background,position(좌표))

 

 

배경관련 CSS 속성들 

.main-background {
  background-image : url(../img/shoes.jpg);
  background-size : cover;
  background-repeat : no-repeat;
  background-position : center;
  background-attachment : fixed;
}

background-size는 px, % 단위도 가능하고

cover는 배경으로 꽉채워주세요

contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다.

background-attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다. 

 

 

 

배경 두개 겹치기 신공 

 

.main-background {
  background-image : url(../img/shoes.jpg), url(person.jpg);
}

콤마로 이미지 두개를 첨부하시면 됩니다.

투명도를 지원하는 png 이미지를 사용하면 더 재밌는 디자인을 만들 수 있겠군요

 

 

 

 

배경에 검은색 틴트 주기 

 

설명하다

 

.main-background {
  background-image: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5) ), url(이미지경로~~) ;
 
}

linear-gradient 이건 색이 점진적으로 변하는 gradient를 줄 수 있는 키워드인데

여기에 투명도 0.5의 검은색을 입힌 후에 배경겹치기 스킬을 사용하면 됩니다.

 

 

 

 

 

주의해야할 margin 버그 

 

<div class="배경">
  <p>안에 글씨</p>
</div>

div 박스 안에 p 태그를 사용했습니다.

p 태그에 상단 margin을 주기 위해 margin-top을 주게 되면

div와 p가 동시에 margin-top이 생기게 됩니다. 뭔가 이상합니다.

 

 

이 현상은 margin collapse effect 라고 부르는 일종의 버그입니다.

원래 박스들의 테두리가 만나면 margin이 합쳐집니다. (박스가 내부에서 만나든 외부에서 만나든 상관없습니다.)

정확히 말하면

1. 마진을 하나로 합쳐주고

2. 혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용하게 됩니다.

 

그래서 두 박스의 테두리가 겹치지 않도록 해주시면 보다 더 정확한 마진 노가다를 하실 수 있습니다. 

강의 예제에선 부모 박스에 padding을 1px 이렇게 조금 주는 것으로 쉽게 해결 가능합니다.

불만이 있다면 웹표준을 관리하는 www.w3.org 이라는 단체에 따지도록 합시다.  

그리고 오늘 숙제도 해봅시다. 

 

좌표속성이 있습니다.

설명하다

 

.box {
  top : 20px;
  left : 30%;
}

top, left, bottom, right 라는 속성을 사용하면

요소의 상하좌우 위치를 변경할 수 있습니다. 

하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. 

position 속성은 좌표속성을 적용할 기준점이 여기에요~! 라고 지정해주는 역할입니다. 

 

 

 

position 속성은 크게 4개 값이 있습니다.

설명하다

 

.box {
  position : static; /* 기준이 엄서요 (좌표적용 불가) */
  position : relative; /* 기준이 내 원래 위치요 */
  position : absolute; /* 기준이 내 부모요 */
  position : fixed; /* 기준이 브라우저 창이요 (viewport) */
}

여기서 원하는 기준을 선택하시면 됩니다. 그럼 이제 좌표속성으로 좌표 값을 줄 수 있습니다.

position : absolute는 부모 박스를 기준으로 찰싹 달라붙은 뒤에 좌표값을 적용하게 되는데, 

정확히 말하면 부모가 아니라 부모 중에 position : relative를 가지고 있는 부모가 기준입니다. 

 

 

 

 

position : absolute 를 적용한 요소 가운데 정렬 

설명하다

 

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 적절히
}

적어도 5개의 속성이 있어야 가운데 정렬이 가능합니다.