[TIL#16] HTML & CSS - 5

안준현·2021년 4월 15일
CSSTILhtml
0

HTML / CSS

목록 보기
7/7

2. Wecolor Picker 컴포넌트 만들기

[시행착오]
1 처음부터 레이아웃 고민않고 position 난발로..flex를 입력해도 되지 않는 현상 발생

[느낀점]
1. 레이아웃과 부모,자식의 그룹핑을 적절히 잘하자!
2. 지금 만든 html과 CSS 도...보완이 필요 한거 같다.

위의 과제를 하기위해 아래와 같이 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
  </head>
  <body>
    <div class="container">
        <div class="colorBox">
          <span class="hoverimage">#709fb0</span>
        </div>   
      <footer>
        <div class="buttonandday">
          <button type="button"> 
          <i class="fas fa-heart"></i> <span class="Number">451</span>
          </button>
        </div> 
        <div class="day"> 3days
        </div>
      </footer>
    </div>
  </body>
</html>
  1. 전체 뒤에 백그라운그 색깔을 담당할 container class 지정
  2. 파란색의 colorBox를 container class 밑에 `colorBox' class로 지정
  3. 그리고 colorBox 밑에 hover 되면 나타는 글자를 hoverimage class 지정
  4. container class 의 자식으로 <footer> 태그 만들고 그 안쪽으로 <button> 아이콘, 그리고 text 의 각각의 클래스 만들어줌

아래는 style을 위한 CSS 

* {
  box-sizing: border-box;
}
.container {
  margin: 10px auto;
  width: 300px;
  height: 400px;
  background-color: Rgb(235,239,243);
  border-radius: 10px;
  position: relative;
}
.colorBox{
  position: relative;
  top:30px;
  background-color: #709fb0;
  margin:auto;
  width: 250px;
  height:250px;
  border-radius: 10px;
}
.hoverimage{
  position: absolute;
  left:0%;
  top:90%;
  opacity: 0;
  padding: 0 10px;
  border:none;
  background-color: rgb(88,129,143);
  color: white ;
}
.colorBox:hover .hoverimage{
  opacity: 1.0;
}
footer{
  width : 250px;
  margin-top:50px;
  margin-left:25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
button{
  width:70px;
  height:50px;
  background-color: Rgb(235,239,243);
  border-radius: 10px;
  border: 1px solid Rgb(177,179,183);
}
.Number{
  margin-left:10px;
}
profile
안준현
이전 포스트

[TIL#15] HTML & CSS - 4

0개의 댓글

관련 채용 정보