Source (1628) 썸네일형 리스트형 CSS 화면숨기기 : visiblity CSS 태그 화면숨기는 방법 visiblity input { border:1px solid black; background-color:white; width:80px; height:25px; margin-bottom:3px; display:block; } #btn1{ display:none; } #btn2{ visibility:hidden; } CSS zindex,position CSS zindexexaml.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> /* 포지션이 스태틱인 경우가 가장 안쪽으로 배치된다. */ #box1, #box2, #box3 { border:1px solid black; width:100px; height:100px; } #box1{ left:50px; top:50px; background-color:#f5eea7; position:absolute; z-index:1; } #box2{ left:80px; top:80px; background-color:#cdf0a6; position:.. CSS 투명종이 : relative Exam.html #box1, #box2, #box3 { width: 200px; height: 100px; border: 1px solid black; background: #cbfbfc; } /* 투명종이 개념이다. 네모난 박스를 여러개 겹쳐진다. 기준점은 최초 div 위치 */ #box3 { position: relative; /* left:50px; top:-50px; */ right: 50px; } 상자 테스트 상자 결과아래이미지를 보면 임의로 짤린것이 아니라 relative를 통해 상자를 왼쪽으로 좀더 배치시킨 상자가 왼쪽으로 밀린 모습입니다. CSS width real size CSS width real sizeexam.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #bar { width:200px; border:1px solid red; margin-bottom:5px; } /*width라는 속성은 테그 자체 너비가 아니라 컨텐츠의 너비와 높이이다.*/ /*width는 태그 전체 크기가 아닌 내용물의 크기다 실제 크기는 202px이다. width 200px border의 1px 양끝 1+1 2px이 된다. */ #box { width:200px; height:100px; border:1px solid b.. CSS요소, 위치 너비, 높이, 산정:전체정리, margin DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> div { border:1px solid black; width:200px; height:100px; text-align:center; } #div2 { /* margin:20px; margin-left:0px; margin-right:0px; */ /* margin-top:20px; margin-bottom:20px; */ margin:20px 0px; } #div1 { margin-bottom:30px; } #list li { display:inline; /*width:200px;*/ ma.. CSS table(게시판) table(게시판)exam.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> /*디자인은 큰틀부터 디자인하자.*/ #list { width:500px; border:1px solid orange; /*겉테두리와 안테두리를 하나로 합쳐준다. */ border-collapse:collapse; } /* 누구 자식인지 반드시 명시해 준다.*/ #list td, #list th{ font-size:12px; border:1px solid orange; padding:3px; } #list th{ background-color:#cc99cc; .. CSS padding CSS padding exam.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #box1 { width:150px; height:100px; border:1px solid black; /* 테두리 상자안에 위아래 왼쪽 오른쪽 테두리 */ /*padding:10px;*/ /*background-color:orange;*/ /* padding-top:10px; padding-right:0px; padding-bottom:30px; Padding-left:0px; */ padding:10px 0px 30px 0px; } #text1 { b.. CSS 레이아웃:border CSS 레이아웃:borderexam.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #box1 { width:100px; height:100px; border:1px orange solid; /* border-style:solid; border-color:orange; border-width:1px; */ font-size:12px; } #box2 { width:100px; height:100px; border:dotted orange 1px; } #box3 { width:100px; height:100px; border:inset .. 이전 1 ··· 198 199 200 201 202 203 204 다음
