왼쪽에 색상 있는 제목 형식
안녕하세요.
고코더 입니다.
가끔 블로그나 홈페이지를 보다보면
책의 소제목처럼 왼쪽에 네모 박스에
색이 입혀진 디자인을 볼 수 있습니다.
● 1. 오늘은 이 모양과 같은 CSS를 만들어 보겠습니다.
● 2. 아래 코드를 HTML로 실행해보세요.
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 | <!doctype html> <html lang="en"> <head> <style type="text/css"> .div_gocoder_point_1 p { padding: 0px 5px 0px; border-bottom: 0px solid #000; border-left: 10px solid #000; color: #000; } .div_gocoder_point_2 p { padding: 0px 5px 0px; border-bottom: 1px solid #000; border-left: 10px solid #000; color: #000; } </style> </head> <body> <div class="div_gocoder_point_1"> <p> 안녕하세요. 고코더 입니다. </p> </div> <div class="div_gocoder_point_2"> <p> 안녕하세요. 고코더 입니다. </p> </div> </body> </html> | cs |
gocoder_css.html
마무리
CSS 엄청 재밌네
'IT_Developers > CSS' 카테고리의 다른 글
| 무료 폰트 - "남한산성"과 "칼의노래"를 집필한 / "김훈체" / 첨부파일 있음 (0) | 2019.06.25 |
|---|---|
| 무료 폰트 - "토지"를 집필한 고박경리 작가 / 박경리체 / 첨부파일 있음 (2) | 2019.06.25 |
| 무료 폰트 - 윤태호 작가에 "미생체" 다운로드 받기 / 첨부파일 (2) | 2019.06.24 |
| CSS - li 점 대신 다른 모양으로 / list-style-type , list-style-image (0) | 2019.06.21 |
댓글