내가 몰랐던 CSS

Maru·2022년 10월 27일

오픈SW플랫폼

목록 보기

1/5

CSS 적용법

1. < style > 태그

<style>
      body {
        background-color: aqua;
      }
</style>

2. 인라인

 <body style="background-color: aqua">

3. CSS 파일

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

CSS 셀렉터

Element 셀렉터 : html element

ID 셀렉터 :

Class 셀렉터 : .

Universal 셀렉터 : *

Grouping 셀렉터 : h1, h2, p { ~}

이중으로 !

div 태그 중, class로 header를 가진 요소만 적용

div.header {
        background-color: rebeccapurple;
      }


      .col.side {
        background-color: rebeccapurple;
      }
      .col.middle {
        background-color: aqua;
      }
   
   ...
   
    <div class="col side">side</div>
    <div class="col middle">middle</div>

link 속성

a:link { color: red; text-decoration: none; } >> a태그 중 href가 걸려있는 것
a:visited { color: blue; } 클릭하고 나면 파란색
a:hover { color: orange; text-decoration: none; }
a:active { background-color: green; text-decoration: underline; }

display

display : none, block, inline
visibility : hidden;

list-style-type:none (ul 포인트 효과 제거)

효과 제거


      li a:hover:not(.active) {
        background-color: aqua;
      }

반응형

   @media screen and (max-width: 600px) {
        .col.middle,
        .col.side {
          display: none;
        }
      }

Maru

함께 일하고 싶은 개발자

다음 포스트