본문 바로가기

CSS8

CSS 로 세로 가운데 정렬하기 Vertical centering in CSS 세로 가운데 정렬을 하려면 absolute와 top:50% 속성을 이용해서 하는 방법이 많이 알려져 있었습니다. 그런데 그 방법이 좀 맘에 안들어서 새로운 방법을 생각해 봤는데 어디서나 잘 되려는지는 잘 모르겠네요. Chorme에서 테스트 해 봤습니다. #box1 { background-color:blue; min-height:150px; text-align:center; } #box2 { background-color:skyblue; vertical-align:middle; display:inline-block; } #box1:before { content:""; display:inline-block; min-height:150px; vertical-ali.. 2012. 7. 25.
CSS 만으로 삼각형 만들기 CSS만 가지고 삼각형을 만드는 것은 불가능하다고 생각했었는데, 정말 기발한 방법이 있더군요~ 말풍선을 만들 때 사용하면 상당히 많은 도움이 될 것 같습니다. 위의 코드대로 작성하면 빨간 삼각형이 생깁니다. 다양한 곳에 응용이 가능할 것 같네요~참고: [http://jonrohan.me/guide/css/creating-triangles-in-css/] 그런데, 또 다른 방법이 있습니다. 엄밀히 삼각형은 아니지만, 다른 box 요소와 붙이면 말풍선을 만들 수는 있을 것 같아요~그냥 45도 기울이는 건데요~ 단점이 있다면, 삼각형이 아니라 마름모꼴이라는 것! 그리고 IE8에서는 작동하지 않는 다는 점이구요~ 장점이 있다면, 그림자를 적용할 수 있다는 것 입니다. 2012. 7. 20.
CSS를 이용한 말줄임(...) 표현 우선 결과!! Internet Explorer 9.0 Opera 11.52 Firefox 8.0 Safari 5.1.1 Chrome 15.0 CSS 표현 가나다라마바사아자차카타파하 너비지정을 해 주고, 줄바꿈을 하지 않도록 해 주어야 글이 넘칠 것입니다. (물론 브라우저 가로 크기가 좁아지면 줄바꿈만 하지 않아도 되겠지만요) 그리고 넘치는 부분은 보이지 않게 해 주고, 글씨가 넘치는 부분은 점으로 처리하겠다고 적은 것입니다. 'ellipsis' 대신 'ellipsis-word'로 입력하면 단어 단위로 잘리는 것 같더군요~ 덧붙여서 구 버전의 브라우저들에서는 지원하지 않을수도 있습니다. 그래서인지 구 버전 브라우저용 CSS 코드가 있는 것 같기는 하더군요~ 근데 요즘 IE 빼고는 거의 최신 브라우저를 사용.. 2011. 11. 16.
CSS Box Model CSS를 시작할 때 가장 골치아픈 부분이 박스모델일 겁니다. 그나마!! Internet Explorer 8 이 나오고 나서는 좀 나아졌습니다. IE6 퇴출 운동과, Firefox와 Chrome의 점유율 확대, 그리고 아이폰과 아이패드로 인한 Safari의 급성장이 웹 프로그래머들을 약간 혼란스럽게 하지만~ 박스모델 부분에 있어서는 좋은 방향으로 변하고 있는 것 같습니다. 1. 박스모델이 뭔데 그러죠? 웹 프로그래밍 하면서 CSS로 너비, 여백, 테두리 등을 픽셀로 지정하는 방법의 차이 때문에 브라우저마다 다르게 보이는 문제가 있습니다. 브라우저가 얼마나 많은지... IE6, IE7, IE8, FF, Chrome, Safari, Opera.... etc. 여기에 DOCTYPE 을 어떻게 지정하느냐에 따라서.. 2010. 10. 13.

티스토리툴바