[HTML] div 박스 css design (box-shadow)

💾 Editor: VSCode

---

🔎 div

• 네모 박스를 넣고 싶다면 'div' 사용

 

index.html

<div class="box"></div>

style.css

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

네모 박스가 하나 추가됨

 

---

style.css

.box {
    width: 100px;
    background-color: cadetblue;
    margin: 30px; /* 상하좌우 여백 */
    padding: 40px; /* 상하좌우 안쪽 여백 */
    /* border: 4px solid black; 테두리 */
    border-radius: 15px; /* 테두리 둥글게 */

    /* 가운데 정렬 */
    /* display: block; 생략 가능, div가 박스 특징 */
    margin-left: auto;
    margin-right: auto;
    font-size: 10px;

    /* inherit(상속) 기능 */
    /* font-size: 10px; 부모 태그에 줘도 잘 적용됨 */
    color: white;
    font-family: gulim;
}

• margin: 상하좌우 여백
• padding: 상하좌우 안쪽 여백
• border: 테두리
  • solid: 실선
  • dotted: 점선
• border-radius: 테두리 둥글게
• display: block (가로행을 전부 차지함)

 

---

👉 과제: 박스에 shodow 주기

참고: https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

style.css

.box {
  box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);   
}

위와 같이 그림자를 만들었다.

box-shadow 활용!

 

style.css

.box {
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 2px 3px 2px 1px black;
}

검은색으로 바꿈.

각 위치의 역할은 코드 안에 주석으로 확인 가능함.

 

 

 

코딩애플 공부 기록