웹 페이지 꾸미기

[꾸미기 속성]

• background-size: cover: 배경짤려도 상관없으니 빈공간 없이 배경으로 꽉 채워라
• background-size: contain: 배경 짤리지x
• filter: brightness(70%) : 배경에 틴트주기
• z-index: 5
  --> 숫자가 클 수록 내쪽으로 다가옴, 떠 있는 요소 우선순위 주기 가능

[ margin collapse effect --> 일종의 버그 ]

• 원래 박스들의 테두리가 만나면 margin이 합쳐짐. (박스가 내부에서 만나든 외부에서 만나든 상관없음)
• 정확히 말하면 1. 마진을 하나로 합쳐주고 2. 혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용
• (해결법) 두 박스의 테두리가 겹치지 않도록 만들기(부모 박스에 padding을 1px 주기)

[Position 부여하기]

• body에 기본으로 들어가는 마진 있음
  body style="margin: 0px" 주면 마진 제거 가능

1. button의 좌표이동
2. 공중에 뜬다는 속성

• position: relative --> 내 원래 위치를 기준으로 이동
  top:100px --> 위에서부터 100px (+- 모두 가능)
• position: static: 고정
• position: fixed: 틀고정
• position: absolute --> 내 부모 태그 중
  position:relative 가진 부모 기준으로 좌표이동

• Position absolute 준 요소 가운데 정렬하기

  position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 150px; (자율조정)

[반응형 레이아웃 만들기]

• width: 80%
  --> 가변적인 너비 조정은 px 아닌 % 사용(반응형 레이아웃),
  너비가 부모태그의 80% 차지
• max-width: 600px (width와 같이 사용하면 좋음)
  
• (중요) width는 박스의 너비가 아니라 실제 글 쓰는 content 영역의 너비를 의미
  - box-sizing: border-box;
  --> 따라서 width를 border, padding 까지 포함하는 것으로 명령 필요

[호환성 이슈 해결]

• 브라우저 마자 같은 속성 다르게 보이는 문제 발생 ex) button 등
• css 파일 맨 위에다 쓰고 시작하면 편리함: 검색 키워드: normalize.css

    div {
        box-sizing: border-box;
    }


    body {
        margin: 0px;
    }