color picker component

수경, Sugyeong·2021년 10월 7일
CSSTILhtml
0

HTML/CSS

목록 보기
6/6
post-thumbnail

1. 개요

하늘색 컬러박스 위에 커서를 올려두면 #709fb0 라는 컬러값이 보여지는 color picker 컴포넌트를 만들어보았다.

2. 코드

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  </head>
  <body>
    <div class="outerBox">
      <div class="boxWrapper">
        <div class="colorBox">
          <span class="colorName">#709fb0</span>
        </div>
      </div>
      <div class="info">
        <button>
          <i class="fas fa-heart"></i>
          <text class="btnText">451</text>
        </button>
        <text>3days</text>
      </div>
    </div>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
html, body {
  height: 100%;
}
.outerBox {
  background-color: #ebeef3;
  width: 470px;
  height: 550px;
  border-radius: 10px;
  margin: 20px auto;
}
.boxWrapper {
  display: flex;  
  height: 450px;
  justify-content: center;
  align-items: center;
}
.colorBox {
  background-color: #709fb0;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  position: relative;
}
.colorName {
  position: absolute;
  left: 0;
  bottom: 10px;
  color: white;
  background-color: #527785;
  padding: 2px 12px;
  opacity: 0;
}
.colorBox:hover .colorName {
  opacity: 1;
}
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 25px 45px;
}
button {
  background-color: #ebeef3;
  font-size: 25px;
  font-weight: bold;
  border: 2px solid #b6b8b8;
  border-radius: 12px;
  text-align: center;
  padding: 15px 5px;
  cursor: pointer;
}
i {
  margin: 0 8px;
}
.btnText {
  margin: 0 8px;
  font-size: 25px;
  font-weight: bold;
}
text {
  font-size: 25px;
  font-weight: bold;
}

3. 알게된 점이나 느낀 점

HTML

  1. 항상 구조를 먼저 보는 습관을 들이자. 가장 바깥에 있는 태그 (클래스)부터 안쪽으로 감싸진 태그 (클래스)까지. Wireframing 하듯 덩어리들로 묶어서 순서를 잘 설정하고 간결하게 코드를 짜는 것이 중요하다. 순서를 잘못 정하면 유지보수도 힘들 뿐더러 CSS 코드를 짜는 과정도 복잡해진다.

  2. fontawesome CDN 코드는 잊지 말자. 아이콘을 사용할 일이 생긴다면 반드시 필요한 코드이다. <head> 에 잘 붙여넣자.

CSS

  1. 항상 * Universal 선택자로 box-sizing: border-box, padding: 0px, margin: 0px 을 속성 값으로 넣는 것을 잊지 말자. 브라우저마다 디폴트로 설정되는 padding 값이나 margin 값이 있기 때문이다.

  2. html, body 태그에 height: 100%을 속성 값으로 넣어주는 것이 좋다. 화면 전체를 채우게 되어 제한된 공간 없이 컨텐츠를 화면의 중앙에 위치하게 한다.

  3. 컨텐츠를 중앙 정렬하고 싶다면 해당 컨텐츠의 width 와 height 값을 꼭 적어주자. 그동안 컨텐츠를 margin: auto 값이나 align-items: center 값 등을 적었지만 padding 값 등을 주었을 때 중앙 정렬이 되지 않고 움직이는 현상을 종종 경험했다. 그 이유는 컨텐츠의 가로와 세로를 지정해주지 않아서 컨텐츠가 움직였던 것이다. 이 점을 항상 잊지 말자.

  4. position: absolute 속성을 사용하고 싶다면 해당 태그를 감싸고 있는 부모 태그에 position: relative 속성을 넣어준다.

profile
수경, Sugyeong
이전 포스트

CSS (3)

0개의 댓글