##CSS12 배경 관련 스타일 1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙2. 미리보기로 활용 복습DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>CSS - 배경 관련 스타일title> style> #bg1 { background-color: lightcyan; padding: 20px; border: 30px solid chartreuse; width: 50%; box-sizing: border-box; .. 2024. 10. 23. 테두리 관련 스타일 1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙2. 미리보기로 활용 복습DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>CSS - 테두리 관련 스타일title> style> div { width: 100px; height: 100px; border-width: 3px; margin: 15px; } #border1 { border-style: dashed; .. 2024. 10. 22. 영역 관련 스타일 1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙2. 미리보기로 활용 복습DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>CSS - 영역 관련 스타일title> style> .div-area { background-color: aquamarine; width: 100px; height: 100px; border: 10px solid red; } #pd1 { padd.. 2024. 10. 21. 목록 관련 스타일 1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙2. 미리보기로 활용 복습DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>CSS - 목록 관련 스타일title> style> #ul1 { list-style-type: disc; /* 기본값*/ list-style-type: circle; list-style-type: square; list-style-type: none; list-style.. 2024. 10. 20. 텍스트 관련 스타일 1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙2. 미리보기로 활용 복습DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>CSS - 텍스트 관련 스타일title> style> #c { color: red; color: #0fd1aa; color: rgb(52, 187, 56); /* 각 값은 0 ~ 255 범위 */ color: rgba(22, 29, 215, 0.647); /* a : 투명도 */ .. 2024. 10. 19. 글꼴 관련 스타일 1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙2. 미리보기로 활용 복습 글꼴 관련 스타일 속성 font-family : 글꼴을 지정할 때 사용 선택자 { font-family : 글꼴명; } 글꼴 확인 1 글꼴 확인 2 글꼴 확인 3 외부 웹 폰트 적용 웹 폰트 제공 사이트 : 구글 웹 폰트 글꼴 확인 4 font-size : 글꼴 크기 지정할 때 사용 선택자 { font-size: 크기(px, em(배수)); } li#fs$*3 --> 고정크기 (px) 확인 .. 2024. 10. 18. 이전 1 2 다음