'CSS'에 해당되는 글 34건

  1. 2010.12.08 td 안에 div height:100% 만들기
  2. 2010.12.08 텍스트 줄바꿈 (1)
  3. 2010.10.25 a태그 점선 없애기
  4. 2010.10.25 font
  5. 2010.10.18 select 안에 이미지 넣기
  6. 2010.08.04 div 정가운데 위치시키기
  7. 2010.05.11 Html에 플래시 넣기
  8. 2010.04.22 폰트 사이즈 비교
  9. 2010.04.22 CSS속성 선언 순서
  10. 2010.04.15 display: block과 inline (2)

td 안에 div height:100% 만들기

CSS 2010.12.08 15:18

감싸고 있는 엘리먼트들을 쭉 따라 올라가면서 최상위 body를 거쳐 html까지 height:100%를 만들면 된다.

html, body, table, td, div {height:100%;}

<td class="lb">
      <div class="lt"><div class="rb"><div class="rt">
       <a href="#" id="date">1</a> 
       <span>내용등록2010-12-082010-12-082010-12-082010-12-082010-12-08</span>
      </div></div></div>
 </td>


ㅋㅋㅋㅋㅋㅋ 익스 안되네 .-ㅅ- ie6은 완전 틀어져 ㅋㅋㅋ
신고

'CSS' 카테고리의 다른 글

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
font  (0) 2010.10.25
Trackback 0 : Comment 0

텍스트 줄바꿈

CSS 2010.12.08 14:39


1번과 2번은 특수문자의 종류에 따라서 결과가 다를 수도 있으니 주의하세요~


 

1. 아무 처리도 하지 않았을 경우,
IE - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.
(단 특수문자의 종류에 따라서 줄바꿈이 되는 것도 있습니다. 예를 들어 %는 줄바꿈이 됩니다.)
 

FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.

 

2. word-break:break-all
IE - 숫자, 특수문자, 영문, 한글 모두 강제 줄바꿈됨
(단, 특수문자의 종류에 따라서 줄바꿈이 되지 않는 것도 있으니 주의해야함)
 

FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.

 

3. word-break:keep-all
IE – 영문,숫자,특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 단어 단위로 줄바꿈 됨.


FF – 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 강제 줄바꿈 됨.

 

4. word-wrap:break-word
IE - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨.


FF - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨.

 

5. word-break:keep-all; word-wrap:break-word
IE – 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문/한글 단어 단위로 줄바꿈 됨,
 

FF - 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문 단어 단위로 줄바꿈 됨, 한글 강제 줄바꿈 됨.

원본 출처:
http://butygal.blog.me/50089735557

신고

'CSS' 카테고리의 다른 글

텍스트 줄바꿈 처리 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
font  (0) 2010.10.25
select 안에 이미지 넣기  (0) 2010.10.18
Trackback 0 : Comment 1

a태그 점선 없애기

CSS 2010.10.25 13:17

!!! 아래의 글에서 소개하는 방식은 남용될 경우 브라우저가 무지하게 느려진다. !!!

CSS Expression
이 나왔으니 당연히 IE 에만 해당되는 내용이다. 망할 IE 는 outline 스타일속성이 지원이 되지 않기 때문에 굳이 이런 hack 을 써야 하니 좀 짜증날 노릇이다. 

링크나 버튼등에 나타나는 접근성을 위한 점선표시는 사실 보기에는 그리 좋지 않다. 국내 포털들은 그냥 두고 있지만 그래도 명색이 개발자인지라 보기싫은게 있으면 당장 제거하고자 하는 욕구가 마구 솟는다.

그래서 많은 곳에서 점선을 없애는 여러가지 방법을 사용하는데. 이번 포스팅에서는 그간에 나온 방법의 단점을 보완해 보고자 하는 차원에서 잠깐 끄적거리다 만든 코드를 소개한다.

일단 IE 가 아닌 정상적인(?) 브라우저라면 아래의 스타일로 제거가 가능하다.

a, input { outline:none; }      ie8/그외 타 브라우저 제거 가능

하지만 IE 에서는 보통 아래와 같은 hack 을 쓴다.

onfocus="this.blur();"

그런데 이건 솔직히 요즘같은 세상에 누가 일일이 넣어 주고있겠는가? 당장 욕이 나올 지경이다. 그래서 나온 hack 이 IE 에서만 통용되는 Expression 을 사용한 방법이다.

a, input { selector-dummy:expression(this.hideFocus = true); }

보통 위와 같은 식으로 쓰는데 다들 selector-dummy 라는게 특별한 속성인줄 알더라. 특별한 속성아니니 이름은 맘대로 지어도 상관없다. 즉 아래와 같은 방식도 가능하다는 말삼.

a, input { z:expression(this.hideFocus = true); }

