영문 줄바꿈이 자동으로 안되서 width 밖으로 나갈때..

2010. 4. 12. 14:57 from HTML/CSS
 영문을 개념없이 ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
이렇게 쭉~~ 붙여서 치면 width 밖으로 삐져나가게 되는데

style="text-overflow: clip; overflow: hidden; word-break: break-all;";

넣어주면 IE6 7 8, FF 에서 모두 문제없이 줄바꿈 됨.
 word-break: break-all; 은 비표준 태그라고 하는데..
IE에서 다른방법은 모르겠으니 일단 패스..;
Posted by 알 수 없는 사용자 :

IE6에서 max-height 적용

2009. 3. 12. 17:06 from HTML/CSS
저작자표시 비영리 동일조건
Posted by 윤재현 :

HTML과 자바스크립트에서 스타일시트 속성

2009. 3. 6. 11:08 from HTML/CSS
HTML과 자바스크립트에서 스타일시트 속성

BACKROUND(배경)
속    성   명
속   성   값
내      용
css
jsss
background
background
background-color
background-images
background-repeat
background-attachment
background-position
웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정할수 있다.
background-attachment
 backgroundAttachment
scroll
fixed
배경그림을 고정 또는 스크롤
background-color
backgroundColor
color_RGB
color_NAME
rgb(red,green,blue)
transparent
배경 색상 및 배경색의 투명성 설정
background-image
 backgroundImage
url(url)
none
배경그림 설정
background-position
 backgroundPosition

backgroundPositionX

backgroundPositionY
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
배경그림의 위치를 설정하며
백분율을 표시할 때는 숫자와 %를 사용하고 절대위치는 숫자로 표시한다.
background-repeat
 backgroundRepeat
repeat
repeat-x
repeat-y
no-repeat
배경그림이 화면보다 작을 경우 반복해서 보여줄지 여부를 설정

TEXT(글자)
속    성   명
속   성   값
내      용
css
jsss
color
color
color_RGB
color_NAME
rgb(red,green,blue)
글자 색을 설정
direction
 direction
ltr
rtl
글자를 표시하는 방향설정
letter-spacing
 letterSpacing
normal
lengthpx
글자 사이의 간격을 지정 하며 픽셀은
숫자 다음에 px로 표시
text-align
 textAlign
left
right
center
justify
글자의 정렬을 설정
text-decoration
 textDecoration
none
underline
overline
line-through
blink
글자의 꾸밈 및 형식 설정
text-indent
 textIndent
lengthpx
%
좌측 여백을 백분율 또는 픽셀값으로 설정
text-transform
 textTransform
none
capitalize
uppercase
lowercase
글자의 대.소문자 변환 여부를 설정
word-spacing
 whiteSpace
none
lengthpx
단어 사이의 간격을 설정

FONT(글꼴)
속    성   명
속   성   값
내      용
css
jsss
font
font
font-style
font-variant
font-weight
font-size
line-height
font-family
caption
icon
menu
글꼴에 관련된 속성을 설정하며 line-height 값은
줄과 줄 사이의 간격을 백분율로 표시하고 각각의 요소 값은
콤마없이 두 개 이상 설정할 수 있다.
font-family
 fontFamily
family-name
generic-family
글꼴이름을 설정 우선순위에 따라 두 개이상 콤마로
연결할수 있다.
font-size
 fontSize
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
lengthpx
%
글자 크기를 설정
font-style
 fontStyle
normal
italic
글자의 형태를 설정
font-variant
 fontVariant
normal
small-caps
글자의 크기를 설정
font-weight
fontWeight
normal
bold
bloder
lighter
100
200
.....
800
900
글자의 두께를 설정

BORDER(경계선)
속    성   명
속   성   값
내      용
css
jsss
border
border
border-width
border-style
border-color
경계선의 너비, 형식, 색을 설정
두 개이상 설정 가능
border-bottom
 borderBottom
border-bottom-width
border-style
border-color
아래 경계선의 너비, 형식, 색을 설정
두 개이상 설정 가능
border-bottom-color
 borderBottomColor
border-color
아래 경계선의 색을 설정
border-bottom-style
 borderBottomStyle
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
아래 경계선의 형식을 설정
border-bottom-width
 borderBottomWidth
thin
medium
thick
lengthpx
아래 경계선의 두께를 설정
border-color
 borderColor
color
콤마없이 두 개이상의 값을 설정가능
border-left
 borderLeft
border-left-width
border-style
border-color
왼쪽 경계선의 너비, 형식, 색을 지정
두 개이상의 값을 설정가능
border-left-color
 borderLeftColor
