생활코딩-css 강의 내용 정리

강의 내용

• css란? cascading style sheets의 약자, html, xml같은 문서의 스타일을 꾸밀 때 사용하는 언어.

<style>
    #active {
      color:#fc2222;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
    }
</style>

• style 태그 안에 선언되는게 css.
• "#active"는 아이디 선택자, ".saw"는 클래스 선택자, "a, h1"은 태그 선택자
• 아이디 선택자 > 클래스 선택자 > 태그 선택자.
• css 주석: / ~ /

css box model

<style>
      h1{
        border:5px solid red;
        padding:20px;
        margin:20px;
        display:block;
        width:100px;
      }
</style>

• 위 코드는 css box model의 예제 코드이다.

css media query

<style>
    @media (max-width: 600px) {
      .desktop {
        display: none;
      }
    }
</style>

• 위 코드는 미디어 쿼리의 예제이다.
• 미디어 쿼리는 css에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용.
• if조건문과 비슷한 개념.
• 이를 활용하여 반응형 디자인 웹을 만들 수 있다.

<link rel="stylesheet" href="style.css">

• 위와 같이 css를 또다른 파일에 정의하고 불러오는게 트레픽적에서 더 좋다.

출처 & 깃허브

생활코딩 web/html&internet

github