CSS / 01 / 기초-2

DOMADO·2024년 5월 30일

CSS

목록 보기

2/5

✅ CSS 필수개념

선택자

선택자 내 (클레스, 아이디)

계층

✅ 선택자 必

어떤 태그에게 스타일을 부여할지 작성하는 공간

전체선택자 👉 * (에스터리스크) : html파일안에 존재 하는 모든 태그에 적용 [점수0점]
태그선택자(태그이름지정) : 특정 태그(html에 존재하는 고유의
(예: p태그, h태그, span태그 등))에 이름 지정해서 적용
[점수1점]
클래스 / 아이디 선택자 : 특정 태그에 고유한 이름을 부여해서 사용
[클래스 점수 10점] / [아이디 점수 100점]

✅ 클래스 선택자 vs 아이디 선택자

클래스 선택자 : 중복 가능 ⭕

아이디 선택자 : 중복 불가능 ❌ (고유식별자) 한 페이지에 1개만 가능

-클래스 선택자 부르는법 👉 .
-아이디 선택자 부르는법 👉 #

-클래스 선택자 : 디자인코드 CSS에서 주로 사용
-아이디 선택자 : 기능제작 JS에서 주로 사용
(한 페이지에 1개 존재 : 로그인창, 검색창 등)

[ ❗ ] 아이디를 부여한 태그에게도, 클래스 부여(중복 되니까) 가 가능하다
중복 되는 스타일이 있다면, 우선순위가 높은걸 사용 (덮어씌움)
범위가 좁아질수록 우선 순이가 높아진다.
아이디 선택자 > 클래스 선택자 > 특정선택자 > 전체선택자
중복 되는 스타일이 없다면, 다 영향을 받는다.

<style>

        h1{                       ====> 태그선택자
            color: red;
            font-family: '나눔고딕체';
        }


        *{                        ====> 전체선택자
            color: green;
            font-family: '궁서체';
        }

        .men{                     ====> 클래스 선택자 👉. 으로 표기
            color: blue;
        }

        #jy{                      ====> 아이디 선택자 👉# 으로 표기
            color:gold;
        }
              
</style>

<body>

    <h1 id="jy" class="men">손지영</h1>
    <h1 class="men">정형</h1>
    <h1 class="men">박병관</h1>
    
    👉 h1과 h2 태그를 클래스 선택자를 통해 중복으로 class="men" 으로 지정
    👉 손지영의 경우, id="jy"로 1페이지에 1개만 존재하는 고유식별자 지정
    ✅ 아이디를 지정한 선택자도 클래스 선택자 지정을 동시에 가능하다.

    <h2 class="men">파이썬</h2>
    <h2 class="men">웹</h2>
    <h2>디비</h2>

</body>

⬜ 계층선택자

태그에 아이디,클래스 같은 구분자가 없는 경우에
포함관계를 가지고 구별하는 선택자

① 부모 자식 관계 ▶ 특정태그가 다른 태그를 포함한 경우
- 자식선택자(출발지 '>' 목적지) ▶ 내가 다른 태그 바로 밑에 포함된 경우

[❗] 자식선택자를 사용할 떄, 부모가 중복되는 경우에는
그 위쪽에 있는 부모도 사용 가능 (출발지 '>' 중간목적지 '>' 목적지)

☑️ 자손선택자(출발지 목적지) ▶ 출발지 기준, 출반지 밑에 있는 모든 태그
(너무 광범위 해서 자주 사용 x)

② 형제 관계 ▶ 부모는 같으나, 서로 독립적으로 존재하는 태그의 경우
-인접형제(+로표기) : 나를 기준으로 내 바로 다음 형제 (가끔 쓰임)
✅ 표현방식 : 형제 독립적 태그 + 실제 적용 될 독립적 형제 태그

-후형형제 : 나를 기준으로 내 뒤 모든 형제 (멸종급)

<head>
    <style>

        ul > li{
            color:red;      ===> ul가 품은 li 태그 [자식선택자]
        }             

        ol > li{            ===> ol가 품은 li 태그 [자식선택자]
            color:blue;
        }

        li > span{          ===> li가 품은 span 태그 [자식선택자]
            color:green;
        }

        ul > li > span{     ===> ul가 품은 li가 품은 span 태그 [자식선택자]
            color:violet;
        }

        h1 + p{      ===> p태그가 2개지만, +(형제:인접형제)이니까, 바로 아래 p 태그선택
            color:aqua;
        }
        h1 + p + p{  ===> 2번째 p태그 접근법 : 1️⃣ h1 +(인접형제) p로 👉 첫번째 p태그 접근 
                                             2️⃣ 첫번째 p태그 접근 +(인접형제) p 태그로 👉 두번째 p태그 접근
            color:brown;
        }

    </style>
</head>


<body>

    <h1>여긴 H1태그</h1>                  
    <p>여긴 P태그1번째</p>      ==> h1태그와 p태그는 형제태그 / body가 부모태그
    <p>여긴 P태그2번쨰</p>
    <ul>
        <li>li태그1</li>
        <li>li태그2</li>
        <li>
            <span>
                span태그입니다.
            </span>
        </li>
    </ul>
    <ol>
        <li>li태그3</li>
        <li>li태그4</li>
        <li>
            <span>
                span태그입니다.
            </span>
        </li>
    </ol>
</body>

⬜ 반응선택자

① 마우스를 올렸을 때 스타일 변경 : hover
② 마우스를 클릭 했을 때 스타일 변경 : active

<head>
    <style>
      
        h1:hover{
            color:red;
        }

        h2:active{
            color:blue;
        }
    </style>

</head>
<body>
    <h1>이 라인에 마우스 가져다 대면, 빨간색으로 변한다 !</h1>                 
    <h2>이 라인에 마우스 클릭하면, 파란색으로 변한다 !</h2>
</body>