'Language/HTML'에 해당되는 글 24건

  1. 2010.06.24 div정렬 및 겹치기 position:absolute ,position:relative
  2. 2010.06.15 input type=image 테두리 없애기
  3. 2010.06.14 레이어(div) 겹치기
  4. 2010.05.19 position:relative, position:absolute
  5. 2010.05.19 DIV Position
  6. 2010.05.19 div display 속성
  7. 2010.05.19 display:none 과 visibility:hidden 의 차이 2
  8. 2010.05.19 div display : inline block float
  9. 2010.05.18 align / valign 1
  10. 2010.05.18 textarea 스크롤 / WRAP

div정렬 및 겹치기 position:absolute ,position:relative

Language/HTML 2010. 6. 24. 17:32


<table border="1" bordercolor="green" width="600" height="300">
<tr>
 <!-- 정렬 기준으로 div위치가 시작한다 -->
 <td align="center">
  <!-- position:absolute 인 상태로 위치를 지정하지 않으면 아래 div 정렬을 따른다. -->
  <div style="BACKGROUND: black; position:absolute; text-align:center; width:500px; height:80px; z-index:90;">
  </div>
  <!-- position:absolute 인 경우 td정렬 기준으로 div 왼쪽 끝을 적용한다. -->
  <div style="BACKGROUND: red; position:absolute; width:400px; height:100px;text-align:center; z-index:100;">
  </div>
  
 </td>
</tr>
</table>

<table border="1" bordercolor="green" width="600" height="300">
<tr>
 <!-- 정렬 기준으로 div위치가 시작한다 -->
 <td align="center">
  <!-- position:absolute 인 상태로 위치를 지정하지 않으면 아래 div 정렬을 따른다. -->
  <div style="BACKGROUND: black; position:absolute; text-align:center; width:500px; height:80px; z-index:90;">
  </div>
  <!-- position:relative 인 경우 td정렬 기준으로 div 전반부를 적용한다. -->
  <div style="BACKGROUND: red; position:relative; width:400px; height:150px;text-align:center; z-index:30;">
  </div>
  
 </td>
</tr>
</table>

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

embed 태그의 속성  (0) 2010.08.19
TD태그의 속성  (0) 2010.07.05
input type=image 테두리 없애기  (0) 2010.06.15
레이어(div) 겹치기  (0) 2010.06.14
position:relative, position:absolute  (0) 2010.05.19
:

input type=image 테두리 없애기

Language/HTML 2010. 6. 15. 09:15

<input type=image src="icon.gif" width="50" height="20"  style="border:0;">

[출처] input type=image 테두리(boder)값 없애기|작성자 가지주인

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

TD태그의 속성  (0) 2010.07.05
div정렬 및 겹치기 position:absolute ,position:relative  (0) 2010.06.24
레이어(div) 겹치기  (0) 2010.06.14
position:relative, position:absolute  (0) 2010.05.19
DIV Position  (0) 2010.05.19
:

레이어(div) 겹치기

Language/HTML 2010. 6. 14. 18:20
relative, left0, top0
relative, left0, top0
dddddddddddddd
aaaa
저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

div정렬 및 겹치기 position:absolute ,position:relative  (0) 2010.06.24
input type=image 테두리 없애기  (0) 2010.06.15
position:relative, position:absolute  (0) 2010.05.19
DIV Position  (0) 2010.05.19
div display 속성  (0) 2010.05.19
:

position:relative, position:absolute

Language/HTML 2010. 5. 19. 19:59

 

 

position:relative

 

<table style="background:black;">
<tr><td>

 

<div style="position:relative; left:0px; top:0px; width:200px; height:100px; background:red">relative, left0, top0</div>


<div style="position:relative; left:0px; top:0px; width:200px; height:100px; background:cyan">relative, left0, top0</div>


<div style="position:relative; left:25px; top:25px; width:200px; height:100px; background:green">relative, left0, top0</div>

 

