-
CSS 실습 - 클래스 선택자 사용하기HTML&CSS/실습 2023. 1. 20. 21:37
나의풀이
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> .accent.bg{ background-color: grey; color:black; padding:10px; border: solid 1px; } .accent { border: solid 1px; padding: 5px 10px; } p{ font-style: italic; } </style> </head> <body> <div> <h1 class="accent bg">레드향</h1> <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p> <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p> <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p> </div> </body> </html>해설풀이
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> .accent.bg{ background-color: grey; } .accent { border: solid 1px #000; padding: 5px; /* 테두리와 내용 사이의 여백 */ } p{ font-style: italic; /* 이탤릭체 */ } </style> </head> <body> <div> <h1 class="accent bg">레드향</h1> <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p> <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p> <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p> </div> </body> </html>'HTML&CSS > 실습' 카테고리의 다른 글
HTML 실습 - 이미지삽입 (0) 2023.01.22 CSS 실습 - 탐라국 입춘굿 (0) 2023.01.20 실습 - 테이블 만들기 (0) 2023.01.17 실습 - 순서있는 & 순서없는 목록 만들기 (0) 2023.01.08 레이아웃만들기 (0) 2023.01.05