8일차 + a ~ (계산기 목업)

토요일부터 강행된 육각형 계산기 목업 만들기가 오늘 끝났다... 정말 시간가는줄 모르고 했던거 같다...스터디 하시는 분들께 칭찬받아서 기분이 너무 좋았다. 내일은 작동하는거 구현이라고 하셨는데 두렵지만 더 열심히 해야겠다!

디자이너 : Alexandre Touguet의  Honeycomb Calculator

이번에 만드는 것은 디자이너 Alexandre Touguet의 Honeycomb Calculator이다. 육각형 계산기 목업의 핵심은 육각형을 만드는 것이었다. 첫번째 참고한 내용은 chlip-path 속성을 사용한 것으로 코딩 블로그(https://merrily-code.tistory.com/130)를 참고하였다. 이곳의 내용중 하나인 chlipy(https://bennettfeely.com/clippy/)는 원하는 모양을 정하면 자동으로 chlip-path 속성 값을 생성해 준다. 이곳을 이용하여 첫 육각형을 그렸다.

 

chlip-path는 box모양에서 순서대로 점을 찍어 외부는 잘라서 보여주지 않고 내부만 보여주는 속성이다.

 

.border {   
    height: 86.6px;
    width: 100px;
    background-color: black;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

 하지만 내가 사용해야 할 육각형은 안에 테두리가 필요했다. 테두리를 적용시키니 자르는 속성이다 보니 테두리까지 같이 잘려 보였다. 그래서 테두리가 있는 육각형을 만들고자 다시 구글링을 하기 시작했다.

 

두번째 육각형은 테두리있는 육각형 버튼(https://codepen.io/hari_shanx/pen/NWzzKE)을 찾았는데 내가 생각한 것과는 달랐다. 길죽한 버튼 모양이어서 내 입맛대로 바꾸기로 했다. 이번건 테두리가 있는 육가형을 만들 수 있었지만 하면서 어려웠던 점은 before, after속성을 사용하는데 둘의 각도를 비틀고 원근감을 주어 육각형을 만드는 것이었다. 그리고 박스 테두리 밖으로 도형이 나간다는 점이었다. 물론 정확한 어떤 육각형이 만들어지는지 모르니 예쁜 육각형을 만든다는 것은 어림없었다.

.hex2 {
    width: 100%;
    height: 100%;
    text-align: center;
    background: transparent;
    position: relative;
    border-color: black;
}

.hex2::before, .hex2::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    height: 50%;
    z-index: -1;
    border: 1px solid orange;
}

.hex2::before {
    transform: perspective(150px) rotateX(27deg);
   
    border-bottom: none;
    border-color: blue;
}

.hex2::after {
    transform: perspective(150px) rotateX(-27deg);
    top: 58%;
    border-top: none;
    border-color: green;
}

또한 박스의 길이에 따라서 모양이 갖춰지지 않았다. 원하는 박스의 육각형을 만드려면 너무 맞추기가 어려웠다. 즉 반응형으로 만들수가 없었다.

결국 나는 원하는 박스 크기대로 만들수 있고 반응형으로 만들 수 있는 chlip-path로 돌아와서 테두리를 어떻게하면 만들수 있을까 하며 구글링을 했다. 그래서 발견한 것이 조금 작은 사이즈의 육각형을 겹치는 것이다.

.border {   
    height: 86.6px;
    width: 100px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

}

.wrap {
    height: 95%;
    width: 95%;
    background-color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.inside-sd {
    height: 90%;
    width: 90%;
    background-color: rgb(88, 88, 88);
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.text {
    height: 70%;
    width: 70%;
    background-color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

}

위의 그림은 육각형의 크기를 줄려나가며 겹친것이다. 이렇게 버튼을 완성했다 생각했지만 또 다른 난관이 있었다. 바로 hover속성인데 한번에 버튼 전체가 기능하는 것이 아닌 테두리부터 버튼이 기능했다. 그래서 생각해낸 것이 가장 밖의 육각형과 크기가 같은 투명한 육각형을 겹쳐 그 육각형에 hover 속성을 부여하는 것이다. 그렇게 버튼 하나를 완성하고 본격적인 계산기 목업을 시작했다.

 

가장 첫번째로 와이어프레임을 생각해봤다.

 

가장 큰 틀을 생각 했었고 이 와이어프레임을 기초로 만들기 시작했다.

 

/* 전체 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 외관 */
#calculator {
    width: 350px;
    height: 500px;
}

body의 flex를 사용해 외관을 가운데 배치하고 외관의 크기를 결정했다.

 

/* output 외관 */
.ooo {
    height: 20%;
    margin: 8% 5%;
    overflow: hidden;
    background: linear-gradient( to bottom, rgb(116, 116, 116), rgb(180, 180, 180) );
}
#out-put {
    position: relative;
    width: 95%;
    height: 105%;
    margin-left: 2.5%;
    background: linear-gradient( to left, rgb(116, 116, 116), rgb(180, 180, 180) );
    transform: perspective(150px) rotateX(-10deg);
    display: flex;
    flex-direction: row-reverse;
    z-index: 1;
}
/* output 위치 */
.out-text {
    position: relative;
    height: 50%;
    margin-top: -29%;
    z-index: 2;
}

두 개의 박스를 겹쳐 외관 틀을 만들었으며 transform속성을 사용하여 안쪽 외관은 x축으로 비틀고 원근감을 주어 입체감있게 표현했다.

 

/* 버튼 가장 밖 박스 */
#in-put {
    position: relative;
    height: 70%;
    margin: -15% 8% ; 
    z-index: 3;
    border: 1px solid black;
}
/* 버튼 위쪽 밖 테두리 */
#margin {
    height: 100%;
    width: 100%;
    border: 1px solid greenyellow;
}
/* 버튼 줄 나눔 테두리 */
#buttons {
    margin-top: -115%;
    height: 95%;
    width: 100%;
    border: 1px solid violet;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.384));
}
/* 1,3,5 줄 박스 크기*/
.back1 {
    width: 25%;
    height: 100%;
    border: 1px solid black;
}
/* 2,4 줄 박스 크기*/
.back2 {    
    width: 25%;
    height: 80%;
    border: 1px solid black;
}
/* 2줄 간격 */
.mar1 {
    margin: -101.75% 19%;
}
/* 3줄 간격 */
.mar2 {
    margin: -101% 38%;
}
/* 4줄 간격 */
.mar3 {
    margin: -101.8% 57%;
}
/* 5줄 간격 */
.mar4 {
    margin: -101% 76%;
}

