[CSS] 태그 | 아이디 | 클래스

📌CSS (Cascading Style Sheets)

 

    마크업 언어(HTML)가 실제 화면에

    표시되는 방법(모양, 색상, 크기, 스타일..)을 기술하는 언어

    (HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어)

    W3C(웹 표준 지정 기관) 에서 CSS를 표준으로 지정함

 

 

 

태그	태그명
아이디	#
클래스	.
속성	[]
자식	>
후손	( ) 띄어쓰기

 

 

🔊 CSS Selector(선택자)

현재 HTML 문서내에 같은 태그를 선택하는 선택자

[작성법] 태그명 { CSS코드 ; }

 

✅ CSS 작성 

head에 작성 

<style>
        /*style 태그는 :CSS 코드만 작성할 수 있는 영역을 제공하는 태그*/
        /* CSS 주석 */

        /* 태그 선택자(태그명) */
        div {
            border: 3px solid red;
            /* 3px 두께의 빨간 실선 */
        }

        strong {
            background-color: yellowgreen;
        }

        span {
            background-color: pink;
        }
        
</style>

✅ HTML 작성

body에 작성 

	<div>
        <strong> strong 태그에 작성된 내용입니다.</strong>

        <br>

        <span>span 태그에 작성된 내용입니다.</span>
        <ul>
            <li>
                <strong> strong 태그에 작성된 내용 입니다. </strong>
            </li>
            <li>
                <span>span 태그에 작성된 내용 입니다.</span>
            </li>
        </ul>

    </div>

✅ 결과물

 

 

🔊 id 선택자(#id 속성값)

HTML 문서내에서 id 속성값이 일치하는 요소를 선택하는 선택자

(중요!) id의 속성값은 페이지 내에서 유일해야한다!

 -> 중복되는 id 속성값이 있으면 안된다!

[작성법] # id속성값{css 코드;} HTML : 하이픈 표기법(li-1,class-1)

✅ CSS 작성 

  /* 아이디 선택자(#) */
  
        #li-1{background-color: red;}
        #li-2{ background-color: blue;}
        #li-3{background-color: orange;}
        #li-4{background-color: yellow;}
        #li-5{ background-color: green;}

        /* 콤마(,)를 이용한 여러 선택자 동시 작성 */
        #li-1,#li-2,#li-3,#li-4,#li-5{
        color: white;
    }

✅ HTML 작성

    <ol>
        <list id="li-1">id선택자 테스트1</list>
        <list id="li-2">id선택자 테스트2</list>
        <list id="li-3">id선택자 테스트3</list>
        <list id="li-4">id선택자 테스트4</list>
        <list id="li-5">id선택자 테스트5</list>
    </ol>

✅ 결과물

 

 

🔊 class 선택자(.class  속성값)

 HTML 문서내에서 같은 class 속성값을 가지는 태그를 모두 선택하는 선택자

[작성법]  . class속성값{ css코드; }

 

✅ CSS 작성 

    </pre>

        <ul>
            <li class="test-1">클래스 선택자 테스트1</li>
            <li class="test-2">클래스 선택자 테스트2</li>
            <li class="test-1">클래스 선택자 테스트3</li>
            <li class="test-2">클래스 선택자 테스트4</li>
            <li class="test-1">클래스 선택자 테스트5</li>

            <li class="aaa">클래스 선택자 테스트6</li>
            
            <!-- 여러 클래스를 적용  -->
            <li class="aa test-1">클래스 선택자 테스트7</li>
            <li class="test-2 aaa">클래스 선택자 테스트8</li>
            
            <!-- 여러 클래스 작성 시 class 속성 값 순서는 의미 없음
                -> style 태그 css 코드 작성 순서에 따라 다름 
            -->
            <li class="test-1 test-2 aaa">클래스 선택자 테스트9</li>
            <li class="test-2 test-1 aaa">클래스 선택자 테스트10</li>

        </ul>

✅ HTML 작성

   /* 클래스 선택자(.) */
    .test-1{color: red;}
    .test-2{
        background-color: black;
        color: white;
    }
    .aaa{font-weight: bold;} /* 글자 굵기 조절 */

    /* 미리 클래스 선택자를 이용한 CSS 코드를 작성하고 
       이후에 HTML 코드에 클래스 지정하기  */

    /*  모든 요소 선택자(*) */   

    @font-face {
            font-family: 'SUITE-Regular';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0
            /SUITE-Regular.woff2') format('woff2');
            
            font-weight: 400;
            font-style: normal;
    }

✅ 결과물

 

🔊 모든요소 선택자 (*) 

단독 또는 다른 선택자와 함께 사용 가능한 선택자로 모든 요소를 선택하는 선택자)ㅁ

✅ CSS 작성 

    * {
        /* 글꼴 크기 */
        font-size: 10px;

        /* 글꼴 모양 */
        font-family: SUITE-Regular;
    }

✅ 결과물