Box-decorating with CSS, HTML

주말동안 멋쟁이 사자처럼 프론트 엔드 스쿨에서 간단한 과제를 받았습니다!.

박스 꾸미기 인데요.

한번 들어가 보겠습니다.

---

1번째 박스 부터 시작해 보도록 하겠습니다.

2번 째 사진을 보시면 3가지의 색을 갖는 것을 볼 수 있습니다.

겉에 검은 테두리는 border를 줘서 만들 수 있을 것 같은데 중간에 회색 부분은 어떻게 할지 감이 잘 오지 않았습니다.

그래서 고민한 결과 div안에 div를 둬서 따로 border를 주는것 밖에 생각이 나지 않아 그런 식으로 구현해 보았습니다.

HTML & CSS

.Fbox {
            border: 5px solid black;
            background-color: #343F50;
}
.innerBox {
            box-sizing: border-box;
            border-top: 3px solid #4A5568;
            border-left: 3px solid #4A5568;
}

<div class="Fbox">
        <div class="innerBox">
            <p>Hello✋</p>
        </div>
</div>

 

추가

div 하나만 써서 해결하는 법

외부의 검은 테두리를 그림자로 내부의 왼쪽과 위의 선은 border를 통해 값을 준다.

div {
            display: flex;
            justify-content: center; 
            align-items: center;
            width: 200px;
            height: 100px;
            background: #343F50;
            box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 1);
            border-top: 10px solid #4A5568;
            border-left: 10px solid #4A5568;
}

---

두번째 박스

2번째 박스 역시 border dashed를 주면 해결이 될 것 같았으나

결과는...

백그라운드 컬러가 border와 겹쳐 버립니다.

이 문제 역시 div를 2개 사용해서 만들었는데유.

 

HTML & CSS

.borderbox {
            margin-top: 50px;
            border: 5px dashed #E3D2FC;
            border-radius: 100px;
}
.Sbox {
            border-radius: 100px;
            background: linear-gradient( to right, #823DED, royalblue );
}

<div class="borderbox">
        <div class="Sbox">
            <p>Hello✋</p>
        </div>
</div>

밖에 있는 박스 즉, 부모 박스에다가 border를 줘서 해결했습니다. 위에 보면 겹치는 코드가 있습니다. border-radius는 상속이 불가능합니다. 그렇기에 어쩔수 없이 2번 넣어 주었습니다 🫣.

상속되는 프로퍼티
font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style

상속이 되지않는 프로퍼티
margin, padding, border , box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height

 

추가

background-clip: padding-box 속성을 사용하면 div 하나만을 사용하여 패딩을 곂치지 않게 위치시킬수 있다.

div {
            display: flex;
            justify-content: center; 
            align-items: center;
            width: 200px;
            height: 100px;
            border-radius: 100px;
            background: linear-gradient( to right, #823DED, royalblue );
            border: 7px dashed #E3D2FC;
            background-clip: padding-box;
}

---

3번째 박스

박스를 보면 1시 4시 7시 방향의 꼭짓점들이 직각이 아닌 둥그런 곡선의 모양을 띄고 있고, 대각선 아래로는 그림자를 띄고 있습니다.

다행히 이 친구는 간단하답니다. border-radius의 사용법과 box-shadow만 알면 해결 하실수 있습니다.

 

.Tbox {
            margin-top: 50px;
            border: 5px solid #E8E8E8;
            border-radius: 0px 100px 100px 100px;
            box-shadow: 5px 5px 10px #E8E8E8
}

<div class="Tbox">
        <p class="blackFont">Hello✋</p>
</div>

코드역시 간단하죠~

---

구현 이미지

더 좋은 방법이 있다면 알려주세요!!!