오늘 5줄후기
다음주 부터 선택과 집중을 잘 해야할 것 같다. 처음 배우는 걸 익히면서도 동시에 블로그 정리를 같이 하다보니 시간이 너무 많이 소요되어 뒷부분은 거의 쫒아가듯이 했다 너무 욕심 부리고 있는것 같다는 생각이 들었다. 그래도 오늘은 얼추 시간안에 끝냈지만 나중에는 이렇게 못할것 같음.
위의 문제로 인해서 새로운 방법으로 공부내용 정리는 키워드 위주로 일단 적어놓고 끝나기 전 남는시간, 추가 공부 시간에 복습과 동시에 정리 예정
어제의 연장선상으로 혼자서 공부하는 HTML/CSS는 오늘로써 마지막 이었는데 재미 있다가도 디자인이 내가 생각하는 것 처럼 바로바로 멀쩡하게 나오질 않는데서 오는 답답함이 조금 있었다.
뭔가 벌써 엄청 많이 한 것 같은데 전체 분량을 봤을때는 시작도 안했을듯? 자바 하나도 모르는데 열심히 해야지!
오늘도 시간이 아주 빨리 지나갔다.
오늘의 수확물
flexbox 라는걸로 페이지 레이아웃 만드는걸 해봤는데 어떻게든 쑤셔 박았다.. 제대로 이해한건지 아직도 모르겠어서 저녁에 더 공부 해야겠다. (아래에 코드 첨부 해놓았다)
와이어프레임도 실습 해보았는데 이게 맞나?? ㅋㅋ
코드보기
더보기
<!DOCTYPE html>
<html>
<header>flexbox practice</header>
<br><br>
<style>
#container {
border: 1pt solid red;
display: flex;
margin: 10pt;
padding: 10pt;
width: 85%;
height: 80vh;
}
#left_side {
border: 2px solid red;
margin: 10px;
flex: 1 1 200;
align-items: stretch;
}
#middle_area {
border: 2px solid red;
margin: 10px;
flex: 3 1 auto;
align-items: stretch;
}
#right_area {
border: 2px solid red;
margin: 10px;
flex: 10 1 auto;
align-items: stretch;
}
.icons {
border: 1px solid yellow;
margin: 10px;
width: 6vw;
height: 7vh;
}
.area1 {
border: 1px dotted blue;
margin: 10px;
height: 30%;
}
.area2 {
border: 1px dotted blue;
margin: 10px;
height: 30%;
}
.area3 {
border: 1px dotted blue;
margin: 10px;
height: 15%;
}
.area4 {
border: 1px dotted blue;
margin: 10px;
height: 55vh;
}
.area5 {
border: 1px dotted blue;
margin: 10px;
height: 15vh;
}
</style>
<body>
<div id="container">
<div id="left_side">
<div class="icons">Icon1</div>
<div class="icons">Icon2</div>
<div class="icons">Icon3</div>
</div>
<div id="middle_area">
<div class="area1">Area1</div>
<div class="area2">Area2</div>
<div class="area3">Area3</div>
</div>
<div id="right_area">
<div class="area4">Area4</div>
<div class="area5">Area5</div>
</div>
</div>
</body>
</html>
'codestates_BE_bootcamp39 > 주단위 일기' 카테고리의 다른 글
3 May - Git (0) | 2022.05.03 |
---|---|
2 MAY - Linux (0) | 2022.05.02 |
29 APRIL- 1주차 - Pair Programming (4) | 2022.04.29 |
27 APRIL (0) | 2022.04.27 |
26 APRIL (0) | 2022.04.25 |