티스토리 저자(블로거) 프로필 카드 HTML&CSS

                      <div class="permalink__author">
                        <div class="img"><img class="profile" src="https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1"></div>
                        <div class="description">
                          <div class="user">라이브러리 브랜드</div>
                          <div class="desc">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.</div>
                        </div>
                      </div>

프로필 카드의 HTML 구조

게시글 본문 댓글 요소의 바로 윗 부분이나 태그 하단에 위의 HTML 구조를 적용하고, 티스토리 치환자로 블로거의 이미지인 https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1을 삽입한다.

블로거의 닉네임은 라이브러리 브랜드로 적용하고, 그 설명으로는 라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.로 구현한다.

티스토리 치환자의 적용은 게시글 본문 하단에 저자의 정보를 기입함으로써, 개인적인 블로그의 아이덴티티를 강조하고 방문자들로 하여금 블로거의 이미지를 각인시키는데 그 목적이 있다.

 

스타일시트의 적용

스타일시트는 각 블로그의 특징에 따라 적용하고 변형해서 사용한다. 일반적인 구조에서는 왼쪽에 이미지가 원형으로 삽입되고 왼쪽 정렬의 형태로 나란히 블로그의 닉네임과 설명이 구현된다.

.permalink__author {
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.1);
  margin-top: 30px;
  padding: 30px 0
}
.permalink__author .img {
  float: left
}
.permalink__author .img .profile {
  width: 80px;
  height: 80px;
  border-radius: 50%
}
.permalink__author .description {
  margin-left: 98px
}
.permalink__author .description .user {
  color: rgba(0,0,0,.8);
  margin-bottom: 5px
}
.permalink__author .description .desc {
  line-height: 1.8em;
  font-size: .9rem;
  color: rgba(0,0,0,.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 50px;
  vertical-align: top;
  word-break: break-all
}