소스코드
| <!DOCTYPE html> <html lang="en" dir="ltr"> <style media="screen"> p,a{ /*border-width:10px; border-style:solid; border-color;red;*/ border:10px solid red; padding:20px; /*박스와 글자사이 간격*/ margin:60px; width:600px; } </style> <head> <meta charset="utf-8"> <title>Box Model</title> </head> <body> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 안녕하세요. <a href="https://a.com">생활코딩 </a> 입니다. <br> //inline 방식의 테그에서는 width값과 height값이 무시된다. </body> </html> |
결과물
 |
'웹(클라이언트) > CSS' 카테고리의 다른 글
| font Color지정방법 3가지(rgb, hex, name) (0) | 2021.09.27 |
|---|---|
| float연습 (0) | 2021.09.27 |
| flex 사용하기 (0) | 2021.09.27 |
| border size 설정하기 (0) | 2021.09.27 |
| BackGround(배경)지정 (0) | 2021.09.27 |
