#9 부모와 자식 관계 - 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 아홉 번째 시간입니다.
오늘은 부모와 자식에 대한 개념을 알아볼게요. 특정 class나 id 안에 있는 요소에만 스타일을 적용시키고 싶을 때 사용합니다. 나중에 Javascript를 할 때도 비슷한 개념이 있어서 알아두면 좋습니다. 최대한 코드를 간단하게 효율적으로 짜는 게 중요하니까요.

예제 파일 : https://drive.google.com/drive/folders/1doB0zZVzc7xrQXv7Vp7qVebiSsqjf1bx?usp=sharing

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

일반적으로 태그를 쓸 때 하나만 쓰지 않죠. 그 안에 여러 태그를 적습니다.

<article>
    <h1>제목</h1>
    <p>설명</p>
</article>

이렇게 있다면, h1 태그는 article 태그의 자식이죠.
반대로 article는 h1 태그의 부모입니다.
간단하죠?

이걸 왜 알아야 할까요? 특정 태그 혹은 class, id 명 하위에 자식 요소에만 스타일을 줄 수 있기 때문이죠. 모든 태그에 class와 id를 부여할 수는 없잖아요.

특정 부모의 자식 선택자에게만 스타일을 입히는 방법은 간단합니다.
앞에 부모 뒤에 자식을 넣어주면 되는 거예요.
바로 한 단계 하위에 적용하고 싶다면 article > h1 이렇게 적어주시면 됩니다.
더 정확한 이해를 위해서 영상을 시청해주시길 바랍니다 🙂

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>부모와 자식 선택자</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<h1>리스트</h1>
		<article>
			<h1>제목</h1>
			<p>설명</p>
		</article>

		<article class="dark-mode">
			<h1>제목</h1>
			<p>설명</p>
		</article>

		<article>
			<div class="title">
				<h1>제목</h1>
			</div>
			<p>설명</p>
		</article>

	</div>
</body>
</html>

*{
	box-sizing: border-box;
}
.container{
	width:100%;
	max-width: 1080px;
	padding:40px;
	margin:auto;
}
article{
	width: 100%;
	padding:20px;
	font-size: 16px;
	background-color:  #eee;
	border-radius: 10px;
	margin-bottom:20px;
}

h1{
	font-size: 24px;
	margin-bottom:10px;
}

article > h1{
	font-size: 20px;
	margin:0;
}
article p{
	margin:0;
}
.dark-mode{
	background-color: black;
}
.dark-mode h1, .dark-mode p{
	color:#fff;
}

재밌죠?! 분명히 코드를 적었는데 작동을 안 한다면 저 우선순위를 생각해보세요.
크롬 브라우저에서 요소 보기를 통해서도 제대로 작동되고 있는지 확인이 가능합니다.
만약 스타일 영역에 -가 그어져있다면 적용 순위에서 밀린 것입니다.