'CSS'에 해당되는 글 34건

  1. 2011.07.01 word-wrap
  2. 2011.06.13 button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법
  3. 2011.05.19 크로스 브라우져 CSS 그라디언트 사용하기
  4. 2011.05.19 CSS Background 투명도 조절 (RGBa, Filter 활용)
  5. 2011.04.06 대체 텍스트 안보이게 하기
  6. 2011.04.05 css3 라운드박스
  7. 2011.02.14 텍스트 정렬에 관한 문제 2
  8. 2011.02.14 텍스트 세로 중앙 정렬에 관한 문제.
  9. 2011.01.04 css 텍스트 말줄임 (1)
  10. 2011.01.04 텍스트 줄바꿈 처리 word-break, white-space

word-wrap

CSS 2011.07.01 16:52

그냥 일반적으로 검색해서 나오는 word-wrap 방법들은 뭔가 하나씩 안됨.

 

테스트 결과 다 되는 것 찾았음..

 

<style type="text/css">

table {

 table-layout:fixed;

}

 

p {
 width: 300px;
 border:1px solid red;
 word-wrap:break-word;
 word-break:break-all;
}
.wordBreak {
 font-size:0;
 line-height:0;
}

</style>

<script type="text/javascript">
//<![CDATA[
function wordBreak(element) {
 element.innerHTML = element.innerHTML.split('').join('<span class="wordBreak"> </span>');
}
//wordBreak(document.getElementsByTagName('div')[0]);
wordBreak(document.getElementsByTagName('p')[0]);
//]]>
</script>

 

<table border="1" width="500px">
 <tr>
  <td width="100px">가나다라</td>
  <td width="300px"><p>
 http://search.naver.com/search.naver?where=nexearch&query=%BC%D2%B3%E0%BD%B4%EB+%C4%AB+%B8%F1%B7%CF&sm=top_hty&fbm=1
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십
 </p>

</td>

  <td width="100px">가나다라</td>
 </tr>
</table>

 

</body>
</html>


출처 :  http://blog.naver.com/yjhyjh5369/80112540094

신고
Trackback 0 : Comment 0

button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법

CSS 2011.06.13 10:08

출처 : NULI 
http://html.nhncorp.com/?mid=textyle&category=5838&vid=blog&document_srl=2038
HTML/ CSS 작성일: 작성자: 폭폭이

안녕하세요. 웹표준화팀 한혜진입니다.

저는 그동안 <button>엘리먼트는 생소하고, 그 기능도 모호한 것 같아서 잘 사용하지 않았었습니다.
그런데 에디터 관련 프로젝트를 진행하던 중, 글편집기 상단에 도구 모음들을 마크업해야 할 일이 생겼고,
<a>와 <button> 중 어떤 태그로 마크업 하는 것이 더 시멘틱 할까를 고민하게 되었습니다.

<a>와 <button>의 쓰임새를 정리해보자면,
<a>
엘리먼트는 앵커(anchor)로써 문서 간의 연결, URI 참조가 주된 목적이고
<button>
엘리먼트는 누를 수 있는 단추로써, 누르거나 눌렀다 놓았을 때 이벤트를 발생시키도록 하는게 주된 목적입니다.

그러므로, 이벤트를 발생시켜야 하지만 Submit 할 것은 아닌,
단순히 UI조작(기능 선택, 레이어 보이기, 숨기기, 삭제 등)을 위한 버튼이라면
<button>엘리먼트를 사용하는 것이 시멘틱할 것 같다는 게 저의 생각이었습니다.

또 개발 담당자분께서 말씀하시길,
도구 모음쪽에 <a> 엘리먼트를 사용할 경우, 도구모음을 클릭하고 편집기에서 글을 쓰면 글이 잘 안써지는 버그가 있는데
<button>엘리먼트를 사용하면 그 버그가 발생하지 않는다고 하셨습니다.
그래서 더욱 힘을 얻고 <button> 엘리먼트로 마크업을 하게 되었습니다.

