CSS) 기본선택자

서지은·2024년 8월 31일
backgroundclasscolorfont-sizeid

CSS 기본문법

목록 보기
1/8
post-thumbnail

css영역(스타일을 기술할 수 있는 영역)

내부 스타일 방식

현재 이 문서에서 적용시키고자하는 스타일 정보들을 <style>태그내에 가입하는 방식

이 html문서 내에 스타일 정보를 같이 기술하는 방식
<style>
 h3{
     background: yellow;/*배경색*/
   	}
 p, pre{
     color: rgb(153, 0, 255); /*글씨색상*/
    }
</style>
<body>
<h3>선택자란? </h3>
    <p>
        특정 html요소를 선택하고자 할 때 사용하는 기능<br>
        해당 요소를 선택해서 원하는 "스타일"과 "기능"을 적용시킬 수 있다.
    </p>
    <h3>1. 모든(전체) 선택자 : *</h3>
    <p>현재 이 문서상에 모든 요소들을 다 선택하고자 할 때 사용</p>
    <pre>
        *{
            스타일속성 : 값;
            스타일속성 : 값;
            ...
        }
    </pre>
</body>

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

모든 요소들을 다 선택하고자 할 때
*{
    스타일속성 : 값;
    스타일속성 : 값;
      ...
  }

2. 태그 선택자 : 태그명

해당 태그들을 다 선택하고자 할 때
태그명 {
        스타일속성 : 값
        ...
       }

3. 아이디 선택자 : #아이디

특정 html요소 "하나"만을 선택하고자 할 때
단, 해당 요소에서 id속성을 이용해서 고유한 아이디를 부여해야함
<style>
	#id1{
  	    color: orange;
  		}
</style>
<body>
   <li id="id1">아이디선택자</li>
</body>

4. 클래스 선택자 : .클래스명

내가 원하는 요소 "여러개"를 선택하고자 할 때
<style>
	.cl1.cl2{
    	background: beige;
            }
</style>
<body>
	<li class="cl1 cl2">클래스3</li>
</body>

인라인 스타일 방식

스타일을 보여하고자하는 요소내에 style속성을 이용해서 직접적으로 기입하는 방식
우선순위가 가장 높음
ex)
<h1 style="color: blue;">CSS 기본선택자</h1>
profile
서지은
다음 포스트

CSS) 기타선택자

0개의 댓글