'팁&테크/HTML & Bootstrap'에 해당되는 글 8건

  1. 2020.06.26 [Bootstrap] Grid 의 vertical-align
  2. 2016.02.19 html 코딩 float 로 가로 3등분
  3. 2014.03.25 [메모]html을 excel로 저장할때 한셀에 여러라인으로 내용 넣을 경우
  4. 2013.10.15 X-UA-Compatible
  5. 2011.06.28 CSS 팁 모음
  6. 2007.06.29 폼에서 urlencode 해서 보내기
  7. 2007.06.29 스타일 시트
  8. 2007.06.29 HTML 칼라 코드
2020. 6. 26. 10:00

[Bootstrap] Grid 의 vertical-align

<!--- vertical-align for row --->
<div class="container">
<div class="row align-items-center">
<div class="col-12 text-center">Content</div>
</div>
</div>

<!--- vertical-align for column --->
<div class="container">
<div class="row">
<div class="col-12 align-self-center text-center">Content</div>
</div>
</div>

<!--- vertical-align for column --->
<div class="container">
<div class="row">
<div class="col-12 my-auto text-center">Content</div>
</div>
</div>


2016. 2. 19. 11:00

html 코딩 float 로 가로 3등분

가뭄에 콩나듯 html 코딩을 하니 자꾸 까먹어서 남겨둠


float를 사용해서 가로 3등분하는 법

<style type="text/css"> #container{width:100%;*zoom:1;text-align:center;} #container:after {content:" "; display:block; clear:both;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;display:inline-block;} </style> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div>


2014. 3. 25. 11:30

[메모]html을 excel로 저장할때 한셀에 여러라인으로 내용 넣을 경우

php에서 가끔 내용은 html table로 해서 확장자만 xls로 바꿔서 엑셀 다운로드 하는 경우가 있다.


개인적으로는 비추인 방식이지만 혹시나 해서 메모 해둠


한셀에 여러라인을 넣을려고 할 경우 <td>내용<br>내용</td> 으로 할 경우 


두개의 셀로 나누어져 저장된다.


한셀로 저장하려고 할 경우 


<style> 

br {mso-data-placement:same-cell;} 

</style> 


br 태그에 속성을 부가하면 한셀에 여러라인으로 표시가 된다.

2013. 10. 15. 10:20

X-UA-Compatible

마크업에서 호환성 모드 조정

X-UA-Compatible 을 통해 브라우저의 호환성 모드를 조정할 수 있습니다만

<!DOCTYPE html> 
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edge 는 설치된 IE 중 가장 최신 버전을 렌더링에 사용하라
  • chrome=1 는 크롬이 설치되어있다면 IE 에서도 크롬 렌더링을 사용하라

안타깝게도 <!doctype html> HTML5 DTD 선언시에는 메타태그에 X-UA-Compatible 을 사용하면 w3c validator 에서 HTML5 DTD 는 X-UA-Compatible 속성이 없다는 오류를 냅니다.


그냥 무시하고 사용할 수도 있지만 'ㅅ'; 
더 좋은 방법으로 서버단에서 X-UA-Compatible 값을 응답 헤더에 포함할 수 있습니다.

서버단에서 설정

Apache 에서 설정

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>
<IfModule mod_headers.c>
  Header append Vary User-Agent
</IfModule>

Nginx 설정

server {
  #...
  add_header X-UA-Compatible "IE=Edge,chrome=1";
}

IIS 7.0이상 설정

<configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

서버단에서 설정을 하게 되면 메타태그로 X-UA-compatible 을 넣지 않아도 됩니다.

2011. 6. 28. 15:39

CSS 팁 모음

앞으로 여기에 간단한 CSS관련 팁을 계속 추가할 예정임

- LI 사이에 공백이 있을 경우(이미지 나열 시 오른쪽에 빈공백)
   -> LI의 왼쪽 공백을 -4px를 준다. 예) LI {margin : 0 0 0 -4px;}
       상위 UL,OL 에는 반대로 margin : 0 0 0 4px; 를 줘야 왼쪽으로 쏠리지 않음 
 

- float 의 가상 선택자를 이용한 clear
   -> FLOAT를사용한오브젝트:after {content:""; display:block; clear:both; } 

- object 중앙 정렬
   -> 좌우마진을 auto로 하면 중앙에 위치, 반드시 width값이 있어야 함 예) margin : 0 auto; 













 
2007. 6. 29. 15:47

폼에서 urlencode 해서 보내기

<form name="frm1" action="text.php" enctype="application/x-www-form-urlencode">
2007. 6. 29. 15:46

스타일 시트

style script
@charset{rules} 없슴
⇒ 외부 스타일쉬트에 글자세트를 설정한다.
@font-face{rules} 없슴
⇒ HTML 문서에 깔리는 글꼴(font)을 설정한다.
@import{rules} 없슴
⇒ 외부 스타일쉬트를 도입한다.
@media{rules} 없슴
⇒ 메이어 형식을 설정한다.
@page{rules} 없슴
⇒ 인쇄 박스에 크기, 정렬(orientation), 마진들을 설정한다.
:active{rules} 없슴
⇒ a 엘레멘트의 연결이 되거나 활성화 되었을 때의 스타일을 설정한다.
:first-letter{rules} 없슴
⇒ 개체의 첫번째 글자에 적용된다.
:first-line{rules} 없슴
⇒ 개체의 첫번째 줄에 적용된다.

