CSS - 기본선택자(모든 선택자, 태그 선택자, 아이디 선택자), 스타일 방식(내부 스타일 방식, 인라인 스타일 방식)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

 

[ style 방식

<style>태그 안에 스타일을 기술할 수 있는 css 영역입니다. 
내부 스타일 방식과 인라인 스타일 방식이 있습니다.

 

1) 내부 스타일 방식

내부 스타일 방식 : 현재 이 문서에 적용시키고자 하는 스타일 정보들을 <style>태그내에 기입하는 방식
                   이 html내부에 스타일정보를 저장하는 방법

<style>
    /* css 영역 : 스타일을 기술할수 있는 영역*/
    * {
        /* color :red; */
    }
    p , pre {
        /* color : red; */
    }
    #id1{
        color : pink;
        background-color: yellow;
    }

    .class1{
        color:yellowgreen;
    }
    .test{
        font-size: 30px;
    }

</style>

<h3>3. 아이디 선택자(#아이디명)</h3>
<p>
    해당 이 문서 내에 특정 html요소 하나만을 선택하고자 할대 사용
    단, 해당 그 요소 id속성을 이용해서 고유한 아이디값을 부여해야함.
</p>
<pre>
    #아이디명{
        스타일 속성 :값;
    }
</pre>

<!-- ol>li[id=id$]*4 -->
<ol>
    <li id="id1">아이디선택자</li>
    <li id="id2">아이디선택자</li>
    <li id="id3">아이디선택자</li>
    <li id="id4" class="class1">아이디선택자</li>
</ol>

<hr>

<h3 class="class1">4. 클래스 선택자(.클래스명)</h3>
<p class="class1">
    해당 문서 내에 내가 원하는 여러개의 요소를 선택하고자 할때 사용. 
</p>
<pre>
    .클래스명{
        스타일 속성:값;
    }
</pre>

<!-- 1, 3, 5 번째 li태그만 선택해서 효과를 주기-->
<!-- 2, 3번째 li태그만 선택해서 효과를 주기-->

<ul>
    <li class="class1">클래스선택자1</li>
    <li class="test">클래스선택자2</li>
    <li class="class1 test">클래스선택자3</li><!-- 클래스 여러개 작성-->
    <li>클래스선택자4</li>
    <li class="class1">클래스선택자5</li>
</ul>

다음과 같이 내부스타일 방식이 적용된 출력화면을 볼 수 있습니다.

 

 

2) 인라인 스타일 방식

인라인 스타일 방식 : 스타일을 부여하고자 하는 요소 내에
                     style속성을 이용하여 직접적으로 기입하는 방식

<h1 style="color:teal;">css 기본 선택자</h1>

다음과 같이 인라인 스타일 방식이 적용된 출력화면을 볼 수 있습니다.

 

---

 

[ 선택자 ]

특정 html요소를 선택하고자 할 때 사용하는 기능입니다. 해당 요소를 선택해서 원하는 "스타일"과 기능을 적용시킬 수 있습니다.

 

1. 모든(전체) 선택자(*)

<표현법>

* {
        스타일 속성 : 값;
        스타일 속성 : 값;
    }

모든 요소들을 다 선택하고자 할 때 사용합니다.

 

<style>
    /* css 영역 : 스타일을 기술할수 있는 영역*/
    * {
        color :red;
    }
    p , pre {
        /* color : red; */
    }
    #id1{
        color : pink;
        background-color: yellow;
    }

    .class1{
        color:yellowgreen;
    }
    .test{
        font-size: 30px;
    }

</style>

위의 style 코드에서 모든 선택자에 스타일 속성을 주면 다음과 같은 화면출력을 볼 수 있습니다.

 

2. 태그 선택자(태그명)

<표현법>

태그명 {
            스타일속성: 값;
        }

해당 이 문서 내에 같은 태그들 모두를 선택할 때 사용합니다.

 

<style>
    /* css 영역 : 스타일을 기술할수 있는 영역*/
    * {
        /* color :red; */
    }
    p , pre {
        color : red;
    }
    #id1{
        color : pink;
        background-color: yellow;
    }

    .class1{
        color:yellowgreen;
    }
    .test{
        font-size: 30px;
    }

</style>

위의 style 코드에서 p와 pre 태그선택자에 스타일 속성을 주면 다음과 같은 화면출력을 볼 수 있습니다.

 

 

3. 아이디 선택자 (#아이디명)

<표현법>

#아이디명{
            스타일 속성 :값;
         }

해당 이 문서 내에 특정 html요소 하나만을 선택하고자 할 때 사용합니다.
단, 해당 그 요소 id속성을 이용해서 고유한 아이디값을 부여해야합니다.

 

<style>

#id1{
            color : pink;
            background-color: yellow;
        }
        
</style>

<!-- ol>li[id=id$]*4 -->
<ol>
    <li id="id1">아이디선택자</li>
    <li id="id2">아이디선택자</li>
    <li id="id3">아이디선택자</li>
    <li id="id4" class="class1">아이디선택자</li>
</ol>

위의 style 코드에서 아이디 선택자에 스타일 속성을 주면 다음과 같은 화면출력을 볼 수 있습니다.

 

 

4. 클래스 선택자

<style>

    .class1{
        color:yellowgreen;
    }
    .test{
        font-size: 30px;
    }

</style>

<!-- 1, 3, 5 번째 li태그만 선택해서 효과를 주기-->
<!-- 2, 3번째 li태그만 선택해서 효과를 주기-->

<ul>
    <li class="class1">클래스선택자1</li>
    <li class="test">클래스선택자2</li>
    <li class="class1 test">클래스선택자3</li><!-- 클래스 여러개 작성-->
    <li>클래스선택자4</li>
    <li class="class1">클래스선택자5</li>
</ul>

위의 style 코드에서 클래스 선택자에 스타일 속성을 주면 다음과 같은 화면출력을 볼 수 있습니다.

 

※ 선택자 사용시 주의 사항 ※

* 모든 태그내에 공통적으로 쓸 수 있는속성 : id, class       

- id : 문서 내에 고유한 값으로 하나만을 작성(중복 금지)       
- class : 중복된 값 작성가능, 여러개 작성가능