Programming/CSS (30) 썸네일형 리스트형 CSS 우선순위 CSS 우선순위 SOURCE.HTML DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> /* 똑같은 속성에 한해서만 우선순위가 .클래스명 이 높다 우선순위순 태그명 < 클래스명 < Id */ div { color:red; font-weight:bold; } .testClass { font-size:20px; color:blue; } #testId { text-decoration:underline; color:orange; } span { font-style:italic; } /* 아이디 배점이 가장 높지만 아래 css태그의 경우는 아이다앞에 .. Naver, 블로그 css 예제 네이버 기사 css로 만들어보자~DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> css 사용법 /* 기사 한줄 */ .item { margin-bottom:11px; } /* 기사 제목 */ .title { font-size:14px; font-family:돋움; font-weight:bold; color:#444444; letter-spacing:-3px; } /* 시간 편집 */ .time { font-size:10px; color:#888888; padding-left:10px; } .group { margin-bottom:35px; .. display, size, border, margin, position, background, visibility css 정리 exam.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> div { /*display:inline; 기존의 블록화된 부분 div를 inline화 한다*/ display:inline; } span { /*display:block; 기존의 인라인을 블록화 한다. 아래에서 span*/ display:block; } /*다음의 뜻은 "친부모가 아이디명 list1인 li에 서식(block->inline화)을 적용하라"라는 뜻*/ #list1 > li { display:inline; } 영역 영역 영역 인라인태그 span입니다. 외.. CSS 쇼핑몰 예제 CSS 쇼핑몰 간단 예제 zzarungna 공부중 div, span { font-style:돋움; font-size:12px; color:#8e8e8e; } #start { border:1px solid black; width:910px; } #img_ctl_a { position:absolute; left:30px; } #img_ctl_b { } table .listtbl { border-right:1px dotted #969696; padding-right:15px; padding-left:15px; } #product { font-size:14px; color:#7b7b7b; font-weight:bold; } #product_cmt { font-size:11px; color:#8c8c8c; pad.. CSS 날씨 표현 예제 CSS 날씨 표현 예제 SOURCE.html #divtit { width:580px; } #weatherTable { text-align:center; font-size:12px; color:#646464; width:580px; } hr { border-top:2px solid #808080; } .borderbar { border-right:1px solid #cecece; } span { color:#7B7B7B; font-size:11px; float:right; } .max { display:inline; padding-left:5px; color:red; font-weight:bold; font-size:12px; } .min { display:inline; padding-left:5px; c.. CSS 예제1 Weather01 exam.htmlDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> div, td, span { font-family:돋움; font-size:12px; color:#4c4c4c; } #headerSub1 { font-weight:bold; color:#000066; } #headerSub2 { font-size:11px; } #wtable { border:1px solid #939393; border-collapse:collapse; width:280px; height:260px; margin-top:7px; } #wtable td { bor.. 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:.. 이전 1 2 3 4 다음
