CSS

외부 스타일 시트
@media query

• reset css(css파일로 추가하여 사용)
  - 에릭마이어 reset css
  - nomalize.css
  !!!모달 공부하기

• css 특징
  공백 병합

• 벤더프리픽스
  크로스브라우징 할 때 몇 버전까지 호환을 해줄 것이냐 회의 후 적용

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

CSS 셀렉터

• 범용 선택자
  *{ }

• 타입 선택자
  h1,h2{ }

• class 선택자(한 페이지에 여러개가 존재할 수있다, 하나의 태그에 여러개 적용시킬 수있다.)
  .클래스이름{ }

• id 선택자 (문서 내에 유일해야 한다. 하나의 태그에서만 사용 가능)
  #아이디 이름{ }
  emmet 자동생성코드

<!--.tit-txt-->
<div class="tit-text"></div>

• 자손

div p{}
<div>
<section>
<h1>혜영</h1>
<p>입니다</p>
</section>
</div>
<!-- div안의 p에 적용-->

• 형제

div + p {}
<div>
<section>
<h1>혜영</h1>
</section>
</div>
<p>입니다</p>
<!-- div와 형제관계 p에 적용-->

• 직계자식

div>p {}
<div>
<p>몰랑이</p>
</div>
<!--div의 직계자식 p에 적용-->

• 명시도 원칙 (우선순위 원칙)

• 가중치 ( 어떤 선택자가 더 구체적인가를 판단하여 가중치 적용)
  id> class> 타입
  (id=100, class=10, 타입=1로 계산)
  -> 가중치 점수표에 따라 클래스 선택자가 10점이고 id 선택자가 100점이지만 클래스 선택자가 아무리 많더라도 id 선택자를 이기지 못함

<!-- 태그 내 class에 기입되는 순서는 적용과는 무관 -->
<div class="one two">hello world</div>
<div class="two one">hello world</div>

• 절대적인 우선순위

/* important가 둘 다 적용되어 있을 때에는 순서에 영향을 받는다 */
        .one{
            color: red !important;
        }
        .two{
            color: blue !important;
        }

박스

box-sizing: border-box;
/*border 기준으로  width와 height를 잡는다.*/

• 박스의 유형
  - display
  display: block;
  display: inline;
  display: inline-block;
  display: flex;
  display: grid;

• 블록박스 (width와 height로 컨트롤 가능)
  사용가능한 공간을 양옆으로 100%사용
  

• 인라인 박스
  width와 height 속성을 사용할 수 없고, 패딩과 보더 속성을 사용할 수 있지만 마진속성은 좌우만 조절할 수 있다.

• 인라인 블록
  인라인처럼 한줄에 여러요소 존재할 수있고, 블록처럼 widrh, margin, padding 모든 값 지정 가능

###border
- border-width: ;
border-style: ;
border-color: ;
border: 5px green outset; /명암/
border-color:red green blue yellow; /각 방향마다 색상지정/

-> 오늘 배운 내용이 많아서 다 정리하지는 못한 것 같다. 추석연휴에 열심히 복습해야겠다!