2020-12-08 TIL

css

• CSS(Cascading Style Sheet)?
  • HTML UI 컴포넌트(=태그)의 모양을 제어할 때 사용하는 기술

주석

• /* */ 바디에서는 주석이 아니라 그냥 일반 텍스트가 된다.
• 스타일에서만 주석으로 처리된다.

selector

div

• ul을 묶을 때 사용하는 것.

• id를 지정하게 되면 구분이 가능해진다.

• id를 통해 특정 div만 꾸미는 것이 가능해진다. (#id)

class

• 태그를 분류할 때 사용하는 것.

자손

• #조상 자손
  • #조상, 자손 이렇게 하면 자손이 아니라 , 문법이 된다.
• #조상 > 자식(직계만 가능)
• #형 + 동생
  • 형 태그 바로 다음에 오는 동생 태그에만 지정

조건을 복합으로

• 특정 조건을 갖는 대상자를 지정하기

  => 대상자를 지정할 때 조건을 나열할 수 있다.

  => 문법

​ 대상자#아이디 {…}

​ 대상자.분류명 {…}

​ 대상자:상태명 {…}

​ 대상자[속성명] {…}

우선 순위

• 순서보다 좀 더 정밀한 것이 더 우선 순위를 가진다.
• 점수 체계가 있어서 정밀한 것이 점수가 더 높다.
  • 점수가 같을때는 순서에 영향을 받지만 점수가 다를때는 순서보다 점수에 영향을 더 받는다.
• h1:first-child = 부모로부터 h1이 첫째라면

상속이 가능한 스타일과 상속이 불가능한 스타일

• 자동으로 상속되는 것 : 폰트, 색상 등
• 지정해야 되는 것 : 테두리, 패딩, 마진 등

스타일 적용 순서

• specificity 값?
  • 실렉터의 우선 순위를 지정하기 위해 부여된 값
  • 한 태그에 같은 스타일이 중복 지정된 경우?
    • specificity 값을 계산하여 값이 높은 스타일이 적용된다.
    • 스타일을 선언한 순서 보다 계산 값이 우선한다.
• specificity 계산법
  • * : 0
  • 태그 : 1
  • 클래스 : 10
  • 아이디 : 100
  • 인라인스타일 : 1000

크기

• Content box의 높이, 넓이 : hieght, width
• border-box, content-box로 박스 사이즈를 지정할 수 있다.
  • Border-box에는 마진이 포함되지 않는다.