본문
글상자에 따옴표 넣기
다음은 CSS 코드를 사용하여 글상자에 따옴표를 넣는 방법입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글상자에 따옴표 넣기</title>
<style>
.quote-box {
border: 1px solid #ddd;
padding: 20px 50px 20px 50px;
margin: 30px 20px 30px 20px;
width:calc(100% - 50px);
position: relative;
background:#EEE;
}
.quote-box:before,.quote-box:after {
content: "";
position: absolute;
font-size: 3em;
font-weight: bold;
line-height: 1;
}
.quote-box:before {
left: 10px;
content: "“";
}
.quote-box:after {
bottom: 0px;
right: 10px;
content: "”";
}
</style>
</head>
<body>
<h1>글상자에 따옴표 넣기</h1>
<p>
다음은 CSS 코드를 사용하여 글상자에 따옴표를 넣는 방법입니다.
</p>
<div class="quote-box">
프로그래밍 전문 커뮤니티 cmd.kr <BR>서버운영 기술 , HTML,PHP 소스 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Nunc accumsan, nisl sed lobortis ultricies, risus nisl pulvinar augue, eu hendrerit neque eros eget neque. Maecenas ultrices placerat enim, sit amet hendrerit mauris tincidunt vel.
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.