[HTML, CSS] 종합 메모장 만들기 (feat, a href)

아래 사진 안 네모 박스에 효과를 넣으려고 한다.

 

노란 박스 안에는 링크 삽입 ( <a href> 이용 )

 

파란 박스 안에는 글씨 색상 변경  ( <class="">와 CSS 이용 )

 

<style>

     .comment{
          color : blue;
      }
</style>

 

<div class="card">
<img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
<div class="card-body">
<h5><a href="http://naver.com/"> 여기 기사 제목이 들어가죠 </a></h5>

 

// <a href="url"> 사용하고, 글씨 크기 조정을 위하여 앞, 뒤로 <h5> 삽입

                                                       <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이                                                            마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리</p>
                                                       <div class="comment">여기에 코멘트가 들어갑니다.</div>

                                                       </div>
                                                       </div>

                                                         

                                                        // class="comment" 지정 후 위로 올라와서 style 내에 .comment에 효과

                                                           color : blue ; 입력해 준다.