</td></tr>
</table>

 

 - relative의 경우,  일부러 bgcolor=black인 테이블안에 div를 넣어보았는데,

   웹페이지의 시작이 아닌, div를 사용한 표안에서부터 left:0, top:0;이 적용됨

 - 역시 하위 relative들도, 다른 div와 겹치는 것이 아닌 자신의 위치에서부터 left, top의 간격만큼 지정됨

- 녹색그림의 숫자 오타에요. 오른쪽 소스가 맞음

그림처럼 left0, top0하면 하늘색 바로 다음에 나오는데,

그림의 경우 하늘색에서 left25, top25띄운거에요, 소스는 맞는데 그림에 숫자가 틀렷네요^^;

 

 

 

 

position:absolute

<table style="background:black;">
<tr><td>

 

<div style="position:absolute; left:0px; top:0px; width:200px; height:100px; background:red">absolute, left0, top0</div>


<div style="position:absolute; left:25px; top:25px; width:200px; height:100px; background:cyan">absolute, left25, top25</div>


<div style="position:absolute; left:45px; top:45px; width:200px; height:100px; background:green">absolute, left45, top45</div>

</td></tr>
</table>

 - absolute역시 bgcolor=black인 테이블안에 div를 넣어보았는데, 테이블과는 상관없이 웹화면 시작부터  left:0, top:0;이 적용됨

 - 하위 position=absolute인 div가 left:0, top:0일 경우 먼저쓴 div와 상관없이 모두 겹치므로, 약간의 차이를 둿음.

 

[출처] position:relative 와 position:absolute 비교 테스트|작성자 바람냄새

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

input type=image 테두리 없애기  (0) 2010.06.15
레이어(div) 겹치기  (0) 2010.06.14
DIV Position  (0) 2010.05.19
div display 속성  (0) 2010.05.19
display:none 과 visibility:hidden 의 차이  (2) 2010.05.19
:

DIV Position

Language/HTML 2010. 5. 19. 19:57

DIV Position

static
 - CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
 - HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡차곡 쌓이는 기본적인 형태이다.

relative
 - 한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다.
 - 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.

absolute
 - 흔히 레이어라는 개념으로 알고 있는 값이다.
 - div에 top, bottom, right, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.

fixed
 - 기본적으로 absolute와 같다.
 - absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.

inherit
 - 상위에서 지정한 값을 상속한다.


출처 - http://ninecloud.tistory.com/132

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

레이어(div) 겹치기  (0) 2010.06.14
position:relative, position:absolute  (0) 2010.05.19
div display 속성  (0) 2010.05.19
display:none 과 visibility:hidden 의 차이  (2) 2010.05.19
div display : inline block float  (0) 2010.05.19
:

div display 속성

Language/HTML 2010. 5. 19. 19:26

block : 블록박스로 만든다.
inline : 인라인 박스로 만든다.
inline-block : 블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가)
none : 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit : 상위 요소의 display속성을 상속받는다.

table : 블록레벨의 표로 만든다. (table)
inline-table : 인라인레벨의 표로 만든다. (table)
table-row : 행으로 만든다 (tr 기본 속성)
table-row-group : 본체 행 그룹으로 만든다. (tbody 기본 속성)
table-header-group : 헤더 행 그룹으로 만든다. (thead 기본 속성)
table-footer-group : 푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column : 열로 만든다. (col 기본 속성 - 보이지 않음)
table-column-group : 열 그룹으로 만든다. (colgroup 기본 속성 - 보이지 않음)
table-cell : 하나의 셀로 만든다. (td 기본 속성)
table-caption : 캡션으로 만든다. (caption 기본 속성)

list-item : li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in : 런인박스로 만든다.
compact : 콤팩트 박스로 만든다. (CSS2.1권고후보에서 삭제)
marker : 그 요소의 전후에 생성된 내용을 마커로 정의한다. (CSS2.1권고후보에서 삭제)
저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

position:relative, position:absolute  (0) 2010.05.19
DIV Position  (0) 2010.05.19
display:none 과 visibility:hidden 의 차이  (2) 2010.05.19
div display : inline block float  (0) 2010.05.19
align / valign  (1) 2010.05.18
:

