language:css:기본_요약
문서의 이전 판입니다!
~~Title:CSS 선택자에 대해서~~
주석
/* 한줄 주석 */ /* 여러줄 주석 */
기본문법
선택자 { 선언부 }
선언부에는, 속성명과 값을 써서 CSS를 설정한다.
선택자 { 속성명: 속성의값; 속성명: 속성의값; }
- 속성명 : Property
- 속성의 값 : Value
선택자
<div>hello</div> <p>hello2</p>
- { color: blue; }
선택자를 *
로 해두면 모든 요소를 선택하는 것이 된다.
태그 요소 선택자
<div>hello</div> <h2>hello2</h2> <p>hello3</p>
h2 { color: red; }
선택자 h2
를 사용한 부분만 선택된다.
아아디 선택자
- 아이디 선택자 in CSS :
#
<div>hello</div> <h2>hello2</h2> <p id="hello">hello3</p>
#hello { color: red; }
html 태그에 id
를 사용해서 값을 설정하고 css 에서는 아이디 선택자 #
를 사용해서 요소를 선택한다.
- ?? :
id
는 여러개 쓰게 되면 어떤게 선택되는걸까?
클래스 선택자
- 클래스 선택자 in CSS :
.
<div class="first">1번 그룹</div> <div class="first">2번 그룹</div> <div class="second">3번 그룹</div> <div class="second">4번 그룹</div>
html에서 class
를 사용해서 속성 값을 부여한다. CSS 에서는 .
기호를 붙여 해당 클래스를 사용하는 요소를 선택한다.
.first { color:red; } .second { background-color: green; }
다중선택자
- 선택자를
,
를 사용해서 여러개를 선택자에 같은 스타일을 지정할 수 있다.
h1, #hello, .first { color: red; }
결합선택자
html 문서에서 계층 관계에 따른 부모,자식 요소를 선택하기 위한 선택자
<div> <p>1번 자식 요소</p> </div> <div class="parent"> <p>2번 자식 요소</p> </div>
div p { color:blue; }
<div>
태그 하위에 있는 모든<p>
태그를 선택한다.
.parent > p { color: green; }
.parent > p
는parent
클래스를 가진 요소에서 모든<p>
태그만을 선택한다.
두개의 차이가 미묘하군요..
language/css/기본_요약.1622705645.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)