기본 CSS 요약 - 1장

Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다.
(영어라 잘못 해석할 수도 있다..)

모듈1에서는 기본적으로 사용하는 CSS를 전체적으로 요약한 내용이다.

 

스타일 규칙 해부하기

사실 CSS용어에 대한 정리가 잘 되어있지 않은 상황이었는데 해당장에서는 아주 자세히 설명해주고 있다.

 

• property : Css에서 property는 특정한 값을 지정할 수 있는 속성이다. (like font-size)
•  selector : selector는 페이지의 특정 타겟 요소를 설명한다. 헷갈리는 것은 선택자라는 것은 .(class), #(id)를 같이 포함해주어야한다.

/*여기서 selector는 apple이 아닌  .apple이다 (어떤 요소인지 선택까지) */
.apple { 
  background-color: red;
  border-radius: 50%;
}

• declaration : property와 value의 조합니다. 
  (위의 코드에서 first declaration은 background-color: red; 이다)
• rule : declaration의 Collection이다. 
  (위의 코드에서 background-color: red;   border-radius: 50%;)
• units : px, rem, em 과 같은 단위이다.

 

Media Query

• 다양한 모양과 크기의 화면을 수용하기 위해서, CSS는 media query를 재공하고 있다.
• 웹의 서로다른 CSS 시나리오를 제공한다고 생각하면 좋다.(TV, 태블릿, 모바일 화면크기에 대한 UI)
• @media 는 자바스크립트의 if문이라고 생각하면 쉽게 이해할 수 있다.

/* Javascript */
if (condition) {
  // Some JS that will run if the condition is met.
}

/* CSS */
@media (condition) {
  /* Some CSS that'll run if the condition is met. */
}

/* 0~300px의 너비면 내부의 CSS가 적용됩니다. */
@media (max-width: 300px) {
  .small-only {
    color: red;
  }
}

Media Query 로 컨텐츠 숨기기

대체 인터페이스를 사용할 때 media Query를 사용하는 것이 일반적입니다. 

.large-screens {
  display: none;
}
/* 300이상일 때는 largescreen이 보인다. */
@media (min-width: 300px) {
  .large-screens {
    display: block;
  }
  .small-screens {
    display: none;
  }
}

 

Media query조건은 CSS 속성이 아니다..

• media의 조건은 일반적으로 max-width(작은 화면), min-width(큰 화면)의 스타일을 추가하는데 사용한다.
• 여기서의 max-width는 CSS 속성이 아니라 미디어 기능이다! 
• 오해해서 @media의 조건에 (font-size:32px)같은 CSS 속성을 넣는 것은 유효하지 않습니다!