[Study - Front-end basic] CSS

CSS 선택자의 기본

---

선택자 우선순위

1. id 선택자 (#)

   id 값은 중복되지 않도록 단 한번만 정의되어야 한다.

2. class 선택자 (.)
3. 태그 선택자 (element)

디자인하거나 코딩하는 부분에서 구체적인 것(id)이 포괄적인 것(tag)보다 효율적이기 때문에 우선순위가 높도록 되어있다.

그리드

---

<style>
    #grid {
        display: grid;
        grid-template-columns: 150px 1fr;
    }
</style>

• block level element

  <div>

• inline level element

  <span>

• 웹 브라우저에 따라 현재 기술이 사용 가능한지 알려주는 사이트

  Can I use… Support tables for HTML5, CSS3, etc

반응형 웹

---

반응형 웹이란 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것이다.

반응형 디자인이란 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 되는 것이다.

• 미디어 쿼리: @media(조건) { 내용 }

  가로의 길이가 800px보다 크면 중괄호 안의 코드가 동작하게 된다.

    <style>
        @media(min-width:800px) {
            div {
                display: none;
            }
        }
    </style>
  

Reference

---

WEB2 - CSS - 생활코딩