프로그램/html,css2009. 11. 3. 23:45

css 로그인 폼 만들기 1




[login1.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>

 

<body>
<form action="/path/to/script" id="thisform" method="post">
 <fieldset>
  <legend>로그인하기</legend>
  <p><input type="text" id="txtEmail" name="textEmail" tabindex="1" accesskey="9" value="이메일" onfocus="this.value='';" /></p>
  <p><input type="text" id="txtPwd" name="txtPwd" tabindex="2" value="비밀번호" onfocus="this.value='';" /></p>
  <p>
   <input type="checkbox" id="chkRemember" name="chkRemember" tabindex="3" />
   <label for="chkRemember">이메일 저장</label>
   <input type="submit" value="확인" tabindex="4" />
  </p>
 </fieldset>
</form>
</body>
</html>


[login1.css]
#thisform
{
 font-family:Georgia, serif;
 font-size:12px;
 color:#999;
}

#thisform label
{
 font-family:Verdana, sans-serif;
 font-weight:bold;
 color:#660000;
}

#thisform fieldset
{
 border:1px solid #ccc;
 padding:0 20px 5px;
}

#thisform p
{
 margin:5px;
}

#thisform legend
{
 padding:4px; 8px;
 font-family: arial, sans-serif;
 font-weight:bold;
 font-size: 90%;
 color:#666;
 background:#eee;
 border:1px solid #ccc;
 border-right-color:#999;
 border-bottom-color:#999;
} 

Posted by 은둔고수
프로그램/html,css2009. 11. 2. 22:01

css table 만들기 3




[table3.html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table3.css" />
</head>

<body>

<table class="boardList">
<tr>
 <th class="number">번호</th>
 <th class="title">제목</th>
 <th class="writer">작성자</th>
 <th class="date">작성일</th>
 <th class="viewCnt">조회수</th>
</tr>
<tr>
 <td>1</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>2</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>3</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
</table>
</body>
</html>



[table3.css]
.boardList
{
 width:100%;
 border-top: 1px solid #666;
 border-left: 1px solid #666;
 text-align:center;
 border-collapse:collapse;
}

.boardList th, td
{
 padding:10px;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
}

.boardList th.number {width: 53px;}
.boardList th.title {width: *;}
.boardList th.writer {width: 70px;}
.boardList th.date {width: 90px;}
.boardList th.viewCnt {width: 60px;}


[설명]
아래는 가느다란 실선 테이블을 만들기에서의 핵심이다.

1. 테이블의 맨 윗쪽선과 왼쪽선을 만드는 부분
.boardList
{
 border-top: 1px solid #666;
 border-left: 1px solid #666;
}

2. th, td의 오른쪽과 아래쪽 선을 만드는 부분
.boardList th, td
{
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
}

3. 1, 2번만 하면 선 사이의 간격(th, td)이 벌어져 있어서
간격을 붙여줘야 한다.
border-collapse:collapse;

Posted by 은둔고수
프로그램/html,css2009. 11. 2. 21:46

css table 만들기 2



[table2.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table2.css" />
</head>

<body>

<table class="boardList">
<tr>
 <th class="number">번호</th>
 <th class="title">제목</th>
 <th class="writer">작성자</th>
 <th class="date">작성일</th>
 <th class="viewCnt">조회</th>
</tr>
<tr>
 <td>1</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>2</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>3</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
</table>
</body>
</html>


[table2.css]
.boardList
{
 clear: both;
 table-layout: fixed;
 font-size: 12px;
 width: 100%;
 border-collapse: collapse;
 color: #ff2d88;
 background-color: #fcfcfc;
 text-align: center;
 border-top: 2px solid #8f73d7;
 border-bottom: 1px solid #ececec;
}

.boardList th
{
 padding: 0;
 font-weight:bold;
 height:30px;
}

.boardList td
{
 padding: 5px 0px 0px 0px;
 font-weight:normal;
 color:#333;
 height:21px;
 border-top:1px solid #ececec;
}

.boardList th.number {width: 53px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.title {width: *;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.writer {width: 70px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.date {width: 55px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.viewCnt {width: 55px;}

Posted by 은둔고수
프로그램/html,css2009. 9. 7. 14:26

투명png파일 ie6에서 사용하기

[파일 : iepngfix.htc]

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">
if (typeof blankImg == 'undefined') var blankImg = '/Common/blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m) {
    if(filters[f]) {
        filters[f].enabled = s ? true : false;
        if (s) with (filters[f]) { src = s; sizingMethod = m; }
    }
    else if(s) {
        style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'");';
    }
}

function doFix() {
    if(!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || (event && !/(background|src)/.test(event.propertyName))) return;
    var bgImg = currentStyle.backgroundImage || style.backgroundImage;
    if(tagName == 'IMG') {
        if((/\.png$/i).test(src)) {
            if(currentStyle.width == 'auto' && currentStyle.height == 'auto')
                style.width = offsetWidth + 'px';
                filt(src, 'image');
                src = blankImg;
        }
        else if(src.indexOf(blankImg) < 0) filt();
    }
    else if(bgImg && bgImg != 'none') {
        if(bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) {
            var s = RegExp.$1;
            if(currentStyle.width == 'auto' && currentStyle.height == 'auto')
                style.width = offsetWidth + 'px';
                style.backgroundImage = 'none';
                filt(s, 'crop');
            for(var n = 0; n < childNodes.length; n++)
                if(childNodes[n].style) childNodes[n].style.position = 'relative';
        }
        else filt();
    }
}
doFix();

</script>
</public:component>

 

설명> 이 소스를 iepngfix.htc 파일로 만든다.

 

 

[파일:css에서 호출]

<style type="text/css">
.png24 { behavior: url('./iepngfix.htc'); }
</style>

 

설명> 이 소스를 처럼 iepngfix.htc 파일을 css로 호출해서 사용한다.

Posted by 은둔고수
프로그램/html,css2009. 9. 5. 09:24

div textarea 만들기, div 스크롤


div를 이용해서 textarea 구현하기, div 스크롤 구현

[소스 예]
<div  style="width:393px; height:63px;font-size:12px; overflow:auto">안녕하세요. ^^<br/>
이 곳은 http://okkks.tistory.com 입니다.
</div>

설명>
div를 이용해서 textarea 태그처럼 만들기의 핵심은
overflow:auto
입니다. 스크롤이 자동으로 생깁니다.

- 스크롤 없애기
overflow:hidden

다만, 글 내용에서 다음 줄 처리(엔터)하는 부분은 내용에 <br />태크를 삽입을 해야 합니다. 

Posted by 은둔고수
프로그램/html,css2009. 8. 25. 23:33

css table cellspacing, cellpadding을 css로 사용하기

css table cellspacing, cellpadding을 css로 사용하기

<table cellpadding="0" cellspacing="0" border="0">
위 소스 중 cellpadding="0" cellspacing="0"을 css에서 사용하려면
다음과 같이 한다. 

1>
table{border-collapse:collapse;}
=> 이렇게 하는 경우 약간의 여백들이 생기게 된다. 

2>
table {padding:0; border-spacing:0px; border:0; border-collapse:collapse;}
th, td {padding:0px;}

Posted by 은둔고수
프로그램/html,css2009. 7. 26. 22:16

CSS padding, margin 순서에 따른 값의 의미는?


[css-tip]CSS padding, margin 순서에 따른 값의 의미는?


padding:10px; => top, right, bottom, left 값을 모두 10px으로 설정
padding:10px 5px; => top, bottom : 10px / left, right : 5px 값으로 설정
padding:10px 20px 30px 40px; => top : 10px, right : 20px, bottom : 30px, left : 40px 값으로 설정
외우기 쉽게 시계방향으로 위쪽, 오른쪽, 아래쪽, 왼쪽으로 기억을 해두면 좋다.

margin 역시 padding 과 마찬가지이다.
Posted by 은둔고수
프로그램/html,css2009. 7. 25. 18:16

CSS repeat에 대해서 알아보자.


[css-tip]CSS repeat에 대해서 알아보자.


예>
background:url(이미지 지정) repeat-x bottom;

예>처럼 배경이미지를 사용할 때 전체 화면에 지정한 이미지를 사용하고 싶으면
background:url(이미지 지정) 만 지정하면 된다.

[속성]
repeat-x => 가로로 계속 반복되어 표시가 된다.
repeat-y => 세로로 계속 반복되어 표시가 된다.
no-repeat => 한 번만 표시하고 반복하지 않는다.
bottom => 배경이미지를 화면의 하단부터 채우기 시작한다.
 - bottom 대신 위치를 직접 지성할 수 있다.
   : 0 50% => 배경이미지를 왼쪽 0, 위에서부터 50% 위치부터 채우기 시작한다.
    예> 배경이미지를 한 번만 표시하고 왼쪽에 붙여서 세로 중앙에 위치시킨다.
    background:url(이미지 지정) no-repeat 0 50%;
Posted by 은둔고수
프로그램/html,css2009. 7. 25. 17:52

CSS 네비게이션 메뉴 만들기(세로형)

[css-tip]CSS 네비게이션 메뉴 만들기(세로형)


3개의 메뉴로 구성되어 있는 세로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.




[nav.htm]

<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>

<body>

<ul id="nav">
 <li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>

</body>
</html>

메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.



[nav.css]
#nav
{
 list-style-type:none;
}

#nav li
{
 background:url(images/page_btn_next.gif) no-repeat 0 50%;
 padding-left:25px;
}
 
#nav a
{
 font-weight:bold;
 font-size:12px;
 text-decoration:none;
 color:#7878E1;
}

#nav a.active, #nav a:hover
{
 color:#00008C;
}



#nav 설명
list-style-type:none; => 블릿을 없앤다.


#nav li 설명
background:url(이미지 지정) no-repeat 0 50%;
=> 블롯을 대체할 다른 이미지 지정
no-repeat => 배경 이미지를 한 번만 출력하고 반복하지 않게 지정
0 50% => 왼쪽에서 0, 위에서부터 50%에 이미지를 위치 시킨다.(즉, 세로 중간에 위치)

보다 쉬운 방법으로 list-style-image:url(이미지 지정); 속성을 사용해 기본 불릿 이미지를 다른 이미지로 지정할 수 있다.
예>
ul
{
 list-style-image:url(이미지 지정);
}
하지만, 각종 브라우저와 버전에 따라 기본 이미지 위치가 다르기 때문에 <li>엘리먼트 배경이미지로 같은 효과를 줬다.

 
#nav a 설명
font-weight:bold; => 굵은 글자
font-size:12px; => 글자 크기
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정.(밑줄을 없앤다.)
color:#7878E1; => 글자 색상


#nav a.active, #nav a:hover 설명
color:#00008C; => 글자 색상

a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>

a:hover
=> 마우스 오버시 글자 색상

이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.

Posted by 은둔고수
프로그램/html,css2009. 7. 25. 12:08

CSS 블록레벨과 인라인?


CSS 블록레벨과 인라인?


HTML 엘리먼트는 블록레벨과 인라인으로 구분할 수 있다.
블록레벨 엘리먼트는 줄을 바꿔 각각 독립된 줄에 표시한다. 즉 한 줄에 이어서 표시가 되지 않고 다음 줄에 표시가 된다.
인라인 엘리먼트는 다른 인라인 엘리먼트와 같은 줄에 표시한다. 즉 한 줄에 이어서 표시가 된다.

블록레벨 엘리먼트는 블록레벨과 인라인 엘리먼트를 모두 포함할 수 있으나 인라인 일레먼트는 블록레벨 엘리먼트를 포함할 수 없다.


블록레벨 엘리먼트
<h1>~<h6>, <div>, <form> 등

인라인 엘리먼트
<strong>,<em>,<span>,<q> 등
Posted by 은둔고수

티스토리툴바