그런데 <button>엘리먼트로 마크업하면서 생각치 못한 여러가지 문제점들이 발생했습니다.
어떤 문제점 들이 있었는지 <button>의 브라우저별 랜더링 비교, 사용 방법, 문제점, 해결 방법 등을 지금부터 공유합니다.

 


<button>엘리먼트의 브라우저별 랜더링 비교

<button>엘리먼트는 다음과 같이 마크업할 수 있습니다.

<button type="button">글자색</button>

그러면 IE는 다음과 같이 랜더링합니다.
글자색


다른 브라우저에서도 IE와 동일하게 랜더링할까요? 바로 비교해보겠습니다.


※ 기본 버튼의 브라우저별 랜더링 비교

브라우저별 button 엘리먼트 랜더링 비교

다른 form요소도 그러하듯이, <button>엘리먼트도 각 브라우저가 가진 고유의 스타일로 랜더링 합니다.
넓이도, 높이도, 모양도 다르고, 텍스트의 세로 정렬도 다릅니다.
심지어 텍스트를 왼쪽 정렬시켜도, 각 브라우저마다 여백에 많은 차이가 있는 것을 한눈에 알 수 있습니다.
이 녀석을 어떻게 내 입맛에 맞게 구워 삶으면 좋을까요?



<button> 엘리먼트 사용방법

텍스트를 정렬하기 위한 버튼의 조합이 있습니다.

정렬

세개 버튼중 왼쪽 정렬 버튼은 다음과 같이 마크업할 수 있습니다.

button {width:21px; height:21px; margin:0; padding:0; border:0; background:none;  font-size:0; line-height:0; cursor:pointer;}

<button type="button"><img src="left.gif" alt="왼쪽정렬" wdith="21" height="21"></button>	

▶ img를 사용한 버튼 보기

이렇게 마크업을 하면 버튼 클릭시 움직임이 있습니다.
더 큰 문제는 FF와 Chrome에서는 button이 기본적으로 여백을 가지고 있다는 것입니다. (아래 표 참고)
FF과 Chrome에서도 그 여백에 차이가 있어 CSS hack으로도 완벽히 동일하게는 처리가 어렵습니다.



※ button에 img를 넣었을 때 브라우저별 랜더링 비교

버튼 비교

 

저는 클릭시 움직임이 없으며, 모든 브라우저에서 동일한 버튼을 만들기 위해 아래와 같이 마크업했습니다.