그런데! 문제는 expression 을 사용할 경우 실시간으로 속성값이 평가 되기 때문에 브라우저에 알게 모르게 부하가 간다. 위와 같은 식으로 사용했을때 화면상에서 마우스만 슬쩍 움직여도 몇백번씩 expression 이 실행된다. 아~ 이런 끔찍한 일이.... 그러면 어떻해야 하나?

본인이 끄적거리면서 고민하던 것들은 다 집어치우고 결론 부터 말하면, expression 이 수행되고 나면 제거하 는 것이다. 켈켈켈.. 어쩌면 당연한 소린데 그렇게 하는 사람은 별로 못본것 같다. 점선을 없애는 코드는 사실상 한번만 수행되면 되는 코드라는데 핵심이 있다. 그러면 어떻게 없애야 하나? 일부에서는 CSS 로딩후 cssText 파싱해서 처리하는 방법도 본적이 있으나, 굳이 그럴 필요는 없다. 쉬운길로 가자.

일단 더미 속성을 사용하는 경우 expression 의 제거가 정상적으로 되지 않기 때문에 실제 있는 속성을 사용해야 한다. 그러면 a 태그와 input 태그의 수많은 CSS 속성중에 안쓰는 놈 하나만 골라서 그놈을 쓰도록 하자. 예를 들어 word-wrap 같은걸 쓰면 좋다. 그 놈에다가 expression 을 넣는데 그 expression 이 하는 기능은 일단 hideFocus 를 해주고, word-wrap 의 값을 덮어 써서 expression 을 제거하는 것이다. 아래와 같은 식이다.

a, input {
    word-wrap:expression( this.style.wordWrap="normal",this.hideFocus=true);
}


행여나 expression 을 쓰면서 찜찜한 기분이 들던 사람이 있다면 위와 같은 방법을 쓰면 좀 기분이 깔끔해 지시리라.

신고

'CSS' 카테고리의 다른 글

td 안에 div height:100% 만들기  (0) 2010.12.08
텍스트 줄바꿈  (1) 2010.12.08
a태그 점선 없애기  (0) 2010.10.25
font  (0) 2010.10.25
select 안에 이미지 넣기  (0) 2010.10.18
div 정가운데 위치시키기  (0) 2010.08.04
Trackback 0 : Comment 0

font

CSS 2010.10.25 13:15
기준 :  1em = 16px = 12pt

font-weight : 400 = normal / 700 = bold 


font 스타일
그동안 border 같은 것만 여러 관련 스타일을 묶어 쓰는 방법은 자주 사용하고 있었는데
font 같은 경우는 잘 안 썼다 (그리고 line-height 까지 지정할 수 있다는건 첨 알았다)

font-style: italic;
font-variant: small-caps;
font-weight
: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font: italic small-caps bold 12pt/14pt helvetica;

출처:http://www.hooriza.com/772
신고

'CSS' 카테고리의 다른 글

텍스트 줄바꿈  (1) 2010.12.08
a태그 점선 없애기  (0) 2010.10.25
font  (0) 2010.10.25
select 안에 이미지 넣기  (0) 2010.10.18
div 정가운데 위치시키기  (0) 2010.08.04
Html에 플래시 넣기  (0) 2010.05.11
Trackback 0 : Comment 0

select 안에 이미지 넣기

CSS 2010.10.18 11:27

신고

'CSS' 카테고리의 다른 글

a태그 점선 없애기  (0) 2010.10.25
font  (0) 2010.10.25
select 안에 이미지 넣기  (0) 2010.10.18
div 정가운데 위치시키기  (0) 2010.08.04
Html에 플래시 넣기  (0) 2010.05.11
폰트 사이즈 비교  (0) 2010.04.22
Trackback 0 : Comment 0

div 정가운데 위치시키기

CSS 2010.08.04 14:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
</head>
<style type="text/css">
*{margin:0; padding:0;}
html, body{hegith:100%;}
.center{position:absolute; top:50%; left:50%; height: 600px; overflow: hidden; margin-top: -300px; margin-left: -400px;}
</style>
<body>
<div class="center">
<img src="../../All Users/Documents/My Pictures/그림 샘플/수련.jpg" width="800" height="600" />
</div>
</body>
</html>
신고

'CSS' 카테고리의 다른 글

font  (0) 2010.10.25
select 안에 이미지 넣기  (0) 2010.10.18
div 정가운데 위치시키기  (0) 2010.08.04
Html에 플래시 넣기  (0) 2010.05.11
폰트 사이즈 비교  (0) 2010.04.22
CSS속성 선언 순서  (0) 2010.04.22
Trackback 0 : Comment 0

Html에 플래시 넣기

CSS 2010.05.11 10:26

플래시를 넣을 때에 예전에는 테두리가 생기는 것 때문에 스크립트를 사용하여 넣었었다. 하지만 이제는 object 를 사용하여서 넣으면 테두리가 생기지 않고 나온다.

