웹 디자이너를 위한 웹 코딩 강좌 아홉 번째 시간입니다.
오늘은 부모와 자식에 대한 개념을 알아볼게요. 특정 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;
}
재밌죠?! 분명히 코드를 적었는데 작동을 안 한다면 저 우선순위를 생각해보세요.
크롬 브라우저에서 요소 보기를 통해서도 제대로 작동되고 있는지 확인이 가능합니다.
만약 스타일 영역에 -가 그어져있다면 적용 순위에서 밀린 것입니다.
