HTML&CSS (31) 썸네일형 리스트형 CSS로 <table>꾸미기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 Document table{ border-collapse: collapse; /*이중테두리 제거*/ } td,th{ text-align: left; padding: 5px; height: 15px; width: 100px; } thead,tfoot{ background-color: darkgray; color:yellow; } tbody tr:nth-child(even){ /*짝수(even)에만 적용, 홀수(odd)*/ backgrou.. CSS로 <form> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 Document label{ display : block; /*새라인에서 시작*/ padding : 5px; } label span { display: inline-block; width: 90px; text-align: right; padding: 10px; } input[type=text]{ /*html태그[속성=값]*/ color: red; } input:hover, textarea:hover{ background-color: aliceblue; } inp.. CSS를 <li>에 적용해 메뉴 만들기 // To create menu 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 Document #mbar{ background: olive; } #mbar ul{ margin: 0; padding: 0; width: 567px; } #mbar ul li{ display: inline-block; /*3줄로 넘어가지 않게*/ list-style-type: none; /*목록 앞 마커정하기 : 없음*/ padding: 0px 15px; } #mbar ul li a{ color: white; text-decoration: none; } #mbar ul li a:hover{ /*내용.. CSS 마우스 커서 // cursor 마우스 커서 십자가 모양 마우스커서 물음표 모양이 더해짐 마우스커서 손가락으로 가르치는 모양 마우스 커서 동그랗게 로딩 돌아가는 커서 모양 마우스커서 사이즈 조절할 때 쓰이는 양방향 화살표 모양 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 마우스 커서 마우스커서 마우스커서 마우스커서 마우스커서 마우스커서 http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:whit.. CSS 텍스트 그림자 만들기 // To create text shadow CSS박스에 배경꾸미기 //Decoration the background on the box 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Document div{background-color: skyblue; background-size: 100px 100px; background-image: url(media/Spongebob.png); background-repeat: repeat-y; background-position: center center; width: 200px; height: 200px; color: blueviolet; font-size: 16px; } 박스에 배경꾸미기 SpongeBob is an over-optimistic sponge that annoys other characters. h.. CSS 둥근 모서리 // Rounded corners 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Document p{background-color: yellowgreen; padding: 20px; width :300px;} #r1{border-radius: 50px;} #r2{border-radius: 20px; border-style: dotted;} 둥근 모서리 테두리 반지름 50px의 둥근 모서리 반지름 50px의 둥근 점선 모서리 http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter http://colorscripter.com/info#e" .. CSS font font-family font-size font-style 예) font-style:italic font-weight font-weight : 300; /* 100~900의 범위에서, 300 정도 굵기 */ font-weight : bold; /* 굵게. 700 크기 */ 단축 프로퍼티 font-style, font-weight, font-size, font-family를 순서대로 지정하는 단축 프로퍼티 예) 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas 체 font : italic bold 20px consolas, sans-serif; font : 20px consolas, sans-serif; /* font-size, font-family외 생략 가능 */ 1 2 3 4 5 6 7 8 .. 이전 1 2 3 4 다음