<object type="application/x-shockwave-flash" data="미디어 파일 주소" width="미디어 파일 넓이" height="미디어 파일 높이">
<param name="movie" value="미디어 파일 주소" />
<param name='wmode' value='transparent' />
<param name='allowScriptAccess' value='always' />
</object>


이렇게 넣으면 자바스크립트를 사용하지 않고서도 플래시를 문서에 넣을 수 있다. 

신고

'CSS' 카테고리의 다른 글

select 안에 이미지 넣기  (0) 2010.10.18
div 정가운데 위치시키기  (0) 2010.08.04
Html에 플래시 넣기  (0) 2010.05.11
폰트 사이즈 비교  (0) 2010.04.22
CSS속성 선언 순서  (0) 2010.04.22
display: block과 inline  (2) 2010.04.15
Trackback 0 : Comment 0

폰트 사이즈 비교

CSS 2010.04.22 15:47

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%



신고

'CSS' 카테고리의 다른 글

div 정가운데 위치시키기  (0) 2010.08.04
Html에 플래시 넣기  (0) 2010.05.11
폰트 사이즈 비교  (0) 2010.04.22
CSS속성 선언 순서  (0) 2010.04.22
display: block과 inline  (2) 2010.04.15
제목이나 디자인적 요소를 감출시..  (0) 2010.04.14
Trackback 0 : Comment 0

CSS속성 선언 순서

CSS 2010.04.22 10:53

NHN CSS가이드에 나오는 CSS속성 선언 순서.. 
 

그 쓰임새가 레이아웃과 관련이 높은 것으로 부터 시작하여
레이아웃과 무관한 것 순으로 아래와 같이 선언 합니다.
이 순서는 화면의 렌더링 효율보다는 유지보수의 이점 때문에 제안되었으며
권장하는 수준 입니다.
아래 제시된 속성들과 짝을 이루는 관련 속성들은 etc로 분류하여
따로 기술하지 않고 되도록 함께 기술합니다.
예를 들면 position 속성과 left, right , top, bottom 속성은
서로 연관된 속성이므로 etc로 분류하지 않고 position 다음에 기술합니다.


1. display : 표시
2. float : 흐름
3. position : 위치
4. width & height : 크기
5. margin & padding : 간격
6. border : 보더
7. font : 폰트
8. background : 배경
9. etc : 기타

[출처] CSS 속성 선언 순서|작성자 들개


신고

'CSS' 카테고리의 다른 글

Html에 플래시 넣기  (0) 2010.05.11
폰트 사이즈 비교  (0) 2010.04.22
CSS속성 선언 순서  (0) 2010.04.22
display: block과 inline  (2) 2010.04.15
제목이나 디자인적 요소를 감출시..  (0) 2010.04.14
텍스트에 의한 테이블 늘어남 방지  (0) 2010.04.08
Trackback 0 : Comment 0

display: block과 inline

CSS 2010.04.15 13:11

아래 태그는


<div>div1</div>
<div>dIv2</div>
<div>div3</div>


웹 브라우저에 아래와 같이 표시된다.


반면에 아래 태그는


<span>span1</span>
<span>span2</span>
<span>span3</span>


웹 브라우저에 아래와 같이 표시된다.

 

이 둘 사이에 나타나는 가장 큰 차이는 줄 바꿈 여부이다. div 태그는 줄바꿈되고, span 태그는 줄바꿈되지 않는다.

div 태그가 줄바꿈되는 이유는 CSS display 속성 기본 값이 block이기 때문이고, span 태그가 줄바꿈되지 않는 이유는 CSS display 속성 기본 값이 inline이기 때문이다.


아래처럼 반대로 설정하면


div {
  display: inline;
}

span {
  display: block;
}


웹 브라우저에 아래와 같이 표시된다.

 

block과 inline의 차이점은 줄바꿈만은 아니다.

  • block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
  • block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
  • block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.


출처: 딤돌 - 지구에 거꾸로 매달리기



추가
inline 속성은 li 등에  이미지를 넣어 돌릴경우 빈 여백이 생긴다. 이것때문에 평소 이 태그를 자주 쓰지 않았었는데 float 속성은 div 높이값을 인식하지 못하기 때문에 해결 방안을 적어놓는다.

이미지 자체에 vertical-align:top; 을 먹이면 빈 여백이 사라지고 ie6, 7 에서도 같은 사이즈의 결과물을 얻을 수 있다.

 

신고

'CSS' 카테고리의 다른 글

폰트 사이즈 비교  (0) 2010.04.22
CSS속성 선언 순서  (0) 2010.04.22
display: block과 inline  (2) 2010.04.15
제목이나 디자인적 요소를 감출시..  (0) 2010.04.14
텍스트에 의한 테이블 늘어남 방지  (0) 2010.04.08
font 와 background 대표속성  (0) 2010.04.06
Trackback 0 : Comments 2

티스토리 툴바