CSS 선택자

inchan included in Front-End

2022-09-23 About 300 words One minute - views

Contents

CSS 선택자 - 조합, 그룹, 가상

Quote

HTML, CSS 실력을 단숨에 수직상승 시킬 수 있는 팁! 바로 ‘클론 코딩’ 입니다.

단순 반복의 목록형 페이지 - 쇼핑몰이 클론코딩을 하기에 실용적이고, 어렵지 않으면서도 자주 쓰이는 기술이 많이 들어갑니다.

여러분들이 자주 접속하는 쇼핑몰 중에 심플하고 세련된 사이트를 선정하여, 똑.같.이! 한 페이지만 만들어보세요. 개발자도구를 보면 HTML, CSS 힌트를 얻으실 수 있습니다.

부모 자식관계의 태그나 요소에서 상위에서 설정된 스타일이 상속된다. 이를테면 body태그에 스타일을 지정하면, 해당 태그내의 모든 태그는 영향을 받아 스타일이 적용된다.

다중 요소의 스타일을 한번에 처리하고자 할때, 해당 요소 사이에 , 로 구분하여 처리한다.

1
2
3
4


/* 예시 코드 */

.name, span, #hero, p
	color: green;

일관성이 필요한 스타일의 경우 유용하게 쓸 수 있으며, 한번에 유지보수가 가능한 이점이 있다.

부모-자식간의 관계는 한칸 띄워쓰기로 표현한다.

1
2
3
4


/* class="pre" 안에 있는 모든 span태그를 지칭 */
.pre span {
	background-color: yellow;
}

하나의 요소에서 클래스,ID로 조합될 경우에는 붙여쓰기로 표현한다.

1
2


<p>빨간색으로 표현됨</p>
<p id="hero">빨간색에다가 밑줄 적용이 추가됨</p>

1
2
3
4
5
6
7
8
9


/* p태그의 컬러는 상속되고, hero아이디의 속성이 개별적으로 적용된다.*/

p {
	color: red; 
}

p#hero {
	text-decoration: underline;
}