웹 기초 - 후손 선택자, 자식 선택

RYU·2025년 4월 11일

웹 기초

목록 보기
7/46

문제1

  • 아래처럼 나오게 만들기

HTML
<div>
  <a href="#">네이버</a>
</div>
<section>
  <a href="#">구글</a>
</section>
CSS
div > a {
  color: green;
}
section > a  {
  color:red;
}
  • ' ' : 후손 선택자
  • > : 자식 선택자

문제2

  • 각각의 크기와 색상이 다른 링크 버튼 3개 만들기

HTML
<div>
	<a href="http://www.naver.com">네이버</a>
</div>
<nav>
	<a href="http://www.google.com">구글</a>
</nav>
<section>
	<a href="http://www.daum.net">다음</a>
</section>
CSS
div > a {
  color: black;
  font-size: 6rem;
}
nav > a {
  color: red;
  font-size: 10rem;
}
article > a {
  color: blue;
  font-size: 13rem;
}

0개의 댓글