💠문제 풀이/CSS 문제 풀이
05. 박스 모델 속성과 테두리 속성을 사용한 문제
튤
2022. 5. 13. 17:44
728x90
05. 박스 모델 속성과 테두리 속성을 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(문서 안에 이미지 파일이 있다고 가정한다.)
1. 이미지 테두리에 1px짜리 회색(#ccc) 실선을 그린다.
2. border-radius 속성을 사용해서 사각형 테두리를 원형으로 바꾼다.
3. box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가한다.
(가로 세로는 각각 5px, 흐림 정도 30px, 번짐 정도 2px, 그림자 색상 #000)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 문제 5</title>
<style>
#container {
width:350px;
margin:30px auto;
}
// 코드를 작성하세요
</style>
</head>
<body>
<div id="container">
<img src="images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html>결과 화면
A. 해설
1. 이미지 테두리에 1px짜리 회색(#ccc) 실선을 그린다.
--> <img> 스타일에 border 속성으로 지정한다.
2. border-radius 속성을 사용해서 사각형 테두리를 원형으로 바꾼다.
--> <img> 스타일에 border-radius 속성으로 50% 값을 지정한다.
3. box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가한다.
(가로 세로는 각각 5px, 흐림 정도 30px, 번짐 정도 2px, 그림자 색상 #000)
--> <img> 스타일에 box-shadow 속성을 사용해서 각각 값을 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 문제 5</title>
<style>
#container {
width:350px;
margin:30px auto;
}
img {
border:1px solid #ccc;
border-radius:50%;
box-shadow: 5px 5px 30px 2px #000;
}
</style>
</head>
<body>
<div id="container">
<img src="images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90