WebDevelop 수업 - Day4 CSS 선택자

김지원·2022년 6월 14일
0

WebDevelop2

목록 보기
5/34

선택자

html의 코드를 선택할 수 있어야하기 때문에 선택자라고 한다.

  • 주석은 이렇게 사용한다. 한 가지 밖에 없다
< 선택자 (Selector) > {
	< 속성 (Property) > : < 값 >;
    < 속성 > : < 값 >;
    < 속성 > : < 값 >;
}

요소 선택자 (Element Selector)

'태그 이름' {
		'속성' : '값';
        .....
}
<style>
    a {
  	  background-color: black; // 배경색상
  	  color: red; // 글씨색상
    }
    b {
       color: blue;
    }
</style>
<a>Hello!</a>
<b>
    <a>child</a>
</b>
<a>ABCD</a>

  • 부모, 자식 관계상관없이 태그만 같다면 속성이 적용이 된다.

자식 선택자

' 부모 선택자 ' > ' 자식 선택자 ' {
	....
}
body > a {
    font-size: 32px; // 글씨크기
}

b > a {
    text-decoration: underline;
}

자손(후손) 선택자

: 자식도 선택

' 선조 ' ' 자손 ( 후손 ) 혹은 자식 ' {
   ...
}
<a>1</a>
<div>
    <a>2</a>
    <div>
        <a>3</a>
        <span>
            <a>4</a>
        </span>
    </div>
</div>
<a>5</a>
div > a {
	color: red;
}

div  a {
	color: red;
}


  • background-color : 배경색상
  • color : 글씨색상
  • font-size: 글씨크기
  • text-decoration :
profile
Software Developer : -)

0개의 댓글