Developer Factory

CSS 선택자(selectors) - 조합 선택자최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅일단 예제 html을 올린다 CSS선택자 맛있는반찬 맛있게 먹어봅시다 으히히 매운꽃게탕 라면밥 카레라이스 그런데 달랑3개뿐 지금은 저녁인데ㅠㅠ 자손 선택자 A B 아주 잘 알고있는것 부모의 자손엘리먼트를 지정 div ul li{ color:#009;} 위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가 색깔이변한다 공통 선택자 A * B구애 받지않고 모든것. * 는 모든것을 의미한다. A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다. div * em{ color:#F00;} 캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째로..

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS008#d1 { border: 1px solid red; width: 30px; height: 30px; background: url("icons.png") -30px -30px ;}

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS007 #d1 { border: 1px solid red; border-left: 5px solid red; border-right: 20px solid red; padding-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-left: 190px; } #d2 { width: 180px;/* height: 180px; */ margin-top: 10px; border: 1px dotted blue; float: left;} #footer{ border: 1px soli..

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS006 #d1 { border: 1px solid red; border-left: 5px solid red; border-right: 20px solid red; padding-left: 10px; margin-top: 10px; margin-bottom: 20px;} #d2 { width: 180px;/* height: 180px; */ margin-top: 10px; border: 1px dotted blue;} 오호라.. 비트교육센터... 테스트1 테스트...01 테스트2 테스트...02 테스트3 테스트...03 테..

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS005 body { font-family: Arial, serif; font-size: small;} h1 { font-size: 180%;} p { font-size: 1.2em;} 오호라.. 비트교육센터... 테스트1 테스트...01 테스트2 테스트...02 테스트3 테스트...03 테스트4 테스트...04 테스트5 테스트...05 테스트6 테스트...06 테스트7 This document has been reviewed by W3C Members, by software developers, and by other W..

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS004h1.c2:hover { background-color: black; color: white;} /* CSS 스타일 상속- 일부 스타일은 자식 엘리먼트로 상속된다. */div:nth-child(2) { border: 2px solid blue; color: red;}p::FIRST-LETTER { color: blue ; font-size: 50px ;} 테스트1 테스트...01 테스트2 테스트...02 테스트3 테스트...03 테스트4 테스트...04 테스트5 테스트...05 테스트6 테스트...06 테스트7 Th..

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS003/* css class 'c2'에 속해있는 h1 태그를 선택하라 */ h1.c2 { color: red;}h1.c1.c2 { text-decoration: line-through;} 테스트1 테스트...01 테스트2 테스트...02 테스트3 테스트...03 테스트4 테스트...04 테스트5 테스트...05 테스트6 테스트...06 테스트7 오호라~~07

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS002/* , 연산자 */#header01, #header03, #header05 { color: red;} /* 공백 연산자: 자손 중에 선택 */#d1 p { background-color: lime;} /* > 연산자: 직계 자식 중에 선택 */#d2 > p { border: 1px solid red;} 테스트1 테스트...01 테스트2 테스트...02 테스트3 테스트...03 테스트4 테스트...04 테스트5 테스트...05 테스트6 테스트...06 테스트7 오호라~~07

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> CSS001 /* 아이디로 대상 선택 */ #header03 { color: red ; } /* CSS 클래스로 대상 선택 */ .c1 { color: blue ; } .c2 { font-size: 10px ; } /* 태그 이름으로 대상선택 */ p { background-color: gray ; } /* 글로벌 대상 선택 */ * { border: 1px red dotted ; padding: 10px ; margin: 10px ; } 테스트1 테스트...01 테스트2 테스트...02 테스트3 테스트...03 테스트4 테스..

다음 뇌이버 구글