실습문제 5-9
WEB/TRAINNING 2017. 11. 7. 13:00 |9. <ol> 태그를 이용하여 '카푸치노를 만드는 과정'을 웹 페이지로 만들어보자.
마커를 크게 만들기 위해 다음 CSS3를 이용하여 마커를 제거하고 직접 숫자를 준다.
ol { list-style-type : none; } // 마커 제거
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 55 | <!DOCTYPE html> <html> <head> <title>카푸치노 만들기</title> </head> <style> ol { list-style-type: none; } span { color: yellowgreen; font-size: 3em; font-weight: bold; font-style: italic; margin-bottom: 10px; } span { position: absolute; margin-left: -10px } div { width: 300px; border:2px solid orange; } #a { text-align: center; } p { padding-left: 60px; } </style> <body> <h2>카푸치노</h2> <hr> <div> <h2 id="a">카푸치노 만드는 순서</h2> <ol> <li><span>1.</span><p>에스프레소 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.</p></li> <li><span>2.</span><p>적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다</p></li> <li><span>3.</span><p>몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.</p></li> <li><span>4.</span><p>컵에 계피 막대를 꽂고 커피를 부은후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.</p></li> </ol> </div> </body> </html> | cs |
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 | <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>카푸치노 만들기</title> <style> div { width : 300px; border : 2px solid peru; } ol { list-style-type: none; /* CSS 스타일 마커 제거 */ padding : 0 20px 0 20px; } ol li { /* 아이템 */ font: bold italic 35px Helvetica; padding-left : 5px; margin-bottom: 10px; } ol li span { /* 숫자 마커 표현 */ position: absolute; color: olivedrab; } ol li p { /* 아이템의 텍스트 */ font: 14px Helvetica, Sans-Serif; padding-left: 50px; } div h3 { /* 카푸치노 만들기 */ text-align : center; } </style></head> <body> <h3>카푸치노</h3> <hr> <div> <h3>카푸치노 만드는 순서</h3> <ol> <li><span>1.</span><p>에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.</p></li> <li><span>2.</span><p>적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.</p></li> <li><span>3.</span><p>몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.</p></li> <li><span>4.</span><p>컵에 계피 막대를 꽂고 커피를 부은후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다</p></li> </ol> </div> </body></html> | cs |