210923 필기내용

[구형 브라우저 대처](modernizr.com)

html

• class명 옆에 `hidden` 속성 : 속성이 안 보이게 숨겨줌
• margin
  • 외부여백 : 요소와 요소 사이의 공백
  • 부모가 border가 없으면 margin-top은 안 먹음
  • float 가 있으면 두 개 요소의 맞닿은 margin이 합쳐짐
  • `{ margin: 10px 30px;}` : 위, 아래 : 10px / 오른쪽, 왼쪽 : 30px
  • `{ margin: 10px 50px 30px;}` : 위 : 10px / 오른쪽, 왼쪽 : 50px / 아래 : 30px
  • `{ margin: 5px 20px 40px 70px;}` : 위 : 5px / 오른쪽 : 20px / 아래 : 40px / 왼쪽 : 70px
  • 시계방향으로 돌아감
  • `{ margin: 20px; margin-bottom: 10px;}` : bottom 은 10px 나머지는 20px
    • 최종적으로 쓴 스타일이 적용됨
  • `{ margin: auto;}` : 위, 아래는 적용 안됨/ 가로만 auto 적용
  • `{ margin-left: 10%; margin-top: 10%;}` : 퍼센트는 사용 안 함
• padding
  • `{ padding: 20px 40px;}` : 위, 아래 : 20px / 오른쪽, 왼쪽 : 40px
  • `{ padding: 10px 40px 5px;}` : 위 : 10px / 오른쪽, 왼쪽 : 40px / 아래 : 5px
  • `{ padding: 5px 10px 20px 40px;}` : 위 : 5px / 오른쪽 : 10px / 아래 : 20px / 왼쪽 : 40px
  • `{box-sizing: border-box;}` : 테두리 선까지 박스로 생각해서 정해진 사이즈로 맞춰라

css

`background-color: transparent;` : 배경색 투명하게

float : 부모의 높이값이 정해져 있다면 clear 같은 것 불필요

clear: both; 는 block요소만 먹음 / inline은 안 먹음

`background-image: linear-gradient(45deg, #07a, #5a7);` : 배경을 45도 각도로 2개의 컬러로 그라데이션을 줌