내용으로 건너뛰기
GINS WIKI 긴스 위키
사용자 도구
로그인
사이트 도구
검색
도구
문서 보기
이전 판
역링크
최근 바뀜
미디어 관리자
사이트맵
로그인
>
최근 바뀜
미디어 관리자
사이트맵
현재 위치:
긴스위키 GINS wiki
»
개발 언어
»
css
»
CSS 선택자에 대해서
추적:
language:css:기본_요약
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
~~Title:CSS 선택자에 대해서~~ {{section>language:jquery:jquery_문서_목록#jQuery_문서_목록&nofooter&noeditbtn}} ======CSS 선택자에 대해서====== ====== 주석 ====== <code css> /* 한줄 주석 */ /* 여러줄 주석 */ </code> ====== 기본문법 ====== 선택자 { 선언부 } 선언부에는, 속성명과 값을 써서 CSS를 설정한다. 선택자 { 속성명: 속성의값; 속성명: 속성의값; } * 속성명 : Property * 속성의 값 : Value ====== 선택자 ====== <code html> <div>hello</div> <p>hello2</p> </code> <code css> * { color: blue; } </code> 선택자를 '' * ''로 해두면 모든 요소를 선택하는 것이 된다. ===== 태그 요소 선택자 ===== <code html> <div>hello</div> <h2>hello2</h2> <p>hello3</p> </code> <code css>h2 { color: red; }</code> 선택자 '' h2 ''를 사용한 부분만 선택된다. ===== 아아디 선택자 ===== * ''#'' ← 아이디 선택자 in CSS <code html> <div>hello</div> <h2>hello2</h2> <p id="hello">hello3</p> </code> <code css>#hello { color: red; }</code> html 태그에 '' id ''를 사용해서 값을 설정하고 css 에서는 아이디 선택자 '' # ''를 사용해서 요소를 선택한다. * ?? : '' id ''는 여러개 쓰게 되면 어떤게 선택되는걸까? ===== 클래스 선택자 ===== * ''.'' ← 클래스 선택자 in CSS <code html> <div class="first">1번 그룹</div> <div class="first">2번 그룹</div> <div class="second">3번 그룹</div> <div class="second">4번 그룹</div> </code> html에서 ''class''를 사용해서 속성 값을 부여한다. CSS 에서는 ''.'' 기호를 붙여 해당 클래스를 사용하는 요소를 선택한다. <code css> .first { color:red; } .second { background-color: green; } </code> ===== 다중선택자 ===== * 선택자를 '' , ''를 사용해서 여러개를 선택자에 같은 스타일을 지정할 수 있다. <code css> h1, #hello, .first { color: red; } </code> ===== 결합선택자 ===== html 문서에서 계층 관계에 따른 부모,자식 요소를 선택하기 위한 선택자 <code html> <div> <p>1번 자식 요소</p> </div> <div class="parent"> <p>2번 자식 요소</p> </div> </code> <code css>div p { color:blue; }</code> * ''<div>'' 태그 하위에 있는 모든 ''<p>'' 태그를 선택한다. <code css>.parent > p { color: green; }</code> * ''.parent > p'' 는 ''parent'' 클래스를 가진 요소에서 모든 ''<p>'' 태그만을 선택한다. 두개의 차이가 미묘..
language/css/기본_요약.txt
· 마지막으로 수정됨: 2024/04/23 22:44 저자
127.0.0.1
문서 도구
문서 보기
이전 판
역링크
맨 위로