https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/A_cool_looking_box
멋지게 보이는 박스 - Web 개발 학습하기 | MDN
이 평가에서는, 눈길을 사로잡는 박스를 만들어보면서 멋지게 보이는 박스를 만드는 것을 더 많이 연습하게 될 것입니다.
developer.mozilla.org
폴더 구조
index.html
<link> 태그로 style.css 파일을 연결했고 div에 text라는 클래스를 추가하였다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Cool box</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="text">This is a cool box</div>
</body>
</html>
style.css
- div와 text를 나누어서 꾸며주었다. 보기에도 편하고 그리고 text 클래스로 따로 요소를 입력해 주니 text 가운데 정렬하기에도 편했다.
- width와 height는 임의로 하였다. margin 0 auto를 사용해 박스를 가운데 정렬하였다.
- background-color와 background-image를 사용해 그라데이션과 배경 색상이 한번에 보이도록 하였다. 그냥 background 요소를 사용하니 하나만 적용되었다.
- 박스 그림자는 filter 요소를 사용해 좀 더 부드럽게 보일 수 있도록 구현하였다.
- 내부 그림자는 inset 값을 사용해 구현하였다.
- text 클래스 내부의 font-size를 제외하고 모두 임의로 구현하였다.
- font-size는 rem을 사용하여 나타냈는데 rem은 16px이라고 가정하고 계산하였다. 주석에 구체적인 연산이 나와있다.
html {
font-family: sans-serif;
}
/* Your CSS below here */
div {
width: 200px;
height: 150px;
margin: 0 auto;
background-color: rgb(255, 0, 0);
background-image: linear-gradient(
145deg,
rgba(255, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 30%
);
border: 1px solid brown;
border-radius: 10px;
filter: drop-shadow(5px 5px 7px rgb(0, 0, 0));
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.5),
inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}
.text {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.2rem; /* 1.2rem = (16*1.2)px */
text-shadow: 1px 1px 3px rgb(0, 0, 0);
}
결과
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 그리드 레이아웃 (3) | 2024.10.22 |
|---|---|
| [CSS] 과제: 커뮤니티 대학 홈페이지 레이아웃 (0) | 2024.10.21 |
| [CSS] 과제: 멋진 편지지 양식 만들기 (2) | 2024.10.19 |
| [CSS] 과제: 기초적인 CSS 이해 (0) | 2024.10.18 |
| [CSS] 과제: 값과 단위 (4) | 2024.10.18 |
