'CSS'에 해당되는 글 3건

  1. 2014.05.20 HTML 테이블 높이 100% 맨들기 2
  2. 2011.11.12 table cellspacing, cellpadding 속성을 css 로 처리하기 1
  3. 2011.08.06 [추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게! 3

HTML 테이블 높이 100% 맨들기

CSS 2014. 5. 20. 17:59


뭐 하나 수정할게 있어서 소스를 보니 무려 HTML DOCTYPE 이 없고, 레이아웃이 table로 되 있었다. -.-


대충 요대로 두고 조금 수정하고 끝내려니까 레이아웃이 훅 깨져버려 결국 DOCTYPE을 추가하고 이것저것 군데군데 소스를 꽤 수정했다.


DOCTYPE을 추가해서 훅 바뀐것 중에 하나가 전체 레이아웃을 맹글고 있는 맨 바깥 테이블 높이가 100%가 안되는 것이였다.


기냥 다시 원상복구 할려다가 고친게 아까워서 검색을 해보니 역시 똘똘한 사람들이 많았다.



아무튼 테이블 높이를 100% 로 할려면


요렇게 html, body 스타일에 height: 100% 를 적용시켜 주고 해당 테이블 스타일에 height:100% 를 추가해 주면 된다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			html, body{ height:100%; margin:0px; }
		</style>
	</head>

	<body>
		<table style="height:100%; width:100%;">
			<tr>
				<td style="text-align:center;">
					100% 테이블 높이
				</td>
			</tr>
		</table>
	</body>
</html>


※ DOCTYPE 이 없으면 IE 개발자도구로 보면 문서모드가 쿼크 모드로 보인다. 중요한 DOCTYPE을 안 넣다니 -.-



※ 제발 코딩할때 들여쓰기 좀 했으면 좋겠다. -_- 들여쓰기만 잘해도 소스가 있어보인다 -.-

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

table cellspacing, cellpadding 속성을 css 로 처리하기  (1) 2011.11.12
Posted by 스토브

table cellspacing, cellpadding 속성을 css 로 처리하기

CSS 2011. 11. 12. 21:42

cellpadding 속성은 td style에 padding 을 주면 동일한 효과가 적용되고,


cellspacing 속성은 table style에 border-spacing 을 적용하면 동일한 효과가 적용된다.


CSS 로 cellspacing, cellpadding 처리
가나다라 가나다라
가나다라 가나다라 


<style>
	#tbl {border-spacing:100px;}
	#tbl td {padding:30px;}
</style>


<table id="tbl" border="1px">
	<caption>CSS 로 cellspacing, cellpadding 처리</caption>
	<tr>
		<td>가나다라</td>
		<td>가나다라</td>
	</tr>
	<tr>
		<td>가나다라</td>
		<td>가나다라</td>
	</tr>
</table>

2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기

2011/11/06 - [jQuery Plugin] - jQuery datepicker 팝업창 사이즈 바꾸기

2011/11/06 - [jQuery Plugin] - jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기

2011/09/28 - [Javascript] - Javascript Timer setTimeout(), setInterval() 함수 나름 새로운 사용법 -_-

2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1


저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

HTML 테이블 높이 100% 맨들기  (2) 2014.05.20
Posted by 스토브

[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게!

이클립 2011. 8. 6. 00:21
html, css를 작성할때 특히 html 태그를 작성할때 기가맥힌 이클립 플러그인이다.

일단 바로 설치를 한 다음에 간단한 사용법을 살펴보자.

Help >  Install New Software 에 가서 Work with에 http://zen-coding.ru/eclipse/updates/ 입력한후 Add 버튼을 클릭해서 적당한 이름으로  사이트를 등록한다.

업데이트 사이트 추가


업데이트 사이트 추가



사이트를 등록하면 잠시후에 설치할 플러그인 목록이 조회되는데 체크후 Next 버튼을 클릭해서 플러그인 설치를 완료한다.

설치할 항목 선택(zencoding)


 설치완료 후 이클립을 리스탓트 하면 끝~


자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.

뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.

참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!

div#tree>ul>li*3
요렇게 입력하서 Tab 키를 뽓 눌러보면
<div id="tree">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
요렇게 후딱 싹 바뀌는걸 볼수 있다! 뭐 별기능 아니지만 어째보면 보기만 해도 흐뭇한 기능이 아닐수 없다.
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.

뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.





계속해서 몇가지 예를 들어보자.



html:4t 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

script:src 
<script type="text/javascript" src=""></script>

link:css 
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

ul#nav.tree>li*3>a 
<ul id="nav" class="tree">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

ul#nav.tree>li*2>a.navBtn[href=#] 
<ul id="nav" class="tree">
	<li><a href="#" class="navBtn"></a></li>
	<li><a href="#" class="navBtn"></a></li>
</ul>

ul#nav.tree>li*2>a#link$.navBtn[href=#] 
<ul id="nav" class="tree">
	<li><a href="#" id="link1" class="navBtn"></a></li>
	<li><a href="#" id="link2" class="navBtn"></a></li>
</ul>

ul#nav.tree>li*2>a#link$$.navBtn[href=#] 
<ul id="nav" class="tree">
	<li><a href="#" id="link01" class="navBtn"></a></li>
	<li><a href="#" id="link02" class="navBtn"></a></li>

table+ul#nav.tree>li*2 
<table></table>
<ul id="nav" class="tree">
	<li></li>
	<li></li>
</ul>

table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2) 
<table id="summary">
	<caption></caption>
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>


우째 쓰는지는 대략 알수 있을 것이다. 더 많은 것을 알고 싶을땐!

[HTML 예제보러 가기]

 [CSS 예제보러 가기]
install : 취임시키다, 장치하다, 임명하다, 자리에 앉히다, 인스톨하다
저작자표시 비영리 변경금지

'이클립' 카테고리의 다른 글

Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기  (0) 2011.08.08
Eclipse Javascript Code Assist 가 되지 않을때  (1) 2011.08.08
[추천 플러그인] jqueryWTP : Eclipse jQuery Code Assist Plugin  (3) 2011.08.05
설치된 Plugin Uninstall  (0) 2011.08.05
후져진 Eclipse Indido 에디터 폰트를 다시 쪽바로 맨들기  (6) 2011.07.28
Posted by 스토브
prev 1 next
openclose

티스토리툴바