.back1, .back2
    display: flex;
    flex-direction: column;
}

버튼들이 들어갈 곳의 박스를 만들고 결과값이 나오는 곳의 디자인이 겹쳐지기 때문에 서로의 박스를 겹쳤다. 그리고 버튼들의 들어갈 자리를 만들고 margin을 계산하여 간격으라 맞췄다.(나는 노가다로 했지만 나중에 해보니 flex로도 가능하다.)

 

.b-hex {
    flex: 1 1 0;
    background: black;
    display: flex;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

버튼의 테두리가 될 박스 간격을 flex로 나누고 clip-path를 사용하여 육각형 모양으로 자른다.

/* 버튼 회색  */
.gy {
    height: 95%;
    width: 95%;
    margin-top: 2.5%;
    margin-left: 2.5%;
    background-color: rgb(153, 153, 153);
}
/* 버튼 안쪽 어두운 테두리 */
.in-sd {
    height: 85%;
    width: 85%;
    background-color: gray;
}
/* 버튼 안쪽 회색 */
.text {
    height: 65%;
    width: 65%;
    background-color: rgb(153, 153, 153);
}
/* 겹치는 속성들 */
.gy, .in-sd,.text {
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

처음에 버튼 모양 만든 것과 같이 육각 형을 겹쳐 버튼 모양을 만든다.

.bak1 {
    width: 30%;
    height: 100%;
}

.bak2 {
    width: 30%;
    height: 80%;
}

.hex {
    flex: 1 1 0;
    background-color: rgb(216, 216, 216);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mg1 {
    margin-top: -1.5%;
    margin-left: -2.75%;
}

.mg2 {
    margin-top: -110.5%;
    margin-left: 15%;
}

.mg3 {
    margin-top: -103.9%;
    margin-left: 35%;
}

.mg4 {
    margin-top: -110%;
    margin-left: 55%;
}

.mg5 {
    margin-top: -104%;
    margin-left: 73.5%;
}

.bak1, .bak2 {
    display: flex;
    flex-direction: column;
}

버튼들 윗쪽에 결과값 창을 넘어가는 테두리를 표현했다. 버튼을 정렬했던 방식 그대로 사용했으며 버튼들보다는 크게 만들고 외관의 배경색과 같게하여 외관인 것처럼 만들었다.

 

이제 다음 작업으로 hover속성과 active속성을 사용하기 위해 버튼들 위를 투명한 육각형들로 겹치면서 글자를 넣어준다.

/* 버튼 애니메이션 박스 */
.buttons-cap { 
    height: 95%;
    margin-top: -113.1%;
}

/* 버튼 애니메이션 테두리 */
.b-he, .b-hec,.b-heo {
    flex: 1 1 0;
}

가장 밖의 박스의 사이즈만 정해주고 나머지는 버튼의 속성과 속성값이 같기 때문에 같은 설정들을 사용해 줬다.

.b-he:hover {
    background-color: rgb(58, 58, 58);
}

.b-he:active {
    background-color: rgb(0, 0, 0);
    color:rgb(255, 255, 255);
}

.b-he:hover, .b-he:active {
    opacity: 0.5;
}

hover속성을 사용하여 버튼에 마우스를 가져가면 배경색이 바뀌게 하고 active속성을 사용하여 마우스로 클릭했을시 배경색이 다른색으로 바뀌게 했다. 

/*버튼 테두리 입체감*/
background: linear-gradient( to bottom right, rgb(255, 255, 255), rgb(0, 0, 0) );

/*버튼 그림자*/
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.384));
    
/*글자 음각*/
text-shadow: 1px 1px #EAEAEA, -1px -1px #232323;

마지막 작업으로 버튼의 검은색 테두리에 그라데이션과 그림자를 주어 입체감이 살아나게 하고 글자에 그림자를 주어 음각처럼 보이게 해주면 완성이 된다. filter:drop-shadow는 box-shadow랑 다르게 안에 속해 있는 물체의 그림자를 비추는 속성이어서 사용했더니 육각형모양의 그림자가 생성되어 너무 행복했다.

 

해보고 싶었던 육각형 계산기를 만들어서 너무 좋았고 스터디 같이 하시는 분들 페어분들 칭찬을 너무 많이 해주셔서 기분이 좋았다. 모두들 감사합니다!