display:none 과 visibility:hidden 의 차이

Language/HTML 2010. 5. 19. 19:25

div 태그로 만든 Layer를 안보이게 하는 두가지 방법

 1. display:none  <-> block

    아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨

 

2. visibility:hidden <-> visible

    보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨


3. display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline

div 태그 안에 있으면 block 가 쓰여지게 된다.


[출처] [HTML] div display, visibility 속성|작성자 erica

 예제1) display

<script language="javascript">
function view(){
 var f=document.form;
 if(f.type[0].checked==true){
 document.all.cattery.style.display="none";
 }else{
 document.all.cattery.style.display="";
 }
}
</script>

<form name="form" method="post">
<input type="radio" name="type" value="1" onclick="view()" checked>숨기 <input type="radio" name="type" value="2" onclick="view()">보이기
<div id="cattery" style="display:none;">내용</div>
<div>내용2</div>
</form>



예제2) visibility

<script language="javascript">
function view(){
 var f=document.form;
 if(f.type[0].checked==true){
 document.all.cattery.style.visibility="hidden";
 }else{
 document.all.cattery.style.visibility="visible";
 }
}
</script>

<form name="form" method="post">
<input type="radio" name="type" value="1" onclick="view()" checked>숨기 <input type="radio" name="type" value="2" onclick="view()">보이기
<div id="cattery" style="visibility:hidden;">내용</div>
<div>내용2</div>
</form>

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

DIV Position  (0) 2010.05.19
div display 속성  (0) 2010.05.19
div display : inline block float  (0) 2010.05.19
align / valign  (1) 2010.05.18
textarea 스크롤 / WRAP  (0) 2010.05.18
:

div display : inline block float

Language/HTML 2010. 5. 19. 19:07

 
1. display
 
block Element 를 정렬할때 display: inline; 이나 float를 사용한다고 알고계시는 퍼블리셔들이 몇명이있다.
 
하지만 display경우에는 말그대로 디스플레이될 상태를 설정하는것이다.
 
즉 !  inline 레벨로 할것이냐 block레벨로 할것이냐 아니면 숨길것이냐를 설정하는것이다.
 
예전에 어딘가에서 display: inline; 과 float:left;를 같은 용도로 정렬로 사용하는데 차이점을 묻는 글을 본적이 있다.
 
block을 inline으로 하면 자연스럽게 인라인의 특징인 left정렬이 되는것이 당연하다.
 
예를 들어 span도 inline요소이다 이녀석을 <span>aaa</span><span>aaa</span> 당연히 left정렬이 된다.
 
하지만 block요소들은 float로 설정하지않은이상은 떨어져서 한줄씩나온다.
 
고로 결론은
 
block의 정렬은 float  ! ! !
inline의 요소의 정렬은 text-align인것이다.
 
 
ps. block의 중앙정렬은 정 렬을 원하는 block요소에서 margin: 0 auto;를 해주면 중앙 정렬이 된다
단  block의 특성상(IE) width값을 줘야중앙정렬이 된다.
 (DTD설정은 당연 해줘야함)
 
 
2. float
 
float는 위에서 언급한 바와 같이 object 즉 block의 정렬을 담당하고있는 녀석이다.
 
float Attribute
-none Default. Object displays where it appears in the text.
-left Text flows to the right of the object.
-right Text flows to the left of the object.
 
위의 Attribute 를 보다싶이 총 3가지의 정렬이 존재 한다.
 
float는 자석과도 같다 서 로서로 왼쪽으로 붙을지 오른쪽으로 붙을지 결정만해주면
 
float해준 다음 Element 녀석들은 무조껀 그 효과로 인해서 붙어버린다.
 
이것을 미연에 방지하기위에서 clear을 해주는것이다.
 
다음은 clear에 관한 Attribute 이다.
 
clear Attribute
-none Default. Floating objects are allowed on both sides.
-left Object is moved below any floating object on the left side.
-right Object is moved below any floating object on the right side.
-both Object is moved below any floating object.
 