button {width:21px; height:21px; margin:0; padding:0; border:0; 
background:url(http://html.nhndesign.com/img/blog/hhj/img/align_set.gif) no-repeat;  cursor:pointer; /* button에 배경삽입 */} 
button span {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; visibility:hidden;/* 대체 텍스트 숨김 처리 */} 

<button type="button" title="왼쪽정렬"><span>왼쪽정렬</span></button>

▶ 클릭시 움직임이 없는 버튼 보기


이미지는 button에 background로 처리했습니다.
<span>왼쪽정렬</span>은 대체 텍스트와 같은 역할을 위해 넣었으며,
title은 툴팁 효과를 내기 위해 넣었습니다.
이 버튼은 모든 브라우저에서 동일하게 보이며, 클릭시 움직이지 않습니다. (단, IE8에서는 클릭시 움직임이 있습니다.)

이렇게 마크업을 하면, CSS가 깨졌을 경우 다음 처럼 랜더링 됩니다.
CSS가 깨졌을 경우1

만약 <span>왼쪽정렬</span> 을 넣지 않으면 CSS가 깨질 경우 다음 처럼 랜더링됩니다.
CSS가 깨졌을 경우2

그렇기 때문에 대체 텍스트 역할을 할 <span>왼쪽정렬</span> 넣어주고, 눈에 보이지 않도록 스타일을 지정합니다.
display:none 처리를 하지 않은 것은 시각장애인이 스크린리더기를 사용해서 읽을 때도 읽을 수 있도록 하기 위함입니다.

잠시 visibility 속성에 대해 짚고 넘어가자면,
현재 국산 스크린리더기인 센스리더는 visibility:hidden을 display:none과 마찬가지로 읽어주지 않고 있는데 이것은 잘못된 것입니다.
http://trio.co.kr/webrefer/css2/propidx.html 에서 보면
visibility 속성은 미디어 타입이 visual일때 지켜야 하는 사항이라고 나와있습니다.
즉 '미디어 타입이 눈으로 볼 수 있는 TV, 스크린, 프린트 등일때 visibility:hidden이라면 보여주지 말아야 한다' 는 건데요.
스크린리더기는 aural 타입이므로 visibility:hidden으로 되어 있어도 읽을 수 있게 해주어야 합니다.
그래서 센스리더 측에 제안을 했고, 다행히도 다음 버전에서 업데이트 해주신다고 합니다.

이렇게 작업을 해주면 모든 브라우저에서 동일하게 보여지고, 클릭시 움직임도 없습니다.
개발을 붙일 때도 용이하며 CSS가 깨졌을 경우에도 콘텐츠 내용을 알 수 있으므로 접근성도 좋아집니다.
하지만 이미지가 로딩이 안될 경우에는 아무것도 안보이게 되는데요. 이럴 경우는 거의 없다라고 생각하고 넘어가겠습니다.



IE8에서 문제점


여기서 한가지 문제가 있습니다.
위에 제시한 대로 마크업을 하면 버튼을 클릭시에도 오페라, 사파리, 크롬, IE7이하, FF에서 모두 움직임이 없고, 여백도 없이 동일하게 보여집니다.
하지만 IE8에서는 button 자체가 움직이기 때문에 이미지를 배경으로 처리해도 움직이게 됩니다.

브라우저단에서는 클릭시에 움직임을 줌으로써 "이 녀석은 누를 수 있는 '버튼'입니다" 라고 명확하게 알려주고,
사용자로 하여금 풍부한 기능을 체험
하게 해주고 싶었을 겁니다.
그렇기 때문에 움직이면 움직이는 데로 자연스럽게 두는 것이 풍부한 사용자 경험을 위해서는 더 좋을 수 있습니다.
실제로, 제가 진행하는 프로젝트에서는 버튼이 움직이는 것이 크게 나빠보이지 않는다는 의견이 많아
IE8에서 움직이는 현상을 자연스럽게 그대로 두기로 했습니다.

하지만, 클릭시 움직임이 디자이너의 관점에서는 용납이 안되는 경우가 있을 수도 있기 때문에 그 해결 방법을 제시합니다.
ex) 클릭시 움직임으로 인해 전체 그리드가 깨져보이는 경우
툴바


해결 방법

해결방법1

button {width:21px; height:21px; margin:0; padding:0; border:0; background:none; cursor:pointer;}
button span {position:relative; display:block; width:21px; height:21px; margin:0; padding:0; background:url(img/align_set.gif) no-repeat;}
button span span {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; visibility:hidden;}
button span, x:-moz-any-link, x:default {margin:-2px 0 0 -3px !important;} /* Mozilla 계열만 인식되는 firefox 핵 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
button span{margin:-1px 0 0 -3px !important;}
} /* Webkit 엔진계열만 인식하는 safari,chrome 핵 */

<button type="button" title="왼쪽정렬"><span><span>왼쪽정렬</span></span></button>

▶ 해결방법1 로 마크업한 버튼 보기

<span>에 배경이미지를 주고 position을 relative로 주었습니다.
이렇게 하면 IE8에서도 움직이지 않게 됩니다.
하지만 여전히 FF과 Chrome에서 여백이 발생하므로 CSS hack을 사용했습니다.
(단, Opera에서는 클릭시에 움직임이 있습니다. -_-; 여렵다 어려워..)

 

해결 방법2

.left {display:block; width:21px; height:21px; margin:0; padding:0; border:0; font-size:0; 
background:url(http://html.nhndesign.com/img/blog/hhj/img/align_set.gif) 0 0 no-repeat;}
button {width:21px; height:21px; margin:0; padding:0; border:0; background:none; cursor:pointer;}
button span {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; visibility:hidden;}

<span class="left"><button type="button" title="왼쪽정렬"><span>왼쪽정렬</span></button></span>

▶ 모든 브라우저에서 동일하게 보여지는 button 보기

<button>을 <span>으로 감싸고, <span>에 이미지를 배경처리 합니다.
이렇게 처리하면 CSS Hack을 쓰지 않아도, IE8에서도 움직이지 않고, 모든 브라우저에서 동일하게 보여집니다.
하지만 불필요한 태그가 생김으로 해서 CSS스타일도 그만큼 늘어나게 되니,
퍼포먼스와 심미성의 경중을 따져서 결정하시면 될 것 같습니다.

 

<button>엘리먼트에 대해서 많은 자세한 내용을 전달하고 싶은 마음에 글이 너무 길어졌네요.
끝까지 읽어주셔서 감사합니다.



궁금한 점이 있으시면 hyejin.han앳nhncorp.com 으로 문의주세요.

행복한 하루되세요~

신고
Trackback 1 : Comment 0

크로스 브라우져 CSS 그라디언트 사용하기

CSS 2011.05.19 16:43

CSS 그라디언트는 이미 2년전에  Webkit에 의해 도입되었지만, 여러 브라우져들과의
비호환성때문에 사용이 드물었습니다. 하지만 현재 CSS 그라디언트를 지원하는 파이어폭스(firefox) 3.6+ 덕분에
우리는 이미지로 만들 필요 없이 그라디언트를 만들 수 있습니다.
이번 포스트는 메이져 브라우져에서 가능한 CSS 그라디언트를 어떤 코드로 생성해야 할지 소개합니다.
(IE, Firefox 3.6+, Safari, Chrome)


웹킷 브라우져를 위한 CSS 그라디언트
다음 코드 행들은 사파리,크롬과 같은 브라우져에서 top(#ccc)에서 bottom(#000)까지의 선형 그라디언트를 표현합니다.




Firefox 3.6+ 위한 CSS 그라디언트




Internet Explorer 위한 CSS 그라디언트
아래의 필터는 오직 IE에서만 읽어낼 수 있습니다.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');




Cross-Browser CSS Gradient (demo 데모 클릭)

위에 소개된 세 가지 소스를 모두 넣어 만든 크로스 브라우져 그라디언트 데모입니다.

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */




CSS Gradient 드롭 메뉴

다음은 순수하게 CSS만을 사용하며 제작한 드롭다운 메뉴입니다.
(shadow, radius-border, box-shadow)

(이미지를 클릭하시면 데모를 보실 수 있습니다)



인터넷 익스플로러의 한계

인터넷 익스플로러에서는 그라디언트 color-stop, gradient angle, and radial gradient를 지원하지 않습니다
그렇기 때문에 단 2 가지의 색상만으로 수평 또는 수직 그라디언트만 할 수 있단 얘기죠;

마지막으로 주의사항 한가지.

모든 브라우저가 CSS의 그라디언트를 지원하지 않습니다. 안전을 위해서는
CSS의 그라디언트의 레이아웃을 코딩에 의존하지 말고
 레이아웃을 강화에 사용해야합니다.


원문 :http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/


/*****************************************************************************************/


background: #f1c660; /* Old browsers */
background: -moz-linear-gradient(top,  #fcf1d9 0%, #f1c660 50%);
background: -webkit-gradient(linear, left 0%, left 50%, from(#fcf1d9), to(#f1c660));
background: -o-linear-gradient(top, #fcf1d9 0%, #f1c660 50%);

신고
Trackback 0 : Comment 0

CSS Background 투명도 조절 (RGBa, Filter 활용)

CSS 2011.05.19 16:38

자식에게 영향을 주지 않는 배경색상의 투명도만 조절하는 CSS Style 을 구현합니다.

.alpha60 {
    /* 0.6 투명도가 적용 된 색상 적용 */
    background: rgba(0, 0, 0, 0.6);
    /* IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

ie에서는 그라디언트 필터를 이용하는 건인데 #99000000 에서 99가 투명도를 나타낸다.
이 숫자를 구하는 방법은

Math.floor(0.6 * 255).toString(16);

위의 소스를 파이어버그 콘솔에서 돌려보자~


참조 :

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/



.alpha60 { background: rgba(0, 0, 0, 0.6) !important;
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

신고
Trackback 0 : Comment 0

대체 텍스트 안보이게 하기

CSS 2011.04.06 15:09

태그 안에 이미지를 백으로 깔고 텍스트를 올리는경우 텍스트를 안보이게 해줘야 하는데 주로 쓰는 방법은...

overflow:hidden; line-height:0; font-size:0; text-indent:-1000px;

a 태그를 block으로 만들 경우 text-indent 값 만큼 텍스트가 날라가서 박스가 늘어나기 때문에 font와 line-height 값을 적어준다.

overflow의 경우 크롬에서는 텍스트가 그냥 나와버려서 안보이게 해주는것. 만의 하나라는 가능성까지 다 없애자.


전에 표준강의를 들을때 span 태그를 하나 더 써서 텍스트를 가려주는 방법이 있었는데 이걸 권장했었다. 불필요한 태그를 하나 더 넣어주는거라 이거나 저거나 꺼려지긴 마찬가지지만....
신고
Trackback 0 : Comment 0

css3 라운드박스

CSS 2011.04.05 11:22


코너를 선택해서 라운드를 만들고 싶으면 아래처럼 ~

-moz-border-bottom-left-radius: 12px;
 -moz-border-bottom-right-radius: 12px;
  /*파이어폭스*/
  -webkit-border-bottom-left-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
  /*웹킷기반 브라우저 구글크롬 사파리*/
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  /* 오페라 10.5이상 */
  behavior: url(ie-css3.htc);
 /*IE6이상 IE-CSS3 핵사용*/

코너 전체를 라운드로 만들때는

border-radius: 12px;


물론 맨위처럼 모든 브라우저의 경우를 다 써줘야한다.


신고
Trackback 0 : Comment 0

텍스트 정렬에 관한 문제 2

CSS 2011.02.14 15:08
완벽한 해결은 아니지만...ie7 이하버전에서 해결했기에 올려본다.


<div class="userTab">    
    <ul>
     <li class="on"><span><a href="#">국회의사당</a></span></li>
     <li><span><a href="#">한국방송공사</a></span></li>
     <li><span><a href="#">여의도공원</a></span></li>
     <li><span><a href="#">증권선물거래소</a></span></li>
     <li><span><a href="#">63빌딩</a></span></li>
    </ul>
</div>

/* 공용 */
.userTab {float:left; width:32px; margin-right:3px;}
.userTab li {height:134px; padding:0 3px; text-align:center; margin-bottom:1px; background:url('../images/layout/user_tab_off.gif') no-repeat; font-size:15px; font-weight:bold;}
.userTab li a {color:#c0c8d3; cursor:pointer;}
.userTab li.on{background:url('../images/layout/user_tab_on.gif') no-repeat;}
.userTab li.on a {color:#fff;}
.userTab li span {display:table-cell; height:134px; vertical-align:middle;}

/* ie7 전용을 만들었다. ie6 도 주석처리해서 넣어주면 될듯. */

.userTab li {position:relative; margin:0; padding:0; height:133px;}
.userTab li span {position:absolute; left:2px; top:50%; width:26px; height:auto !important;}
.userTab li span a {position:relative; top:-50%;}

ie7이하버전에서 해결책은 위 빨간색. 포지션으로 해결.


위 이미지 탭 부분 텍스트가 가로세로 중앙정렬로 나오게 된다.
신고

'CSS' 카테고리의 다른 글

대체 텍스트 안보이게 하기  (0) 2011.04.06
css3 라운드박스  (0) 2011.04.05
텍스트 정렬에 관한 문제 2  (0) 2011.02.14
텍스트 세로 중앙 정렬에 관한 문제.  (0) 2011.02.14
css 텍스트 말줄임  (1) 2011.01.04
텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.04
Trackback 0 : Comment 0

텍스트 세로 중앙 정렬에 관한 문제.

CSS 2011.02.14 11:48
코딩을 하다보면 아래와 같은 상황이 꽤 빈번하게 발생한다. 이번 프로젝트에서도 당연히 나왔다. 현재 해결이 안되어 놔두고 있는데 요지를 살펴보면 W3C에서는 권장하지 않는다는 것이다. 뭐 이것도 css3에서는 관련 태그가 나온걸 보니 보강되어 진듯 하다.

이것 하나때문에 htc를 사용하는것도 내키지 않고 li 태그를 마크업 무시하고 테이블로 바꾸는것도, 빈 이미지를 삽입하는 것도 내키지 않아 방법을 고민중이긴 한데 css2로는 해결이 불가능해 보인다.

table-cell 이 ie6,7만 없다면 가장 좋은 방법인데....이걸 사용할 수 없으니 너무 답답하다. 후....

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

virtical-align 은 inline 속성을 가진 요소에만 직접 적용하여 사용할 수 있습니다. 즉, 블럭요소에는 적용되지 않습니다.
위와같이 적용하면 알파벳 d가 아닌 div 요소 자체를 수직정렬 시키는 모양이 되는데 div 는 block 속성을 가지고 있으므로 수직정렬 되지 않습니다. .page 내부의 요소를 수직정렬 시키려면 다음과 같이 하셔야 합니다.

.page * { vertical-align:middle; display:inline;} /*공용선택자를 사용해서 page 내부의 모든 요소를 inline 형태로 재정의 하였음*/

<div class="page"><img src="http://standardmag.org/images/cdk_logo.gif" width="172" height="100" /><p>Hello!</p></div>

이 때 div 요소는 수직정렬시키는데 아무런 영향을 미치지 않고 img 와 p 태그 가 서로 의존적인 형태로 수직정렬 됩니다.
img 요소의 높이가 p 보다 높기 때문에 img 요소를 기준으로 p 가 수직 정렬된 형태 입니다.
예제를 보아 알 수 있듯 엘리먼트 혼자서는 수직정렬 되지 않고 주변의 inline 요소들과 함께 어울렸을 때 주변 요소를 상대적인 기준으로 잡은 다음 자신의 수직 위치를 결정하게 됩니다.

예외적으로 td 에는 vervical-align 을 적용시켜서 내부 요소를 수직정렬 시킬 수 있습니다.
하지만 다른 요소(div 와 같은 블럭요소)에는 안됩니다.

본래 div 태그에 대하여 display:table-cell; vertical-align:middle 속성을 주면 div 요소가 td 처럼 렌더링 되기 때문에 손쉽게 수직정렬 시킬 수 있지만 이 부분은 IE6~7 모두 렌더링 되지 않는 버그가 있습니다. IE 는 display:table-cell 이라는 속성을 무시하기 때문입니다.

W3C 스펙을 가만히 살펴보면 저렇게 텍스트로 된 콘텐트를 박스모델 안에서 수직정렬 되도록 하는 것을 지원하지 않고 있습니다. 개인적인 견해로 볼 때 가능하면 그러한 방식을 사용하지 말라는 의미로 해석되기도 합니다. 한편 이미지 등의 표현요소를 배경에서 중앙정렬 시키는 것은 쉽습니다. 하지만 텍스트 콘텐트는 박스모델의 기본 속성에 따라서 최상단으로 부터 순서대로 표현되도록 하는 것이 좋겠습니다.

 

출처 : http://forum.standardmag.org/viewtopic.php?id=915

 

여기서 핵심은 * 를 붙이는 것이다.

신고

'CSS' 카테고리의 다른 글

css3 라운드박스  (0) 2011.04.05
텍스트 정렬에 관한 문제 2  (0) 2011.02.14
텍스트 세로 중앙 정렬에 관한 문제.  (0) 2011.02.14
css 텍스트 말줄임  (1) 2011.01.04
텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.04
td 안에 div height:100% 만들기  (0) 2010.12.08
Trackback 0 : Comment 0

css 텍스트 말줄임

CSS 2011.01.04 18:19


height: 높이값;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;  
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;

테이블일 경우 + table-layout : fiexd;


xml은 파폭 적용이 안되더라....말줄임이 안나옴.
신고

'CSS' 카테고리의 다른 글

텍스트 정렬에 관한 문제 2  (0) 2011.02.14
텍스트 세로 중앙 정렬에 관한 문제.  (0) 2011.02.14
css 텍스트 말줄임  (1) 2011.01.04
텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.04
td 안에 div height:100% 만들기  (0) 2010.12.08
텍스트 줄바꿈  (1) 2010.12.08
Trackback 0 : Comment 1

텍스트 줄바꿈 처리 word-break, white-space

CSS 2011.01.04 16:44
작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다.

word-break


word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.


.selector {word-break:break-all;}

위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이 그림을 보시면 단번에 이해가 가실 것 입니다.


단어의 중간에서 줄바꿈이 되는 효과입니다. 이 것의 반대 속성은 nowrap, keep-all 등을 주면 된다는데 제가 실험해본 결과 잘 안되는 것 같습니다. 그래서 이번에 같이 소개할 white-space 를 사용하시면 됩니다.

white-space


white-space는 여러가지 값이 있는데, 정리를 해보자면 이렇습니다.

inherit  말그대로 상속 받는 것
normal  일반적인 것, default
nowrap  줄바꿈을 하지 않는다
pre  <pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line  마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap  pre-line 과 비슷

말로 길게 설명해 무엇합니까? 그렇다면 눈으로 확인해 봅시다.

HTML 마크업은 다음과 같이 했습니다. 줄바꿈은 왼쪽에 보이는 라인넘버에서 알 수 있듯이 2번 하였습니다. 다시말해 단락이 3개라는 뜻 입니다. 스타일은  넓이를 400px 을 주고 사방으로 padding 을 10px 씩 주었습니다.


일반적으로 랜더링하면 단어 단위로 줄바꿈이 된 형태로 나오게 되는데 여기에서 속서을 하나씩 주면 기능을 한 눈에 알 수 있습니다.

우선 inherit 은 상속되는 것이므로 넘어가고 (IE8에는 인식을 못한다고 합니다.) normal 은 기본인데 Original 과 동일하다고 보시면 됩니다. nowrap 속성을 주게되면 줄바꿈이 되지 않습니다.


그리고 pre 속성은 <pre> 태그와 동일한 역할을 합니다. 마크업에서 줄바꿈 (앤터) 해준 것을 적용해주는 것인데요, 여기서는 두번 줄바꿈을 하였기 때문에 3 단락으로 나뉘어져 있습니다. 그리고 width 를 넘어가는 텍스틑는 줄바꿈이 되지 않습니다.


다음으로 pre-line 속성을 주게되면 pre를 준 것과 같이 마크업에서 줄바꿈 한 부분에서도 줄바꿈이 되고, width 값을 넘어가는 부분에 대하여 줄바꿈이 됩니다.


per-wrap 속성을 주면 pre-line 을 적용해준 것과 동일한 결과가 나오는데 구체적인 차이는 잘 모르겠습니다. 자세한 내용은 w3cschool 을 참조해 보시는 것이 더 좋을 듯 합니다.



출처: http://htglss.tistory.com/31
신고

'CSS' 카테고리의 다른 글

텍스트 세로 중앙 정렬에 관한 문제.  (0) 2011.02.14
css 텍스트 말줄임  (1) 2011.01.04
텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.04
td 안에 div height:100% 만들기  (0) 2010.12.08
텍스트 줄바꿈  (1) 2010.12.08
a태그 점선 없애기  (0) 2010.10.25
Trackback 0 : Comment 0

티스토리 툴바