:hover{rules} 없슴
⇒ a 엘레멘트의 연결에 마우스가 올라갔을 때의 스타일을 설정한다.
:link{rules} 없슴
⇒ a 엘레멘트의 연결의 스타일을 설정한다.
:visited{rules} 없슴
⇒ a 엘레멘트의 방문했던 연결의 스타일을 설정한다.
{accelerator:val} obj.style.accelerator[=val]
⇒ 개체가 단축키를 가지고 있는가를 부울값으로 반환하거나 설정한다.
{background:val} obj.style.background[=val]
⇒ 개체의 배경 속성들을 5개까지 반환하거나 설정한다.
{background-attachment:val} obj.style.backgroundAttachment[=val]
⇒ 문서 속의 배경 이미지를 개체에 배열 방식을 반환하거나 설정한다.
{background-color:val} obj.style.backgroundColor[=val]
⇒ 개체의 배경에 깔리는 색상을 반환하거나 설정한다.
{background-image:val} obj.style.backgroundImage[=val]
⇒ 개체의 배경 이미지를 반환하거나 설정한다 .
{background-position:val} obj.style.backgroundPosition[=val]
⇒ 개체의 배경 이미지의 위치를 반환하거나 설정한다.
{background-position-x:val} obj.style.backgroundPositionX[=val]
⇒ backgroundPosition 속성의 x 좌표를 반환하거나 설정한다.
{background-position-y:val} obj.style.backgroundPositionY[=val]
⇒ backgroundPosition 속성의 y 좌표를 반환하거나 설정한다.
{background-repeat:val} obj.style.backgroundRepeat[=val]
⇒ 개체 backgroundImage 속성의 반복 방식을 반환하거나 설정한다.
{behavior:val} obj.style.behavior[=val]
⇒ DHTML behavior의 소개 위치를 반환하거나 설정한다.
{border:val} obj.style.border[=val]
⇒ 개체의 테두리 속성들을 일괄적으로 반환하거나 설정한다.
{border-bottom:val} obj.style.borderBottom[=val]
⇒ 개체의 아래쪽 테두리 속성들을 반환하거나 설정한다.
{border-bottom-color:val} obj.style.borderBottomColor[=val]
⇒ 개체의 아래쪽 테두리의 색상을 반환하거나 설정한다.
{border-bottom-style:val} obj.style.borderBottomStyle[=val]
⇒ 개체의 아래쪽 테두리 형태를 반환하거나 설정한다.
{border-bottom-width:val} obj.style.borderBottomWidth[=val]
⇒ 개체의 아래쪽 테두리의 두께를 반환하거나 설정한다.
{border-collapse:val} obj.style.borderCollapse[=val]
⇒ 테이블의 줄(row)과 칸(cell)의 태두리(border)의 붕괘 여부를 반환하거나 설정한다.
{border-color:val} obj.style.borderColor[=val]
⇒ 개체의 테두리 색상들을 반환하거나 설정한다.
{border-left:val} obj.style.borderLeft[=val]
⇒ 개체 왼쪽 테두리의 속성들을 반환하거나 설정한다.
{border-left-color:val} obj.style.borderLeftColor[=val]
⇒ 개체 왼쪽 테두리의 색상을 반환하거나 설정한다.
{border-left-style:val} obj.style.borderLeftStyle[=val]
⇒ 개체 왼쪽 테두리의 형태를 반환하거나 설정한다.
{border-left-width:val} obj.style.borderLeftWidth[=val]
⇒개체 왼쪽 테두리의 두께를 반환하거나 설정한다.
{border-right:val} obj.style.borderRight[=val]
⇒ 개체 오른쪽 테두리의 속성들을 반환하거나 설정한다.
{border-right-color:val} obj.style.borderRightColor[=val]
⇒ 개체 오른쪽 테두리의 색상을 반환하거나 설정한다.
{border-right-style:val} obj.style.borderRightStyle[=val]
⇒ 개체 오른쪽 테두리의 형태를 반환하거나 설정한다.
{border-right-width:val} obj.style.borderRightWidth[=val]
⇒ 개체 오른쪽 테두리의 두께를 반환하거나 설정한다.
{border-style:val} obj.style.borderStyle[=val]
⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리들의 형태를 일괄적으로 반환하거나 설정한다.
{border-top:val} obj.style.borderTop[=val]
⇒ 개체 위쪽 테두리의 속성들을 반환하거나 설정한다.
{border-top-color:val} obj.style.borderTopColor[=val]
⇒ 개체 위쪽 테두리의 색상을 반환하거나 설정한다.
{border-top-style:val} obj.style.borderTopStyle[=val]
⇒ 개체 위쪽 테두리의 형태를 반환하거나 설정한다.
{border-top-width:val} obj.style.borderTopWidth[=val]
⇒ 개체 위쪽 테두리의 두께를 반환하거나 설정한다.
{border-width:val} obj.style.borderWidth[=val]
⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리들의 두께를 일괄적으로 반환하거나 설정한다.
{bottom:val} obj.style.bottom[=val]
⇒ 문서의 계통도에서 다음에 위치된 개체의 아래쪽에 상대적인 개체의 아래쪽 위치를 반환하거나 설정한다.
{clear:val} obj.style.clear[=val]
⇒ 개체가 왼쪽, 오른쪽 혹은 양쪽으로의 유동하여 다음 텍스트가 유동개체 뒤에 나타나는가를 반환하거나 설정한다.
{clip:val} obj.style.clip[=val]
⇒ 개체의 어느 부분이 보일 것인가를 반환하거나 설정한다.
{clipBottom:val} obj.style.clipBottom[=val]
⇒ 잘라낸 지역의 개체 아래쪽 좌표를 픽셀단위로 반환한다.
{clipLeft:val} obj.style.clipLeft[=val]
⇒ 잘라낸 지역의 개체 왼쪽 좌표를 픽셀단위로 반환한다.
{clipRight:val} obj.style.clipRight[=val]
⇒ 잘라낸 지역의 개체 오른쪽 좌표를 픽셀단위로 반환한다.
{clipTop:val} obj.style.clipTop[=val]
⇒ 잘라낸 지역의 개체 위쪽 좌표를 픽셀단위로 반환한다.
{color:val} obj.style.color[=val]
⇒ 개체의 글자 색상을 반환하거나 설정한다.
{cp--cell-height:val} obj.style.cpCellHeight[=val]
⇒ colorpick 비헤이버의 의하여 디스플레이되는 개별 색상의 높이를 반환하거나 설정한다.
{cp--cell-width:val} obj.style.cpCellWidtht[=val]
⇒ colorpick 비헤이버의 의하여 디스플레이되는 개별 색상의 너비를 반환하거나 설정한다.
{cp--grid-height:val} obj.style.cpGridHeight[=val]
⇒ colorpick 비헤이버의 의하여 디스플레이되는 높이를 반환하거나 설정한다.
{cp--grid-size:val} obj.style.cpGridSize[=val]
⇒ colorpick 비헤이버의 의하여 디스플레이되는 색상의 갯수를 반환하거나 설정한다.
{cp--grid-style:val} obj.style.cpGridStyle[=val]
⇒ colorpick 비헤이버의 개별 색상 주위에 그려지는 속성들의 값을 반환하거나 설정한다.
{cp--grid-width:val} obj.style.cpGridWidth[=val]
⇒ colorpick 비헤이버의 의하여 디스플레이되는 너비를 반환하거나 설정한다.
{cp--hover-style:val} obj.style.cpHoverStyle[=val]
⇒ 마우스 커서가 올라걌을 때 colorpick 비헤이버의 특정 색상에 그려지는 속성들의 값을 반환하거나 설정한다.
{cp--selected-style:val} obj.style.cpSelectedStyle[=val]
⇒ colorpick 비헤이버의 특정 색상을 선택했을 때 그려지는 속성들의 값을 반환하거나 설정한다.
{cssText:val} obj.style.cssText[=val]
⇒ 스타일 명령(rule)을 반환하거나 설정한다.
{cursor:val} obj.style.cursor[=val]
⇒ 개체위에서 마우스 포인터의 보이는 형태를 반환하거나 설정한다.
{direction:val} obj.style.direction[=val]
⇒ 개체의 읽는 순서를 반환하거나 설정한다.
{display:val} obj.style.display[=val]
⇒ 개체를 디스플레이할 것인가를 반환하거나 설정한다.
{filter:val} obj.style.filter[=val]
⇒ 개체에 적용되는 필터들의 컬렉션(filters)을 반환하거나 설정한다.
{float:val} obj.style.float[=val]
⇒ 개체가 어떻게 유동되는가를 반환하거나 설정한다.
{font:val} obj.style.font[=val]
⇒ 개체의 font 속성들 조합하여 반환하거나 설정하거나, 사용자 선호 글꼴들을 6개까지 반환하거나 설정한다.
{font-family:val} obj.style.fontFamily[=val]
⇒ 사용한 글꼴의 이름들을 반환하거나 설정한다.
{font-size:val} obj.style.fontSize[=val]
⇒ 개체 텍스트에서 사용한 글꼴의 크기를 나타내는 수치를 반환하거나 설정한다.
{font-style:val} obj.style.fontStyle[=val]
⇒ 개체의 글꼴 형태을 italic, normal, oblique등으로 반환하거나 설정한다.
{font-variant:val} obj.style.fontVariant[=val]
⇒ 개체의 문자를 작은 대문자들로 변형할 것인가를 반환하거나 설정한다.
{font-weight:val} obj.style.fontWeight[=val]
⇒ 개체의 글꼴 두께를 반환하거나 설정한다.
없슴 obj.style.hasLayout
⇒ 개체가 레이아웃(layout)을 가지고 있는가를 부울값으로 반환한다.
{height:val} obj.style.height[=sval]
⇒ 개체의 높이를 반환하거나 설정한다.
{imeMode:val} obj.style.imeMode[=val]
⇒ IME(Input Method Editor)의 상태를 반환하거나 설정한다.
{!important} 없슴
⇒ 특정 스타일 명령(rule)의 비중이나 중요성을 증가시킨다.
{layout-flow:val} obj.style.layoutFlow[=val]
⇒ 개체에서 내용의 흐름과 방향을 반환하거나 설정한다.
{layout-grid:val} obj.style.layoutGrid[=val]
⇒ 문자들의 레이아웃을 지정하는 문서 그리드(grid) 속성들을 일괄적으로 반환하거나 설정한다.
{layout-grid-char:val} obj.style.layoutGridChar[=val]
⇒ 엘레멘트듸 내용 문자를 표현하기 위하여 사용된 글자 그리드의 크기를 반환하거나 설정한다.
{layout-grid-line:val} obj.style.layoutGridLine[=val]
⇒ 엘레멘트듸 내용 문자를 표현하기 위하여 사용된 글자 그리드 줄 값을 반환하거나 설정한다.
{layout-grid-mode:val} obj.style.layoutGridMode[=val]
⇒ 텍스트 레이아웃 그리드에 가로, 세로가 사용되었는가를 반환하거나 설정한다
{layout-grid-type:val} obj.style.layoutGridType[=val]
⇒ 엘레멘트듸 내용 문자를 표현하기 위하여 사용된 그리드의 종류를 반환하거나 설정한다.
{left:val} obj.style.left[=val]
⇒ 문서 계통도상 다음에 위치한 개체의 왼쪽 모서리에서 해당 개체의 왼쪽 위치까지의 거리를 반환하거나 설정한다.
{letter-spacing:val} obj.style.letterSpacing[=val]
⇒ 개체 속에서 글자들 사이의 간격을 반환하거나 설정한다.
{line-break:val} obj.style.lineBreak[=val]
⇒ 일본어 텍스트에서 줄자름(line-breaking) 명령(rule)을 반환하거나 설정한다.
{line-height:val} obj.style.lineHeight[=val]
⇒ 개체 속에서 줄과 아래줄과의 거리를 반환하거나 설정한다.
{list-style:val} obj.style.listStyle[=val]
⇒ 개체 속에서 목록 스타일을 반환하거나 설정한다.
{list-style-image:val} obj.style.listStyleImage[=val]
⇒ 개체의 라인항목의 불렛으로 표시될 이미지의 주소를 반환하거나 설정한다.
{list-style-position:val} obj.style.listStylePosition[=val]
⇒ 개체의 라인항목의 불렛의 표시될 개체의 내용에 상대적인 위치를 반환하거나 설정한다.
{list-style-type:val} obj.style.listStyleType[=val]
⇒ 개체의 라인항목의 불렛의 사전에 전의된 형식을 반환하거나 설정한다.
{margin:val} obj.style.margin[=val]
⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 마진(주변 개체와의 간격)들의 두께를 일괄적으로 반환하거나 설정한다.
{margin-bottom:val} obj.style.marginBottom[=val]
⇒ 개체의 아래쪽 마진 두께을 반환하거나 설정한다.
{margin-left:val} obj.style.marginLeft[=val]
⇒ 개체의 왼쪽 마진 두께을 반환하거나 설정한다.
{margin-right:val} obj.style.marginRight[=val]
⇒ 개체의 오른쪽 마진 두께을 반환하거나 설정한다.
{margin-top:val} obj.style.marginTop[=val]
⇒ 개체의 위쪽 마진 두께을 반환하거나 설정한다.
{minHeight:val} obj.style.min-height[=val]
⇒ 개체의 최소 높이를 반환하거나 설정한다.
{overflow:val} obj.style.overflow[=val]
⇒ 개체의 내용이 높이나 너비를 초과하였을 때 어떻게 처리할 것인가를 나타내는 값을 반환하거나 설정한다.
{overflow-x:val} obj.style.overflowX[=val]
⇒ 개체의 내용이 너비를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다.
{overflow-y:val} obj.style.overflowY[=val]
⇒ 개체의 내용이 높이를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다.
{padding:val} obj.style.padding[=val]
⇒ 개체들 사이, 그들에 소속된 마진, 보더까지의 간격을 반환하거나 설정한다.
{padding-bottom:val} obj.style.paddingBottom[=val]
⇒ 개체의 아래쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{padding-left:val} obj.style.paddingLeft[=val]
⇒ 개체의 왼쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{padding-right:val} obj.style.paddingRight[=val]
⇒ 개체의 오른쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{padding-top:val} obj.style.paddingTop[=val]
⇒ 개체의 위쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{page-break-after:val} obj.style.pageBreakAfter[=val]
⇒ 개체 다음에 페이지 바꿈할 것인가를 반환하거나 설정한다.
{page-break-before:val} obj.style.pageBreakBefore[=val]
⇒ 개체 이전에 페이지 바꿈할 것인가를 반환하거나 설정한다.
없슴 obj.style.pixelBottom[=val]
⇒ 개체의 아래쪽 위치를 픽셀단위로 반환하거나 설정한다.
없슴 obj.style.pixelHeight[=val]
⇒ 개체의 높이를 픽셀단위로 반환하거나 설정한다.
없슴 obj.style.pixelLeft[=val]
⇒ 개체의 왼쪽 위치를 픽셀단위로 반환하거나 설정한다.
없슴 obj.style.pixelRight[=val]
⇒ 개체의 오른쪽 위치를 픽셀단위로 반환하거나 설정한다.
없슴 obj.style.pixelTop[=val]
⇒ 개체의 위쪽 위치를 픽셀단위로 반환하거나 설정한다.
없슴 obj.style.pixelWidth[=val]
⇒ 개체의 너비를 픽셀단위로 반환하거나 설정한다.
없슴 obj.style.posBottom[=val]
⇒ bottom 애트리뷰트로 지정된 단위로 개체의 아래쪽 위치를 반환하거나 설정한다.
없슴 obj.style.posHeight[=val]
⇒ height 애트리뷰트로 지정된 단위로 개체의 높이를 반환하거나 설정한다.
{position:val} obj.style.position[=val]
⇒ 개체를 위치시키는 방식을 반환하거나 설정한다.
없슴 obj.style.posLeft[=val]
⇒ left 애트리뷰트로 지정된 단위로 개체의 왼쪽 위치를 반환하거나 설정한다.
없슴 obj.style.posRight[=val]
⇒ right 애트리뷰트로 지정된 단위로 개체의 오른쪽 위치를 반환하거나 설정한다.
없슴 obj.style.posTop[=val]
⇒ top 애트리뷰트로 지정된 단위로 개체의 위쪽 위치를 반환하거나 설정한다.
없슴 obj.style.posWidth[=val]
⇒ width 애트리뷰트로 지정된 단위로 개체의 너비를 반환하거나 설정한다.
{right:val} obj.style.right[=val]
⇒ 다음에 위치한 개체의 오른쪽 모서리에서 해당 개체의 오른쪽 위치까지의 거리를 반환하거나 설정한다.
{ro--hover-background:val} obj.style.roHoverBackground[=val]
⇒ rowover 비헤이버가 사용되는 경우 마우스를 테이블 줄에 올렸을 때 배경색상을 반환하거나 설정한다.
{ro--hover-color:val} obj.style.roHoverColor[=val]
⇒ rowover 비헤이버가 사용되는 경우 테이블의 강조(highlight) 텍스트의 색상을 반환하거나 설정한다.
{ro--light-background:val} obj.style.roLightBackground[=val]
⇒ rowover 비헤이버가 사용되는 경우 테이블 줄들의 대체 띄줄의 밝은 색상을 반환하거나 설정한다.
{ro--selected-background:val} obj.style.roSelectedBackground[=val]
⇒ rowover 비헤이버가 사용되는 경우 선택된 테이블 줄의 배경색상을 반환하거나 설정한다.
{ro--shade-color:val} obj.style.roSelectedColor[=val]
⇒ rowover 비헤이버가 사용되는 경우 선택된 테이블 줄의 텍스트 색상을 반환하거나 설정한다.
{ro--shade-background:val} obj.style.roShadeBackground[=val]
⇒ rowover 비헤이버가 사용되는 경우 테이블 줄들의 대체 띄줄의 어두운 색상을 반환하거나 설정한다.
{ruby-align:val} obj.style.rubyAlign[=val]
⇒ rt 개체에 의하여 지정된 루비 텍스트의 위치를 반환하거나 설정한다.
{ruby-overhang:val} obj.style.rubyOverhang[=val]
⇒ rt 개체에 의하여 지정된 루비 텍스트의 위치를 반환하거나 설정한다.
{ruby-position:val} obj.style.rubyPosition[=val]
⇒ rt 개체에 의하여 지정된 루비 텍스트의 위치를 반환하거나 설정한다.
{scrollbar-3dlight-color:val} obj.style.scrollbar3dLightColor[=val]
⇒ 스크롤 박스와 스크롤바 화살의 위쪽면과 왼쪽면의 색상을 반환하거나 설정한다.
{scrollbar-arrow-color:val} obj.style.scrollbarArrowColor[=val]
⇒ 스크롤바의 화살의 색상을 반환하거나 설정한다.
{scrollbar-base-color:val} obj.style.scrollbarBaseColor[=val]
⇒ 스크롤바의 기본 색상(스크롤바, 스크롤 박스, 트랙, 화살)을 반환하거나 설정한다.
{scrollbar-darkshadow-color:val} obj.style.scrollbarDarkShadowColor[=val]
⇒ 스크롤바의 색상을 반환하거나 설정한다.
{scrollbar-face-color:val} obj.style.scrollbarFaceColor[=val]
⇒ 스크롤 박스와 스크롤바의 화살의 색상을 반환하거나 설정한다.
{scrollbar-highlight-color:val} obj.style.scrollbarHighlightColor[=val]
⇒ 스크롤 박스와 스크롤바 화살의 위쪽면과 왼쪽면의 색상을 반환하거나 설정한다.
{scrollbar-shadow-color:val} obj.style.scrollbarShadowColor[=val]
⇒ 스크롤 박스와 스크롤바 화살의 아래쪽면과 오른쪽면의 색상을 반환하거나 설정한다.
{scrollbar-track-color:val} obj.style.scrollbarTrackColor[=val]
⇒ 스크롤바 트랙(track) 엘레멘트의 색상을 반환하거나 설정한다.
{style-foat:val} obj.style.styleFloat[=val]
⇒ 개체 속에서 텍스트가 어느쪽으로 유동하는가(흐르는가)를 반환하거나 설정한다.
{table-layout:val} obj.style.tableLayout[=val]
⇒ 테이블 레이아웃이 고정(fixed)되는가를 반환하거나 설정한다.
{text-align:val} obj.style.textAlign[=val]
⇒ 개체 속의 문자나 개체의 수평 정렬 방식(left, right, center, justified)을 반환하거나 설정한다.
{text-align-last:val} obj.style.textAlignLast[=val]
⇒ 개체 속의 문자나 개체 마지막 줄의 수평 정렬 방식을 반환하거나 설정한다.
{text-autospace:val} obj.style.textAutospace[=val]
⇒ 조정된 문자를 위한 자동 문자 간격 맞추기를 반환하거나 설정한다.
{text-decoration:val} obj.style.textDecoration[=val]
⇒ 개체 속의 문자 장식(깜박거림, 중간줄, 윗줄, 아랫줄)을 반환하거나 설정한다.
없슴 obj.style.textDecorationBlink[=val]
⇒ 개체의 textDecoration 속성값이 'blink'로 설정되었는가를 부울값으로 반환하거나 설정한다.
없슴 obj.style.textDecorationLineThrough[=val]
⇒ 개체의 textDecoration 속성값이 'line-through'로 설정되었는가를 부울값으로 반환하거나 설정한다.
없슴 obj.style.textDecorationNone[=val]
⇒ 개체의 textDecoration 속성값이 'none'로 설정되었는가를 부울값으로 반환하거나 설정한다.
없슴 obj.style.textDecorationOverline[=val]
⇒ 개체의 textDecoration 속성값이 'overline'로 설정되었는가를 부울값으로 반환하거나 설정한다.
없슴 obj.style.textDecorationUnderline[=val]
⇒ 개체의 textDecoration 속성값이 'underline'로 설정되었는가를 부울값으로 반환하거나 설정한다.
{text-indent:val} obj.style.textIndent[=val]
⇒ 개체 속에서 문자의 첫 글자를 들어쓰기 하는 정도를 반환하거나 설정한다.
{text-justify:val} obj.style.textJustify[=val]
⇒ 개체 속의 문자에 사용된 정렬 방식을 반환하거나 설정한다 .
{text-kashida-space:val} obj.style.textKashidaSpace[=val]
⇒ 개체 속에서 문자 정렬 방식을 사용할 때 공백 표시에 kashida 비율을 반환하거나 설정한다. 아랍어에서 사용된다.
{text-overflow:val} obj.style.textOverflow[=val]
⇒ IE6 개체에서 문자의 넘처흐름을 표시하는 방식값을 반환하거나 설정한다.
{text-transform:val} obj.style.textTransform[=val]
⇒ 개체 속에서 문자의 변환 표현 방식을 반환하거나 설정한다.
{text-underline-position:val} obj.style.textUnderlinePosition[=val]
⇒ 개체의 textDecoration 속성이 'underline'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다.
{top:val} obj.style.top[=val]
⇒ 문서의 계통도에서 개체의 다음에 위치한 개체의 맨위(top)에 상대적인 위치를 반환하거나 설정한다.
{unicode-bidi:val} obj.style.unicodeBidi[=val]
⇒ 양방향 알고리즘에 관한 깔린 수준을 반환하거나 설정한다.
{verticalAlign:val} obj.style.vertical-align[=val]
⇒ 개체의 수직정렬을 반환하거나 설정한다.
{visibility:val} obj.style.visibility[=val]
⇒ 개체의 내용이 디스플레이될 것인가를 반환하거나 설정한다.
{white-space:val} obj.style.whiteSpace[=val]
⇒ 개체 속에서 길이가 긴 문자열의 자동 줄바꿈을 빈칸에서 할 것인가를 반환하거나 설정한다.
{width:val} obj.style.width[=val]
⇒ 개체의 너비를 반환하거나 설정한다.
{word-break:val} obj.style.wordBreak[=val]
⇒ 단어 속에서 자동 줄바꿈을 할 것인가를 반환하거나 설정한다. 특히 복수 언어를 사용할 때 중요한다.
{word-spacing:val} obj.style.wordSpacing[=val]
⇒ 개체 속에서 단어간의 간격을 증가시키는 정도를 반환하거나 설정한다.
{word-wrap:val} obj.style.wordWrap[=val]
⇒ 내용이 용기 개체의 범위를 초과하면 단어를 자를 것인가를 반환하거나 설정한다.
{writing-mode:val} obj.style.writingMode[=val]
⇒ 개체의 내용 방향과 흐름을 반환하거나 설정한다.
{z-index:val} obj.style.zIndex[=val]
⇒ 내용이 용기 개체의 범위를 초과하면 단어를 자를 것인가를 반환하거나 설정한다.
{zoom:val} obj.style.zoom[=val]
⇒ 개체의 확대 배율을 반환하거나 설정한다.