clear은 혼자 사용할때는 아무 효과가 없다 이녀석의 목적은 float된 녀석들을 초기화 시켜버리는 기능을 한다 .
 
즉
 
clear:left; : 왼쪽으로 붙은 녀석들만 원래대로 떨어져 ! !
clear:right; : 오른쪽으로 붙은 녀석들만 원래대로 떨어져! !
clear:both; 다 떨어져 !
 
ps.떨어져는 원래의 속성으로 돌아가란말이다 ㅡ_ㅜ 즉 block요소의 고유의 정렬인 한줄씩정렬
 
float:right; 와 float: left;를 같이 사용했는데
clear:left;를 해버리면 float:right;는 살아 있어서 후에 올 Element의 한놈은 오른쪽으로 붙어 버린다
잘생각해서 clear를 사용하자
 
그리고 하위 Element가 없어도 종료시점에는 가능하면 clear을 해주자 나중에 include로 불러들이거나 업데이트할때 또 오류가 발생할수있는걸 미연에 방지하기위해서이다.
 
 
=====================================================================================================================
=====================================================================================================================
 

* display 속성
대부분의 마크업 요소는 기본적으로 display 속성을 갖습니다. 기본값은 태그마다 다르며 보통 block 또는 inline 의 기본값을 지니고 있습니다.

block 요소로는 div, p, form 등의 요소가 있고

inline 요소로는 span, img 등의 요소가 있습니다.

 

 block 은 한 줄에 하나의 요소만 존재하고 주변 요소들은 모두 줄바꿈 시켜버리는 속성을 지니고 있으며 inline 요소는 한 줄에 여러개의 inline 요소들이 줄바꿈되지 않고도 존재할 수 있습니다. block 요소와는 다르게 inline 요소는 margin, padding, width, height, offset(left, top, right, bottom) 값을 지정할 수 없습니다. 따라서 자유로운 위치 값과 영역 값을 가지려면 display:block 상태로 존재해야 합니다.

* display 값
display 의 값으로는 다음과 같은 것들이 올 수 있는데 IE 에서 지원하지 않는 것들은 (*) 표기 하였습니다.
none
inline
block
list-item
run-in(*)
compact(*)
marker(*)
table(*)
inline-table(*)
table-row-group(*)
table-header-group
table-footer-group
table-row(*)
table-column-group(*)
table-column(*)
table-cell(*)
table-caption(*)

* position 값
posision 속성은 다음과 같은 값을 가질 수 있고 아무것도 지정하지 않은 경우의 기본값은 static 입니다. IE에서 지원하지 않는 속성에 대하여 (*) 표시 하였습니다.
static
relative
absolute
fixed(*)

- static 은 자신의 위치값을 스스로 결정하지 못합니다. 주변 요소에 의하여 밀리면서 자기 자신의 위치를 잡습니다.
- relative 는 static 과 absolute 의 속성을 반반씩 취하고 있습니다. 주변 요소에 의하여 자신의 위치값이 결정 되지만 offset(left, right, top, bottom) 속성과 함께 사용되면 스스로도 자신의 위치값을 결정할 수 있습니다.
- absolute 는 우리가 흔히 레이어라고 부르는 녀석이 갖는 값으로서 다른 요소의 방해를 받지 않고 자기 자신의 위치를 스스로 결정 합니다. 오직 offset(left, right, top, bottom) 값에 의하여 자신의 위치값이 결정되기 때문에 다른 요소들과 겹쳐 보일 수도 있습니다. 하지만 이 녀석도 offset 값의 기준이 offset 값을 가지고 있는 부모로 부터 시작되기 때문에 offset 속성이 포함된 부모요소의 위치가 변경될 때 함께 따라서 움직 입니다. 완전히 절대적이지는 않다는 이야기죠. 완전히 절대적인 위치값을 가지고 다른 요소의 움직임에 영향을 받지 않으려면 부모태그가 body 이어야만 합니다.

[출처] [html] div display : inline block float|작성자 윤미화

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

