
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
.mytitle > button {
width: 250px;
height: 50px;
background-color: transparent;
border:1px solid white;
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle > button:hover {
border:2px solid white;
}
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 됩니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 됩니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 됩니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text"> 여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 됩니다.</p>
</div>
</div>
</div>
</div>
</div>
앞서 배울때는 > 키워드를 사용하여 하위클래스를 나타내었습니다.
.mycomment {} 클래스는 <div class="col"> 아래 <div class="card-body"> 아래에 위치한다면
css로 값을 주고 싶을때 .col > .card-body > .mycomment { background-color:gray; } .이런식으로 주어야한다고 생각하는데
강의에서는 바로 .mycomment { color:gray } 로 주었습니다.
하위가 다단계로 있을때는 직접적으로 가르켜서 하면 된다고 이해하면 될까요?

