TIL) HTML/CSS - 배경 예쁘게 넣는 스킬 & margin collapse

배경 관련 CSS 속성들

.main-background {
  background-image : url(../img/shoes.jpg);
  background-size : cover; // 사이즈 조정, 
  /* cover: 배경 짤려도 상관없으니 빈공간 없이 배경 꽉 채우기
     contain: 배경 짤리면 안 됨. */
  background-repeat : no-repeat; // 배경 반복
  background-position : center; // 배경 위치 조정 가능
  background-attachment : fixed; // 스크롤시 배경 위치 조정 가능
  filter: brightness(30%); // 배경 보정 입히기, 안에 글자가 있으면 글자에도 필터가 입혀짐
}

../는 상위폴더로 이동하라는 뜻

배경 두개 겹치기

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

배경에 검은색 틴트 주기

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

*margin collapse 현상
이미지랑 글자가 붙어서 떨어지지 않을 때
부모 태그에 padding: 1px 적어주면 떨어진다.

박스 2개일 때 위아래 테두리가 겹칠 경우에도 margin collapse 현상이 일어난다. 그럴 때 margin이 더 큰 코드에 먼저 적용이 된다.

텍스트 가운데 정렬

text-align : center;

display 속성이 flex로 설정되어 있으면 text-align 속성을 지정해도 가운데 정렬이 되지 않는다. 이 때는 justify-content: center; 속성을 설정해 주어야 한다.

top, left, bottom, right 속성

top, left, bottom, right라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있다.
좌표 속성을 사용하려면 position 속성이 필요하다.
position 속성은 좌표속성을 적용할 기준점이 여기다! 라고 지정해주는 역할이다.

top: 100px;
position: relative;

position 속성 4가지

.box {
  position : static; /* 기준이 없음 (좌표적용 불가) */
  position : relative; /* 기준이 내 원래 위치 */
  position : absolute; /* 기준이 내 부모태그 */
  position : fixed; /* 기준이 브라우저 창, 현재 화면. (viewport) */
}

position 부여하면 1. 좌표 이동 가능 2. 공중에 뜬다

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

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

z-index

z-index가 높을수록 앞에 온다.

max-width, max-height

어떤 요소의 최대 너비와 높이값을 설정하는 속성

• max-width
  어떤 요소의 최대 너비를 지정한다.
  요소의 너비값이 max-width 너비값보다 커지는 것을 방지한다.
  max-width는 width 속성값을 무효화시킨다.

• max-height
  요소의 최대 높이를 지정한다.
  max-height 속성도 height 속성값을 무효화시킨다.

박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}

CSS 파일 작성시 기본으로 쓰면 좋은 속성

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}

[CSS Normalize 링크] https://github.com/necolas/normalize.css/blob/master/normalize.css
브라우저간 다르게 보이는 문제들을 미리 해결할 수 있다.