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

2022-09-23 182 words One minute

Contents

Quote

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

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

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

CSS 선택자

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

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

/* 예시 코드 */

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

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

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

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

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

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

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

p {
	color: red; 
}

p#hero {
	text-decoration: underline;
}