CSS 기초-1

mybatis.type-aliases-package=com.eomcs.mylist.domain
=> 이거 사용하면 클래스 이름만 같아도 찾아준다. 즉 패키지 이름을 작성하지 않아도됨 (대소문자 구분안함)parameterType="book" <= 이렇게만 써줘도됨

resultMap="contactMap"
=> contactMap 규칙에 따라 만들어서 리턴하겠다는 뜻임

company=#{company} 컬럼이름 / 객체 프로퍼티 순

color style 은 자식 태그에게도 상속이 가능하다
테두리는 해당 태그에만 해당한다.

<div class="c1" id="d2" style="background-color: yellow;">d2</div>
=> 태그안에 스타일 지정(인라인 스타일 우선순위가 가장 높음)

*(와일드 카드)는 모든 태그한테 적용하는 거임


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


background-color 는 자식에게 상속을 안해준다.(inherited - no)
font 는 자식에게 상속을 해준다.'


specificity 값이
같은 점수일 때 나중에 지정된 스타일이 기존 스타일을 덮어쓴다

css 는 위치가 중요하다

태그이름 + 아이디 101 점 
클래스 이름 + 아이디 110 점 
=> 이렇게 점수가 부여되는 거임

ul 태그는 기본 마진이 있음

인라인태그는 너비 높이 지정못함


/* border-box 라고 설정하면 width, height는 
       콘텐트 크기가 아니라 박스 크기가 된다. */
    box-sizing: border-box; => 이렇게 지정하면 박스 크기는 바뀌지 않음


sans-serif(고딕체), serif(명조체), monospace(고정너비),
           cursive(흘림체), fantasy

sans는 not 이라는  뜻 fantasy는 이모티콘

font-family: '맑은 고딕', 굴림체, 'Apple SD Gothic Neo', sans-serif;
     의미
       => 맑은 고딕 폰트를 사용하라. 없다면 다음 폰트 사용하라.
       => 모두 없다면 웹브라우저에 설정된 sans-serif 기본 폰트를 사용하라는 뜻이다.

font-size: medium; 해주면 여기에 대해서
font-size: 1.2em => 기본 폰트사이즈의 1.2배라는 뜻

test07_2 에서 배경 이미지 지정하기 있음


/* 배경 그림 채우는 방법(background-repeat)
    => repeat(기본 방식으로 X,Y 축 모두 채운다),
       repeat-x(X 축으로만 채운다), repeat-y(Y 축으로만 채운다),
       no-repeat(반복하지 않는다)
  */

  body {
    background-image: url('img01.jpeg');
    background-repeat: no-repeat;

test07_9.html 처럼 이미지 파일 하나에 여러가지를 넣어놓고 출력하는 방법이 있음
===>  if (email.value == "hong@test.com") { // 존재하는 사용자일 경우
    state.style.backgroundPosition = "-204px -1px";
  } else {
    state.style.backgroundPosition = "-167px -1px";
  }
이런 식으로 사용한다.

test07_9.html / test07_10.html

=> 색 바꾸기도 가능

height 가 0라도 바깥 영역에라도 text 를 출력한다