border-color
왼쪽 경계선의 색을 설정
border-left-style
 borderLeftStyle
border-style
왼쪽 경계선의 형식을 설정
border-left-width
 borderLeftWidth
width
왼쪽 경계선의 두께를 설정
border-right
 borderRight
border-right-width
border-style
border-color
오른쪽 경계선의 너비, 형식, 색을 지정
두 개이상의 값을 설정가능
border-right-color
 borderRightColor
border-color
오른쪽 경계선의 색을 설정
border-right-style
 borderRightStyle
border-style
오른쪽 경계선의 형식을 설정
border-right-width
 borderRightWidth
width
오른쪽 경계선의 두께를 설정
border-style
 borderStyle
style
경계선의 형식을 설정
border-top
borderTop
border-top-width
border-style
border-color
위쪽 경계선의 너비, 형식, 색을 지정
두 개이상의 값을 설정가능
border-top-color
borderTopColor
border-color
위쪽 경계선의 색을 설정
border-top-style
borderTopStyle
border-style
위쪽 경계선의 형식을 설정
border-top-width
borderTopWidth
width
위쪽 경계선의 두께를 설정
border-width
borderWidth
width
경계선의 두께를 설정

MARGIN(여백)
속    성   명
속   성   값
내      용
css
jsss
margin
margin
margin-top
margin-right
margin-bottom
margin-left
여백의 속성을 설정
margin-bottom
marginBottom
auto
lengthpx
%
아래의 여백을 설정
margin-left
marginLeft
auto
lengthpx
%
왼쪽의 여백을 설정
margin-right
marginRight
auto
lengthpx
%
오른쪽의 여백을 설정
margin-top
marginTop
auto
lengthpx
%
위쪽의 여백을 설정

PADDING(경계선과 내용과의간격)
속    성   명
속   성   값
내      용
css
jsss
padding
padding
padding-top
padding-right
padding-bottom
padding-left
상,하,좌,우의 경계선과 글자 사이의 간격을 설정
padding-bottom
paddingBottom
lengthpx
%
아래 경계선과 글자 사이의 간격을 설정
padding-left
paddingLeft
lengthpx
%
왼쪽 경계선과 글자 사이의 간격을 설정
padding-right
paddingRight
lengthpx
%
오른쪽 경계선과 글자 사이의 간격을 설정
padding-top
paddingTop
lengthpx
%
위쪽 경계선과 글자 사이의 간격을 설정

LIST(목록)
속    성   명
속   성   값
내      용
css
jsss
list-style
list-style
list-style-type
list-style-position
list-style-image
목록의 형식,위치,그림의 속성을 설정
list-style-image
listStyleImage
none
url(url)
목록의 표시를 그림으로 설정
list-style-position
listStylePosition
inside
outside
목록 항목의 위치를 설정
list-style-type
listStyleType
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
lower-alpha
upper-roman
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
목록의 항목 표시자의 속성을 설정

DIMENSION(영역)
속    성   명
속   성   값
내      용
css
jsss
height
height
auto
legthpx
%
영역의 높이를 설정
line-height
lineHeight
auto
legthpx
%
영역의 줄 간격을 설정
width
width
auto
legthpx
%
영역의 너비를 설정

CLASSIFICATION(식별)
속    성   명
속   성   값
내      용
css
jsss
cursor
cursor
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
커서의 모양을 설정
float
float
left
right
none
해당요소를 상위 요소안에서 좌.우로 이동할 것인가를 설정
position
position
static
relative
absolute
화면에 표시할 위치를 설정
visibility
visibility
visible
hidden
화면에 표시 여부를 설정

POSITION(위치)
속    성   명
속   성   값
내      용
css
jsss
bottom
bottom
auto
legthpx
%
상위의 요소 아래 경계선에서 떨어진 간격을 설정
clip
clip
rect(top,right,bottom,left)
auto
  
Posted by 알 수 없는 사용자 :

iframe에 parent의 png배경을 적용하고 싶을때

2009. 2. 26. 18:17 from HTML/CSS
iframe속 파일 소스내에
프레임 내부에는 백그라운드를 제거하는 스타일 추가
<style type="text/css">
  html {bakcground:none transparent;}
  body {background:none transparent;}
</style>

parent 페이지에서는 인라인프레임의 투명도를 허용해주도록 allowTransparency를 추가
<iframe allowTransparency = "true">코드 추가

저작자표시 비영리 동일조건
Posted by 윤재현 :

티스토리툴바