HTML/CSS 2

 

지난번에 만든 계산기를 활용해서 만들어보았다!

계산기 목업 만들기

 

.bbb1:hover {

background-color: rgb(196, 235, 246);

}

.bbb2:hover {

background-color: pink;

}

.bbb3:hover {

background-color: rgb(196, 235, 246);

}

이미지라 안 나왔지만 hover 속성을 사용해서 버튼을 갖다대면 색이 변하게끔 했다

.container {

border-style: solid;

border-width: 10px 10px;

border-color: rgb(247, 225, 242);

border-radius: 40px;

box-shadow: 8px 8px 10px rgb(201, 186, 205);

background: rgb(254, 252, 240);

}

.calculator {

width: 300px;

height: 100px;

padding: 50px 40px;

margin: 25px;

background-color: rgb(225, 237, 241);

opacity: 0.8;

border-radius: 30px;

border: 2px solid white;

box-shadow: 2px 3px 5px rgb(220, 244, 245);

}

그리고 계산기 테두리와 값을 입력하는 곳에 box-shadow로 그림자를 주고

opacity 는 불투명도 속성인데 0.8의 약간의 값을 줬다

만들면서 제일 어려웠던 부분이 값을 입력하는 창이었는데

<div class="container">

<div class="calculator">

<span>0</span>

<form name="forms"></form>

html에 class "calculator"로 한 후

.calculator {

width: 300px;

height: 100px;

padding: 50px 40px;

margin: 25px;

background-color: rgb(225, 237, 241);

opacity: 0.8;

border-radius: 30px;

border: 2px solid white;

box-shadow: 2px 3px 5px rgb(220, 244, 245);

}

css에 class로 만들어준 calculator를 이렇게 꾸며줬다

html의 바디부분인 class를 만들어 주는 것이 헷갈렸고 앞에서 말했듯이 flex-box 만들면서 개념을 잘 이해하지 못했었다

페어분이 이해하기 쉽게 직접 코드 쳐서 보여주시는데 훨씬 이해하기 쉬웠고 내가 했을 때 왜 안 됐는지 알 수 있었다

내가 했을 땐 부모요소와 자식요소의 구분 없이 내가 필요하다고 생각하는 부분에 속성을 넣어줬던 것이 문제였고

flex-direction과 justify-content, align-items를 같이 넣으면서 내가 원하는 결과가 바뀌었던 것이었다

이 외에 알게된 것들은 cursor 마우스 커서가 올라갔을 때 보여줄 모양, gap 간격, transform, linear-gradient 그라데이션이다 

---

종합퀴즈 오답

• flexbox는 부모 요소와 자식 요소에 적용해야 하는 속성을 잘 구분해서 사용해야 한다
  (특정 요소가 부모 요소이자 자식 요소인 경우에는 두 속성이 동시에 적용되는 경우도 있다)
• 하나의 요소에 display : flex; 속성과 flex-grow : 1; 속성이 동시에 적용되는 경우도 있다
• flexbox의 부모요소 속성은 justify-content와 align-items이다
• flex 속성은 자식 요소에 적용해야하는 속성이다