커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
[1-15]본격 부트스트랩 써보기 4:35~
undefined주차
북마크
김*연
댓글
1
추천
0
조회수
6
조회수
6
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


.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 } 로 주었습니다.

하위가 다단계로 있을때는 직접적으로 가르켜서 하면 된다고 이해하면 될까요?





스파르타 즉문즉답








취소
 공유
취소
댓글 0
댓글 알림
나의얼굴