css 선언

선언방법

  • inline
    • 제일 우선으로 적용한다.
    • 우선으로 적용된다는게 덮어지는게 아니다. 다른 선언이 있어도 inline이 적용된다는 의미
    • <p style="color:red;">러러러</p>
  • internal
    • style 태그안에 작성
    • <style></style>
  • external
    • .css.파일로 관리
    • 링크로 추가
    • <link rel="stylesheet" href="style.css">
  • 우선순위
    • inline은 별도의 우선순위로 적용
    • internal, external을 동등하여 겹치면 나중에 선언된게 적용된다.

상속

  • 상위 엘리먼트에 적용된 css는 하위 엘리먼트에도 적용된다.
    • <div class="a"><div class="b"></div></div>
  • box-model이라고 불리는 속성들(width, height, margin, padding, border)은 상속되지 않는다.

우선순위

  • inline이냐 internal,external이냐
    • inline으로 적용
  • 작성순서
    • 같은 선언이 있다면 마지막에 작성된것이 적용
    • span{color:red} span{color:blue}이면 blue로 적용
  • 구체적인게 적용
    • div>span{color:red}와span{color:blue}가 있을때
    • <div><span>글</span></div>이면 구체적으로 작성된 red로 스타일이 적요됩니다.
    • <span>만 있으면 당연히 blue가 적용
  • id-class-tag순으로 적용
    • id로 작성된게 제일 우선순위가 크다
    • <div id="a" class="b">글</div>
      • #a{red} .b{green} div{blue}이면 red로 적용된다.

단위

  • 1em은 16px(기본)로 16px기준으로 배율을 지정할수있다.
    • 2em은 32px, 1.5em은 24px이 된다.
  • em은 16px고정이 아니고 부모로부터 받은 fontsize를 기준으로한다.

css selector란?

  • html 요소를 tag, id, class, html속성을 통해 빠르게 찾아주는 방법

css지정방법

  • tag
    • tag이름은 그냥 tag이름을 해주면 모든 tag에 적용
  • id
    • id는 #을 앞에 붙여준다.
  • class
    • class이름은 .을 앞에 붙여준다.
div {
  color : red;
}
#id {
  color : red;
}
.classname {
  color : red;
}

css지정 활용

  • div.testname
    • div tag이면서 classname이 testname인것(and이다.)
  • h1, span, div { color : red }
    • 그룹지정
    • ,를 통해 같은 스타일을 동시에 지정 가능
  • #id span {color:red}
    • 자손요소
    • #id내의 모든 span에 적용한다는 의미
  • #id > span{color:red}
    • 바로아래의 하위엘리먼트만 적용
    • #id의 바로 붙어있는 span만 적용
  • #id > span:nth-child(2) { color : red }
    • n번째 자식 선택하여 적용
    • #id의 바로아래의 자식중 2번째 자식에 적용
  • #id > span:nth-of-type(2) { color : red }
    • 자식들중 span타입의 n번째 자식 선택하여 적용
    • #id의 바로아래의 자식중 2번째 span자식에 적용