2007. 6. 29. 15:46

HTML 칼라 코드

000000 black 검정
2f4f4f darkslategray 어두운푸른빛회색
708090 slategray 푸른빛회색
778899 lightslategray 밝은푸른빛회색
696969 dimgray 칙칙한회색
808080 gray 회색
a9a9a9 darkgray 어두운회색
c0c0c0 silver 은색
d3d3d3 lightgrey 밝은회색
dcdcdc gainsboro
ffffff white 백색
fff5ee seashell 바다조가비
fffafa snow 설백
f8f8ff ghostwhite 허깨비백색
fffaf0 floralwhite 꽃의백색
f5f5f5 whitesmoke 백색연기
f0f8ff aliceblue 엷은잿빛바탕에푸른빛
f0ffff azure 하늘색
fdf5e6 oldlace 낡은끈
f5fffa mintcream 박하크림
ffefd5 papayawhip 열대아메리카산과수매질
ffdab9 peachpuff 복숭아빛불기
faf0e6 linen 리넨
eee8aa palegoldenrod 옅은국화과의다년초
ffe4e1 mistyrose 짙은장미빛
ffe4b5 moccasin 사슴가죽의구두
ffdead navajowhite 나바호족백색
d2b48c tan 볕에탄빛깔
f5deb3 wheat 밀
fafad2 lightgoldenrodyellow 밝은국화과다년초노랑
ffffe0 lightyellow 밝은노랑
fff8dc cornsilk 옥수수명주실
faebd7 antiquewhite 옛날의백색
f5f5dc beige 엷은갈색
fffacd lemonchiffon 레몬빛가볍고얇은직물
fffff0 ivory 상앗빛
f0e68c khaki 누른빛에엷은다색이섞인빛깔
e6e6fa lavender 연한자주색
fff0f5 lavenderblush 연한자주빛붉기
ffe4c4 bisque 분홍빛이도는검은빛을띤누른빛
ffebcd blanchedalmond 희어진엷은황갈색
deb887 burlywood 튼튼한목재
cd853f peru 남미서부의공화국
00ced1 darkturquoise 어두운푸른빛녹색
00bfff deepskyblue 짙은하늘파랑
7fffd4 aquamarine 엷은푸른빛녹색
1e90ff dodgerblue옥수수빵파랑
00ffff cyan 푸른정도
f0fff0 honeydew 식물의잎에서나는단물
87cefa lightskyblue 밝은하늘파랑
afeeee paleturquoise 옅은푸른빛녹색
e0ffff lightcyan 밝은푸른정도
add8e6 lightblue 밝은파랑
b0c4de lightsteelblue 밝은철강빛파랑
40e0d0 turquoise 푸른빛녹색
48d1cc mediumturquoise 중간의푸른빛녹색
00ffff aqua 엷은푸른빛녹색
7b68ee mediumslateblue 중푸른빛회색파랑
191970 midnightblue 깜깜한파랑
6495ed cornflowerblue 옥수수꽃파랑
0000cd mediumblue 중간의파랑
6a5acd slateblue 푸른빛회색파랑
4682b4 steelblue 철강빛파랑
0000ff blue 파랑
483d8b darkslateblue 어두운푸른빛회색파랑
5f9ea0 cadetblue 이하의파랑
87ceeb skyblue 하늘파랑
4169e1 royalblue 황실의파랑
b0e0e6 powderblue 가루파랑
000080 navy 짙은검은빛을띤남빛
00008b darkblue 어두운파랑
8a2be2 blueviolet 파란제비꽃색
8b008b darkmagenta 어두운짙은분홍색
9932cc darkorchid 어두운연보라색
9400d3 darkviolet 어두운제비꽃색
ff00ff magenta 짙은분홍색
ff00ff fuchsia 붉은빛깔이나는자줏빛
c71585 mediumvioletred 중제비꽃빨강
ba55d3 mediumorchid 중간의연보라색
9370db mediumpurple 중간의자줏빛
dc143c crimson 짙게붉은색깔
ff1493 deeppink 짙은연분홍색
ffb6c1 lightpink 밝은연분홍색
ff69b4 hotpink 강렬한연분홍색
ffc0cb pink 연분홍색
dda0dd plum 짙은 보라색
800080 purple 자줏빛
ee82ee violet 제비꽃색
d8bfd8 thistle 엉겅퀴
da70d6 orchid 연보라색
4b0082 indigo 남색
a52a2a brown 갈색
e9967a darksalmon 어두운주황색
f08080 lightcoral 밝은산호빛
cd5c5c indianred 인디언빨강
ffa07a lightsalmon 밝은주황색
db7093 palevioletred 옅은제비꽃빨강
f4a460 sandybrown 엷은갈색
fa8072 salmon 주황색
ff6347 tomato 토마토색
ff4500 ornagered
ff0000 red 빨강
800000 maroon 붉은빛을띤갈색
8b0000 darkred 어두운빨강
b22222 firebrick 내화벽돌
d2691e chocolate 갈색
8b4513 saddlebrown 안장갈색
a0522d sienna 붉은빛을띤갈색
bc8f8f rosybrown 장미빛갈색
ff7f50 coral 산호빛
ff8c00 darkorange 어두운붉은빛을띤누른색
ffa500 orange 붉은빛을띤누른색
b8860b darkgoldenrod 어둔운국화과의다년초
ffd700 gold 금빛
ffff00 yellow 노랑
7fff00 chartreuse 연두색
7cfc00 lawngreen 잔디녹색
00ff00 lime 열대산의레몬비슷한과일
32cd32 limegreen 라임녹색
00ff7f springgreen 봄녹색
3cb371 mediumseagreen 중간의바다녹색
adff2f greenyellow 녹색의노랑
8fbc8f darkseagreen 어두운바다녹색
90ee90 lightgreen 밝은녹색
98fb98 palegreen 옅은녹색
2e8b57 seagreen 바다녹색
00fa9a mediumspringgreen 중봄녹색
20b2aa lightseagreen 밝은바다녹색
66cdaa mediumaquamarine 중엷은청록색
228b22 forestgreen 숲녹색
008b8b darkcyan 어두운푸른정도
008080 teal 암록색을띤청색
006400 darkgreen 어두운녹색
556b2f darkolivegreen 어두운올리브녹색
008000 green 녹색
808000 olive 물푸레나뭇과의상록교목
6b8e23 olivedrab 올리브엷은갈색
bdb76b darkkhaki 어두운누른빛에엷은다색
daa520 goldenrod 국화과의다년초
000000 black 검정
2f4f4f darkslategray 어두운푸른빛회색
708090 slategray 푸른빛회색
778899 lightslategray 밝은푸른빛회색
696969 dimgray 칙칙한회색
808080 gray 회색
a9a9a9 darkgray 어두운회색
c0c0c0 silver 은색
d3d3d3 lightgrey 밝은회색
dcdcdc gainsboro
ffffff white 백색
fff5ee seashell 바다조가비
fffafa snow 설백
f8f8ff ghostwhite 허깨비백색
fffaf0 floralwhite 꽃의백색
f5f5f5 whitesmoke 백색연기
f0f8ff aliceblue 엷은잿빛바탕에푸른빛
f0ffff azure 하늘색
fdf5e6 oldlace 낡은끈
f5fffa mintcream 박하크림
ffefd5 papayawhip 열대아메리카산과수매질
ffdab9 peachpuff 복숭아빛불기
faf0e6 linen 리넨
eee8aa palegoldenrod 옅은국화과의다년초
ffe4e1 mistyrose 짙은장미빛
ffe4b5 moccasin 사슴가죽의구두
ffdead navajowhite 나바호족백색
d2b48c tan 볕에탄빛깔
f5deb3 wheat 밀
fafad2 lightgoldenrodyellow 밝은국화과다년초노랑
ffffe0 lightyellow 밝은노랑
fff8dc cornsilk 옥수수명주실
faebd7 antiquewhite 옛날의백색
f5f5dc beige 엷은갈색
fffacd lemonchiffon 레몬빛가볍고얇은직물
fffff0 ivory 상앗빛
f0e68c khaki 누른빛에엷은다색이섞인빛깔
e6e6fa lavender 연한자주색
fff0f5 lavenderblush 연한자주빛붉기
ffe4c4 bisque 분홍빛이도는검은빛을띤누른빛
ffebcd blanchedalmond 희어진엷은황갈색
deb887 burlywood 튼튼한목재
cd853f peru 남미서부의공화국
00ced1 darkturquoise 어두운푸른빛녹색
00bfff deepskyblue 짙은하늘파랑
7fffd4 aquamarine 엷은푸른빛녹색
1e90ff dodgerblue옥수수빵파랑
00ffff cyan 푸른정도
f0fff0 honeydew 식물의잎에서나는단물
87cefa lightskyblue 밝은하늘파랑
afeeee paleturquoise 옅은푸른빛녹색
e0ffff lightcyan 밝은푸른정도
add8e6 lightblue 밝은파랑
b0c4de lightsteelblue 밝은철강빛파랑
40e0d0 turquoise 푸른빛녹색
48d1cc mediumturquoise 중간의푸른빛녹색
00ffff aqua 엷은푸른빛녹색
7b68ee mediumslateblue 중푸른빛회색파랑
191970 midnightblue 깜깜한파랑
6495ed cornflowerblue 옥수수꽃파랑
0000cd mediumblue 중간의파랑
6a5acd slateblue 푸른빛회색파랑
4682b4 steelblue 철강빛파랑
0000ff blue 파랑
483d8b darkslateblue 어두운푸른빛회색파랑
5f9ea0 cadetblue 이하의파랑
87ceeb skyblue 하늘파랑
4169e1 royalblue 황실의파랑
b0e0e6 powderblue 가루파랑
000080 navy 짙은검은빛을띤남빛
00008b darkblue 어두운파랑
8a2be2 blueviolet 파란제비꽃색
8b008b darkmagenta 어두운짙은분홍색
9932cc darkorchid 어두운연보라색
9400d3 darkviolet 어두운제비꽃색
ff00ff magenta 짙은분홍색
ff00ff fuchsia 붉은빛깔이나는자줏빛
c71585 mediumvioletred 중제비꽃빨강
ba55d3 mediumorchid 중간의연보라색
9370db mediumpurple 중간의자줏빛
dc143c crimson 짙게붉은색깔
ff1493 deeppink 짙은연분홍색
ffb6c1 lightpink 밝은연분홍색
ff69b4 hotpink 강렬한연분홍색
ffc0cb pink 연분홍색
dda0dd plum 짙은 보라색
800080 purple 자줏빛
ee82ee violet 제비꽃색
d8bfd8 thistle 엉겅퀴
da70d6 orchid 연보라색
4b0082 indigo 남색
a52a2a brown 갈색
e9967a darksalmon 어두운주황색
f08080 lightcoral 밝은산호빛
cd5c5c indianred 인디언빨강
ffa07a lightsalmon 밝은주황색
db7093 palevioletred 옅은제비꽃빨강
f4a460 sandybrown 엷은갈색
fa8072 salmon 주황색
ff6347 tomato 토마토색
ff4500 ornagered
ff0000 red 빨강
800000 maroon 붉은빛을띤갈색
8b0000 darkred 어두운빨강
b22222 firebrick 내화벽돌
d2691e chocolate 갈색
8b4513 saddlebrown 안장갈색
a0522d sienna 붉은빛을띤갈색
bc8f8f rosybrown 장미빛갈색
ff7f50 coral 산호빛
ff8c00 darkorange 어두운붉은빛을띤누른색
ffa500 orange 붉은빛을띤누른색
b8860b darkgoldenrod 어둔운국화과의다년초
ffd700 gold 금빛
ffff00 yellow 노랑
7fff00 chartreuse 연두색
7cfc00 lawngreen 잔디녹색
00ff00 lime 열대산의레몬비슷한과일
32cd32 limegreen 라임녹색
00ff7f springgreen 봄녹색
3cb371 mediumseagreen 중간의바다녹색
adff2f greenyellow 녹색의노랑
8fbc8f darkseagreen 어두운바다녹색
90ee90 lightgreen 밝은녹색
98fb98 palegreen 옅은녹색
2e8b57 seagreen 바다녹색
00fa9a mediumspringgreen 중봄녹색
20b2aa lightseagreen 밝은바다녹색
66cdaa mediumaquamarine 중엷은청록색
228b22 forestgreen 숲녹색
008b8b darkcyan 어두운푸른정도
008080 teal 암록색을띤청색
006400 darkgreen 어두운녹색
556b2f darkolivegreen 어두운올리브녹색
008000 green 녹색
808000 olive 물푸레나뭇과의상록교목
6b8e23 olivedrab 올리브엷은갈색
bdb76b darkkhaki 어두운누른빛에엷은다색
daa520 goldenrod 국화과의다년초