[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 56 57 58 59 말풍선(오른쪽)말풍선(위)말풍선(아래)말풍선(왼쪽) .balloon { position: relative; display: inline-block; } .balloon span { display: inline-block; padding: 10px; color: #fff; background: #ad1e51; border-radius: 20px; } .ba..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 56 57 58 59 .arrow { display: inline-block; background: #ad1e51; position: relative; margin-right: 30px; } .arrow.top, .arrow.bottom { width: 10px; height: 20px; } .arrow.left, .arrow.right { width: 20px; height..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 .triangle { display: inline-block; width: 0; height: 0; border: 30px solid; } .triangle.top { border-color: transparent transparent #ad1e51 transparent; } .triangle.bottom { border-color: #ad1e51 transparent transparent transparent; } .triangle.left { border-color: transparent #ad1e51 tra..