div display 속성  (0) 2010.05.19
display:none 과 visibility:hidden 의 차이  (2) 2010.05.19
align / valign  (1) 2010.05.18
textarea 스크롤 / WRAP  (0) 2010.05.18
ime-mode  (0) 2010.05.18
:

align / valign

Language/HTML 2010. 5. 18. 14:53

태그는 태그명령어와 각각의 속성을 가지고 있어요
align는 p,img,table,td,tr,div,span... 등 가지고 있고
valign는 tr,div,span.. 주로 많이 쓰입니다.

결론부터 말씀드리자면

align는 넓이를 기준으로 하고
valign는 높이를 기준으로 합니다.

보통 테이블에서 높이 많이 지정하죠


예제를 통해 설명드리겠습니다
9개의 셀이 들어있는 테이블입니다

이 소스를 복사해서 메모장이나 기타편집프로그램으로 붙혀 넣으세요

그리고 화멸명은 아무거나 정하시되 확장자는 htm,html로 정하세요

예를 들어 (abc.html,abc.htm)으로요

 

<table width="600" border="1" cellpadding="0" cellspacing="0">
  <tr height="90" valign="top">
 <td width="33%" align="left">
    왼쪽정렬과 상단정렬
 </td>
 <td width="33%" align="center">
    가운데정렬과 상단정렬
 </td>
 <td width="34%" align="right">
    오른쪽정렬과 상단정렬
 </td>
  </tr>
  <tr height="90" valign="middle">
 <td align="left">
    왼쪽정렬과 중앙정렬
 </td>
 <td align="center">
    가운데정렬과 중앙정렬
 </td>
 <td align="right">
   오른쪽정렬과 중앙정렬
 </td>
  </tr>
  <tr height="90" valign="bottom">
 <td align="left">
    왼쪽정렬과 하단정렬
 </td>
 <td align="center">
    중앙정렬과 하단정렬
 </td>
 <td align="right">
    오른쪽정렬과 하단정렬
 </td>
  </tr>
  </table>
  실행하면 차이를 느낄수 있을꺼예요
  참고로 align는 left,center,right속성값을 가지고 있구요
  valign는 top,middle,bottom 속성값을 가지고 있답니다...

 

[출처] [html]align & valign의 차이(정렬방법)|작성자 달하

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

display:none 과 visibility:hidden 의 차이  (2) 2010.05.19
div display : inline block float  (0) 2010.05.19
textarea 스크롤 / WRAP  (0) 2010.05.18
ime-mode  (0) 2010.05.18
ime-mode  (0) 2010.05.18
:

textarea 스크롤 / WRAP

Language/HTML 2010. 5. 18. 14:48

textarea 스크롤 없애기
 
<textarea cols=60 rows=10 style="overflow:hidden">

스크롤바 안생기는 텍스트 창 입니다.

</textarea>

 style="overflow:hidden"

 textarea 스크롤 자동

 .textarea {background-color:transparent; border:0; overflow-x:hidden; overflow-y:auto; padding-top:1; padding-right:5; padding-bottom:5; padding-left:5;}

 <textarea style="overflow-x:hidden; overflow-y:auto;"></textarea>

[출처] textarea 스크롤 없애기, 스크롤 자동 등등 옵션|작성자 나토님



TEXTAREA 옵션

<TEXTAREA NAME="" ROWS="" COLS="" WRAP=""></TEXTAREA>

 

WRAP = VIRTUAL  --화면에 맞게 자동으로 줄바꿈, 전송시는 입력대로 전송
WRAP = PHYSICAL  --화면에 맞게 자동으로 줄바꿈, 전송시는 자동 줄바꿈 전송
WRAP = OFF  --줄바꿈 없음.

출처 - http://abraham7.egloos.com/4068969

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

div display : inline block float  (0) 2010.05.19
align / valign  (1) 2010.05.18
ime-mode  (0) 2010.05.18
ime-mode  (0) 2010.05.18
iframe 테두리  (0) 2010.04.28
:
◀ PREV : [1] : [2] : [3] : NEXT ▶

티스토리툴바