css 선택자, 미디어 쿼리

⎷ CSS
- 인라인 스타일 방식 <span style 어쩌구저쩌구 ~~~ >
테스트 목적으로 적용.. 이렇게 쓰면 겁나 지저분함!
 
- 외부 스타일 방식 <link 어쩌구 href=“스타일파일”>
훨씬 효율적이고 간단함!
 
- 임베디드 스타일 <style> 태그에 넣기
하나의 html에서만 적용할때
 
 
⎷ CSS 의 선택자
전체 선택 *
- 클래스 선택자  . 여러번 사용
- 아이디 선택자  # 단 한번 사용
- 복합 선택자 : 하위 선택자 or 자식 선택자
      하위 선택자 : 누구의 자식 →  상위 선택자
      자식 선택자 : 누구의 자식이면 전부 →  상위>선택자
- 속성 선택자 : 태그안의 속성 → 선택자[속성=“값”]
- 가상 클래스 선택자 : 가상의 선택자를 지정, 링크 or 동적
      링크 선택자 : 선택자:link, 선택자:visited
      동적 선택자 : 선택자:active, 선택자:hover
 
우선순위
인라인 > 임베디드 > 외부
가장 마지막으로 적용된게 우선
important : 최우선 적용 ... 테스트 목적으로만 쓰자
 
 
⎷ CSS 미디어 쿼리
- 미디어 쿼리 : 하나의 html 소스코드가 여러 개의 디자인을 가지도록 하는 것... 반응형 웹디자인 구현에 사용
@media 어쩌구 미디어타입 and (미디어 특징){ css 소스코드 };
 
- 미디어 타입 : 현재 웹 사이트에 접속한 장치의 타입을 특정
      all : 모든 장치
      screen : 컴퓨터, 태블릿, 스마트 폰
      speech : 스크린 리더기에 적용
      print : 프린터기에 적용
 
- 미디어 특징 : 해당 장치에서 적용될 구체적인 특징을 설정
      min-height : 해상도의 높이 하한선을 설정
      max-height : 해상도의 높이 상한선을 설정
      min-width ← 가장 많이 사용
      max-width
      min-device-width : 출력 장치 자체의 너비 하한선을 설정
      min-color : 출력 장치의 색상 구성요소 당 비트의 수의 하한선을 설정
      orientation : 화면이 세로 모드인지, 가로 모드인지 설정