CSS 란?

HTML 이 정보를 표현한다면 CSS 는 HTML 을 시각적으로 꾸며주는 역할을 합니다.

HTML 에서 디자인을 구현하기 위하여 초기에는 추가적인 tag 를 사용 하였습니다. (ex. font) 하지만 그런 경우 유지보수의 어려움이 있고 정보와 디자인이 분리되지 않아 HTML 처리가 오래 걸렸지만, CSS 를 분리함으로서 HTML 은 정보만을 읽게 되어 용량과 처리 속도를 향상 시킬 수 있었습니다.

CSS 선언

<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <style>
    a {    
      color:black;
      text-decoration: none;
    }
  </style>
</head>

a - selector (선택자)
{} - declaration (선언, 효과)
color:black; - property:value (속성 : 값)

선택자를 통한 CSS 사용

<head>
  <style>
    #active { // active id 에 적용
      color:red;
    }
    .saw { // 모든 saw class 에 적용
      color:gray;
    }
    a { // 모든 a tag 에 적용
      color:black;
      text-decoration: none;
    } 
    h1 { // 모든 h1 tag 에 적용
      font-size:45px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw" id="active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
</body>

Grid

<head>
    <style>
        #grid{
            border:5px solid pink;
            display:grid;
            grid-template-columns: 150px 1fr;
        }
        div{
            border:5px solid gray;
        }
    </style>
    </head>
    <body>
    <div id="grid">
        <div>NAVIGATION</div>
        <div>Lorem</div>
    </div>
</body>

반응형 디자인

<head>
    <style>
        div{
            border:10px solid green;
            font-size:60px;
        }
        @media(max-width:800px) { // 화면의 width 가 800 이하면 아래를 실행한다.
            div{
                display:none;
            }
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>

CSS 코드의 재사용

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

style.css 파일에 디자인 요소만 작성한 후 원하는 html 에 link 를 해줍니다.

Property (속성)

  • display
    • none : 보이지 않음
    • block : 블록 박스
    • inline : 인라인 박스
    • inline-block : block과 inline의 중간 형태

pseudo-class (가상 클래스)

<style type="text/css">
    a:link {color: #000;}
    .visited:visited {color: #f00;}
    .hover:hover {color: #0f0;}
    .active:active {color: #fc0;}
    .focus:focus {background-color: #f00;}
</style>
  • link : 하이퍼링크가 적용된 요소
  • visited : 링크 요소를 한 번 이상 방문한 요소
  • hover : 요소에 마우스가 올라간 상태
  • active : 링크 요소가 활성화된 상태 / 마우스가 누르고 있을 때
  • focus : 폼 요소가 선택된 상태, 입력 대기 모드
  • transform : 해당 속성에 지정된 값에 따라 엘리먼트에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다.

예제

<style> 
  div {
    width: 100px;
    height: 100px;
    background: red;
    transition: 2s;
  }

  div:hover {
    width: 300px;
  }
</style>
  • transition
    CSS 속성을 변경할 때 애니메이션 속도를 조절합니다.