HiDevelop

CSS- Selector(선택자) 본문

HTML&&CSS

CSS- Selector(선택자)

꽃달린감나무 2022. 5. 24. 20:12
728x90
  • Selector(선택자)
    • 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만 선택할 수 있도록 도와줌

 

 

  • 요소 선택자
    • 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 함
    • 선택자 부분에 태그 이름이 들어감
    • 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용
    • 쉼표를 통해 그룹화 가능
    • "*"기호를 통해 전체 선택도 가능
<style>

	/* 요소 태그 { 선언 } */
	h1 { color: gray; }
	h2 { color: gray; }
	h3 { color: gray; }
	h4 { color: gray; }
	h5 { color: gray; }
	h6 { color: gray; }
    
   
    /*위 코드를 쉼표를 통해 그룹화 시킴*/
	h1,h2,h3,h4,h5,h6 {color : gray; } 
    
    /*전체 선택자*/
    * {color : blue}
    
    /*선택자와 선언 그룹 */
    h1 { color: yellow; font-size: 2em; background-color: gray; }
    h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }
    
</style>

 

 

 

  • class 선택자
    • 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법
    • HTML을 수정해 class 속성을 추가해야함
    • class는 글로벌 속성이기 때문에 어느 태그에서도 사용가능
    • class속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙 적용 가능
    • 다중 클래스 선택도 가능
    • .(마침표)calssname { style } 형식으로 표현
<style>
		 .html { color : red; }
		 .css { color : blue; }
         
         
		 .multi { font-size: 2em; }
		 .selector { color: blueviolet; }
</style>


<dl>
    <dt>HTML</dt>
    <dd><span class ="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt>CSS</dt>
    <dd><span class ="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>

    <br>     !!!다중 선택자!!!
    <div class="multi selector">다중 선택자</div>
</dl>

 

 

 

  • 결과
CSS
HTML
HTML은 문서의 구조를 나타냅니다.
CSS
CSS는 문서의 표현을 나타냅니다.

다중 선택자

 

 

  • id 선택자
    • #(해시)idname{ style } 형식으로 사용
    • 요소에는 class 대신 id 속성을 사용
    • 다중 id 지원 x
	<style>
		 #html { color : red; }
		 #css { color : blue; }

		 #multi { font-size: 2em; }
		 #selector { color: blueviolet; }
	</style>
    
<dl>
    <dt>HTML</dt>
    <dd><span id="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt>CSS</dt>
    <dd><span id ="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
    <br>
    <!--다중선택 지원 x-->
    <div id ="multi selector">다중 선택자</div>
</dl>

 

 

 

  • 결과 
CSS
HTML
HTML은 문서의 구조를 나타냅니다.
CSS
CSS는 문서의 표현을 나타냅니다.

다중 선택자

 

  • class와 id의 차이점
    • 클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용할 수 있지만(클래스의 장점), id 속성값은 단 하나의 요소에만 들어가야합니다. 따라서 id 선택자로 규칙을 적용할 수 있는 요소는 단 하나 뿐입니다.
<style>
		 #html { color : red; }
		 #css { color : blue; }

		 .multi { color : gray; font-size: 2em; }
		
	</style>
    
<body>

    <dl>
        <dt>HTML</dt>
        <dd><span id="html">HTML</span> id 속성값 html은 해당하는 하나의 요소에만</dd>
        <dt>CSS</dt>
        <dd><span id ="css">CSS</span>id 속성값 css는 해당하는 하나의 요소에만</dd>
        <br>


    </dl>
        <div class ="multi">클래스는 여러 요소에 사용할 수 있지만 id의 경우 한 요소에 들어간 값은 다른 요소에 사용하지 못해요! 예를 들어 위에 코드를 보면 id ="html" 값은 해당 span요소를 제외하곤는 사용하지 못합니다.</div>
        <p class = "multi">클래스는 이처럼 여러 요소에 class 속성을 사용할 수 있어요!!!!</p>
</body>

 

 

  • 결과

728x90

'HTML&&CSS' 카테고리의 다른 글

CSS- 가상 클래스  (0) 2022.07.16
CSS-문서구조 관련 선택자  (0) 2022.07.16
CSS  (0) 2022.05.24
콘텐츠 모델, 시멘틱 마크업, 블록 레벨, 인라인 레벨  (0) 2022.05.20
HTML태그(5) -Form 관련 태그(4)  (0) 2022.05.19
'HTML&&CSS' Related Articles more