[과제]HTML과 CSS를 이용한 box design

금요일 첫주의 마지막 수업을 끝내며 강혜진(스트롱거.... 강사님 이메일 취향저격)강사님이 과제를 내주셨어요~~ 할렐루야

html을 이용하여 박스3개를 만들고 그 박스를 따라 만들어 보는 과제였다.

첫 번째 박스를 만들 때 박스를 세 개 만들어야 하는 줄 알고 계속 겹쳐가며 만들다가 다시 자세히 보니 박스 하나 만들고 그 위에 border만 있는 박스를 하나 만들면 되는 거였다.... 심지어 작은 박스는 오른쪽과 하단이 없는 박스였다 :-)

 

글자는 마지막을 제외하고 다 같은 글자길래 css 하나로 통일하고 마지막 Hello만 색을 바꿔줬다. (다 만들고 기억났는데 사용이 맞는진 모르겠지만 id 값이 아니라 last-child로 해도 되지 않았을까 생각이 들었다 :-)

    <div class="container">
      <div class="box">
        <p>Hello 👐</p>
      </div>
    </div>
    <div class="container2">
      <p>Hello 👐</p>
    </div>
    <div class="container3">
      <p id="last">Hello 👐</p>
    </div>

html 구조는 이렇게 짜봤는데 사실 정답은 없겠지만 더 간결하게 짤 수 없었을까 고민이 된다.

첫 번째 박스의 css를 짤 때 내부 박스의 border를 만들 때 위치 조정에 조금 애를 먹었다.
지금은 간단한 형태지만 복잡해지면 눈대중으로 맞출 수 없을 것 같아 조금 더 좋은 방법이 있을지 찾아봐야 할 것 같다.

/* 1번째 */
.container {
  position: relative;
  margin: 50px;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #000;
  background-color: #343f50;
}

.box {
  width: 198px;
  height: 98px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #4a5568;
  border-width: 2px 0 0 2px;
}

혹시나 쓸데없이 기능이 없는 코드가 들어가진 않았을까 걱정이 되는구먼... 얼른 스터디도 해봐야겠다 혼자보다 보니 내가 다 정답인 것 같고 다른 사람의 내용들을 보기가 어려운 것 같다.

 

2번째 박스는 그라데이션기능을 넣는 처음 보는 기능을 써봐서 재밌었다ㅎㅎ

그리고 잠시 헷갈렸던 border를 박스 외곽에 만드는 법도 배웠다 background-clip : padding-box; 😃(기억하자 재웅아)

/* 2번째 */
.container2 {
  position: relative;
  margin: 50px;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px dashed rgb(201, 155, 226);
  border-radius: 50px;
  background: linear-gradient(
    38deg,
    rgba(13, 213, 218, 1) 0%,
    rgba(141, 77, 200, 1) 100%,
    rgba(0, 212, 255, 1) 100%
  );
  background-clip: padding-box;
}

 

세상에 코딩하는 사람들은 다 착한 사람들 같다 친절하게 코드를 다 자동으로 만들어주는 사이트들을 무료로 제공해 주고 너무 좋다.
원하는 색상의 그러데이션을 선택하면 코드로 만들어 준다 신세계....

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

정말 친절하신 분들 ....들숨에 재력을 날숨에 건강을 ...

 

세번째 박스는 제일 빨리 끝나긴 했는데 개인적으로 제일 귀여운것 같다 ㅎㅎ 그림자도 만들어주는 사이트가 있다...정말 다들 천사임에 분명하다 😂

/* 3번째 */
.container3 {
  position: relative;
  margin: 50px;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(189, 189, 189);
  border-radius: 0px 50px 50px 50px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 20px 19px 38px,
    rgba(0, 0, 0, 0.22) 10px 15px 12px;
}
#last {
  font-size: 20px;
  color: rgb(78, 78, 78);
  font-weight: 600;
  font-family: "Belanosima", sans-serif;
}

정말 last까지 적어놓고 last-child는 기억 못한 나란 남자...(사실 저 구조에서는 사용이 안되는 것이길 ...)

 

수업을 하고 과제를 하면서 느끼는 점 중에 하나는 작은 것들을 해결하면서 생기는 자신감이 큰일을 할 수 있을 것 같은 자신감의 원동력이 되는 것 같아 기분이 좋아지는 것 같다. 아직 JS와 React를 안 들어가서 그런 것 같기도 하지만 ㅎㅎ

 

그럼 과제 결과물로 오늘의 커밋과 오늘의 기록 끝 오늘은 여기까지!