Rev. 2.73

Román Cortés씨는 CSS 트릭으로 완전 골때리는 시도를 했습니다. 위 화면에서 스크롤을 오른쪽으로 이동해 보세요. 콜라 캔에 굴러갑니다. 이미지 한장을 영역별로 정교하게 매핑하여 입체적인 느낌을 표현했습니다. background-attachmentbackground-position 속성 그리고 몇몇 CSS3 트릭으로 만들어진 것입니다.

Comments

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

people.jpg

CodeMirror는 각종 컴퓨터 프로그램 코드를 웹상에서 쾌적한 환경으로 편집할 수 있도록 구축하는데 도움주는 자바스크립트 라이브러리입니다. 전문 코드 편집기에 상응하는 문법 강조 및 코드 편집기능들을 제공합니다. 특히 다중 편집 모드를 지원하여 HTML + CSS + JavaScript 또는 HTML + PHP처럼 여러 언어를 복합적으로 편집할 때에도 문법을 강조할 수 있습니다. 사용할 수 있는 언어로는 JavaScript, XML/HTML, CSS, SPARQL, PHP, Python, Lua, Ruby, SQL 이 있으며, 크로스-브라우저를 지원합니다. 구글의 API 놀이터어스 KML 셈플러, 파이어버그 플러그인인 FireRainbow 등에서 CodeMirror를 이용한 편집기를 제공하거나 문법 강조기능을 활용하고 있습니다. 보다 자세한 사용법은 API 문서를 참조하세요.

var editor = CodeMirror.fromTextArea('code', {
  height: "350px",
  parserfile: [
    "parsexml.js", "parsecss.js", "tokenizejavascript.js",
    "parsejavascript.js", "parsehtmlmixed.js"
  ],
  stylesheet: [
    "css/xmlcolors.css", "css/jscolors.css", "css/csscolors.css"
  ],
  path: "js/"
});

Comments