Rev. 2.73

4년만에 블로그를 대대적으로 성형하고 있습니다. 최근 코멘트 출력부를 과감히 수정했는데 이곳의 스타일을 풍선말과 유사한 느낌을 주기 위해서 화살표 부분을 순수 CSS만으로 작성했습니다. 날로 먹겠거니 생각했는데 예상했던 것 이상으로 까다롭더군요. 그래서 요소의 보더와 색상 CSS 속성을 이용한 삼각형 사용방법에 대하여 정리해 보았습니다.

예제 :

삼각형이 그려지는 원리는 간단합니다. 요소의 스타일에 보더 속성을 두껍게 적용하면 모서리로부터 만들어지는 사선과 색상을 교묘히 조합하여 만들어내는 일종의 트릭입니다. 이해를 돕기위해 여기에 몇몇 예제를 작성했습니다. :

<div class="css-arrow-multicolor"></div>

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

요소의 높이와 너비는 0입니다. 그리고 보더의 너비는 20픽셀이며 각각 다른 색상을 지정했을 때 위와 같은 결과를 볼 수 있습니다. 그리고 약간의 창의력을 발휘하면 다양한 모양을 만들어 낼 수 있습니다. :

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

이제 응용해 봅시다. :

Buongiorno!
<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}

.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

문제는 보더 색상을 투명으로 지정할 수 없는 IE6 에서 발생합니다. 아래와 같은 CSS 핵을 이용하여 처리할 수 있습니다.

/* IE6 */
.chat-bubble-arrow {
  _border-left-color: pink;
  _border-bottom-color: pink;
  _border-right-color: pink;
  _filter: chroma(color=pink);
}

Comments

최근 트래픽 유입이 많은 트위터(Twitter)미투데이(me2DAY)와 같은 소셜 미디어의 오픈 API를 이용하여 글을 포스팅하기 시작한 것을 계기로 새로운 소통문화을 즐기고 있습니다. 재미있는 일은 블로그에서 제공하는 댓글 기능을 통해서 이루어지는 소통보다 양적으로나 질적으로나 더욱 원활한 소통이 이루어 진다는 것입니다. 사실 예전부터 그랬지만 이 블로그에 작성된 포스트에는 댓글이 잘 달리지 않는 편입니다. 그래서 이 양질의 댓글들을 쌔벼(?)오기로 마음먹고 약 3일 정도 삽질해서 위와 같은 결과물을 만들었습니다. PHP와 자바스크립트로 구현하였으며, 이 과정에서 습득한 몇가지 정보들과 변경된 점들을 정리해 보았습니다. :

1. 블로그 포스트가 공개(Public)되는 시점에서 트위터와 미투데이에 글 내보내기(Sync)
2. 내보내기에 성공한 경우 응답 결과로부터 생성된 포스트의 ID를 블로그 포스트 DB 필드에 기록
3. 블로그 포스트 DB 정보로 부터 트위터와 미투데이의 포스트 ID를 근거로 댓글 목록 호출
4. 이 과정에서 댓글에 댓글이 달린 경우를 구분하여 2차 호출
5. 질의 응답을 구분한 댓글 HTML(Skin) 파싱
6. 시간 흐름순으로 노드 재정렬 및 데코레이션

다수의 서버간 소켓통신이 발생하기 때문에 응답 속도가 매우 느립니다. 그래서 페이지 로딩 속도에 지장을 주지 않기위해 자료호출 부분은 Ajax로 처리하였으며, 댓글 목록과 댓글 갯수를 요청하기 위한 두가지 모드가 있습니다. 여기에 사용된 서버단 라이브러리로는 Me2PHPTwitter class를 사용하였으며, 몇몇 메서드나 함수들은 직접 작성하였습니다. 기존과 다른 점은 댓글이 출력되는 모양을 iChat틱(?)하게 스타일하였고 이메일 정보를 추가로 입력하는 경우 Gravatar API를 이용하여 아바타 이미지를 호출하고 출력하도록 했으며 트랙백과 댓글을 구분하지 않고 코멘트 영역으로 포함시켜 버린 것 등입니다. 상황봐서 원격으로 댓글을 작성하는 기능과 속도 개선을 위해 자료를 캐시하는 기능을 추가해 볼 생각입니다.

* 2010-01-25 : 인라인 댓글 작성기 및 편집기 추가
* 2010-01-27 : 트위터 원격 댓글 작성기능 추가
* 2010-01-27 : 트위터의 응답 결과를 캐시하여 호출속도 향상
* 2010-01-29 : 트위터의 OAuth API를 이용한 세션 공유 지원
* 2010-01-30 : 트위터의 서버단 라이브러리를 twitter-async로 교체
* 2010-07-9 : 트위터의 데이터를 서버 데이터베이스에 보관
* 2010-07-10 : 서버로부터 트위터 데이터를 정적인 컨텐츠로 호출
* 2010-07-10 : 서버와 트위터 API간 비동기식 동기화 로직 추가
* 2010-07-18 : @Anywhere API 이용한 호버카드 적용
* 2010-07-19 : 동기화 데이터베이스 최적화 및 경량화
* 2010-07-20 : 댓글에 댓글 출력 위치 구분
* 2010-07-22 : 멘션, 사용자 타임라인, 트위터 데이터 캐시 범위 확장
* 2010-07-25 : 트위터 데이터 베이스 덤프

Comments