- 다른 분들이 만든 계산기 과제들을 보고 어떤 속성들을 사용하여 어떠한 효과들을 내었는지 알아볼 수 있다.
backdrop-filter 블러처리하기
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
- 다른 분들이 공유해준 학습에 좋은 사이트 공유
- https://cssgridgarden.com/#ko ✔️
- https://flukeout.github.io/
- https://flexboxfroggy.com/#ko
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.youtube.com/watch?v=Mu_yTinxtHM
- https://velog.io/@teo?tag=CSS
- https://github.com/codestates-seb/section1-practice-code
- https://www.youtube.com/watch?v=gGebK7lWnCk
- https://heropy.blog/2018/11/24/css-flexible-box/
- https://studiomeal.com/archives/197
- https://ko.javascript.info/
-학습에 사용했던 학습 내용 및 코드 자료
오늘 수업시간에서 강조했던 flex-container <-> flex-item 관계를
화이트보드에 그려봤습니다 👍🏼flexbox에 대해서는 오늘 배우신 것 처럼
- flex-container와 flex-item과의 관계,
- flex-item 순서 배열법(flex-direction), 정렬법(justify-content)
- flex-grow로 비율에 맞게 영역 차지하게 하기
이 정도만 잘 아셔도 무방합니다.
나머지는 우리 차차 배워나가요! 오늘도 고생 많으셨습니다 😄
html 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>계산기 목업 - 세션용</title> <link rel="stylesheet" href="test.css"> </head> <body> <div class="container"> <div class="calculator"> <div class="display"> 디스플레이 세로 비율: 15 flex: 15 0 0 </div> <div class="controller"> 컨트롤러 세로 비율: 20 flex: 20 0 0 </div> <div class="buttons"> <!-- 버튼스 세로 비율: 60 flex: 60 0 0 --> <!-- row 1:1:1:1 --> <div class="row"> <button>hello</button> <button>hello</button> <button>hello</button> <button>hello</button> </div> <div class="row"> <button>hello</button> <button>hello</button> <button>hello</button> <button>hello</button> </div> <div class="row"> <button>hello</button> <button>hello</button> <button>hello</button> <button>hello</button> </div> <div class="row"> <button>hello</button> <button>hello</button> <button>hello</button> <button>hello</button> </div> </div> </div> </div> </body> </html>
css 코드
* { /* 전체 요소를 선택하는 셀렉터 */ padding: 0; margin: 0; border: 0; /* 아무것도 묻지도 따지지도 않고 border-box */ box-sizing: border-box; } /* user agent stylesheet */ .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator { display: flex; flex-direction: column; border: 1px purple solid; width: 360px; height: 540px; } .display { flex: 20 0 0; border: 1px purple solid; } .controller { flex: 15 0 0; border: 1px purple solid; } .buttons { /* flex-item */ flex: 65 0 0; /* flex-container */ display: flex; flex-direction: column; border: 1px purple solid; } .buttons .row { /* flex-item */ flex: 1 0 0; /* flex-container */ display: flex; flex-direction: row; border: 1px blue solid; } .buttons .row > button { /* flex-item */ flex: 1 0 0; border: 1px yellow solid; }
이해하기 쉬운 레퍼런스 html 코드 공유
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>계산기 목업 - 세션용</title> <link rel="stylesheet" href="session.css"> </head> <body> <div class="container"> <div class="calculator"> <div class="display"> <span>0</span> <span>+</span> <span>0</span> <span>=</span> <span>0</span> </div> <div class="controller"> <button class="clear">clear</button> <button class="enter">enter</button> </div> <div class="buttons"> <div class="row"> <button class="col">7</button> <button class="col">8</button> <button class="col">9</button> <button class="col">+</button> </div> <div class="row"> <button class="col">4</button> <button class="col">5</button> <button class="col">6</button> <button class="col">-</button> </div> <div class="row"> <button class="col">1</button> <button class="col">2</button> <button class="col">3</button> <button class="col">*</button> </div> <div class="bottom-row"> <button>0</button> <button>.</button> <button>/</button> </div> </div> </div> </div> </body> </html>
이해하기 쉬운 레퍼런스 css 코드 공유
- {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
display: flex;
flex-direction: column;
border: 1px purple solid;
width: 360px;
height: 540px;
}
.display {
display: flex;
align-items: center;
justify-content: space-evenly;
flex: 20 0 0;
}
.controller {
display: flex;
flex: 15 0 0;
}
.controller > button {
flex-grow: 1;
}
.buttons {
display: flex;
flex-direction: column;
flex: 65 0 0
}
.row {
display: flex;
flex: 1 0 0;
}
.col {
flex: 1 0 0;
}
.bottom-row {
display: flex;
flex: 1 0 0;
}
.bottom-row > button:first-child {
flex: 2 0 0;
}
.bottom-row > button {
flex: 1 0 0;
}
/ .w50 {
flex: 1 0 50%;
} /
소감
🔡➡️💻➡️🤓👍
오늘은 비교적 여유로웠던 하루였다.
HTML, CSS 학습 내용을 바탕으로 계산기 목업을 만드는 실습을
4일차와 5일차에 걸쳐 페어분과 만드는 거였다.
나의 페어분은 1년 정도 독학을 하신 분이어서 그런지
나의 궁금증을 페어 활동시간 동안 많이 해결해 주셨다. 덕분에 정말 많은 도움을 받았다.
나의 시간만큼 페어 분의 시간도 소중하다는 걸 알기에 이 활동을 하면서
도움을 받아가셨으면 했지만, 오히려 나에게만 도움이 되었던 시간인 것 같았다.
아직 개념을 익히는 것도 버거워 예습은 생각도 못했다.
그래서 페어 활동에 있어서 거의 드라이버 역할만 하고 있다.
첫 주를 지내고 보니,
나는 정규 학습 시간 중 학습 스케쥴보다 1-2시간 느렸다.
그걸 보완하고자 수업시간보다 1시간 일찍 시작하지만,
페어 활동에서 부족함을 절실히 느끼고 있다.
시간이 해결해줄 거다.
아니, 시간을 투자하고 있는 '지금의 내'가 해결해 줄 거다.
믿으며 가보자. 뭐든 끝은 있고, 뭐든 길은 있다.
developerpyk