To Do List
- 피드백 수정
- 네브바 목업구현(간단CSS)
- 기록 목업구현(간단CSS)
- 지도 목업구현(간단CSS)
- 랭킹 목업구현(간단CSS)
- 반응형..너무 어렵다...
- 이전에 배운 css를 상기시켜 아직 익숙하지 않은 스타일드 컴포넌트까지 이용해 리액트에 적용시키고 반응형으로 만들어야한다는 점이 어려웠다. 말이 긴데.. 그냥 거의 익숙치않고 초면이라 어렵다고 보면될것 같다. 그래서 간단한 css를 적용시키는것만해도 시간이 걸렸다. 특히 반응형을 만드는 부분에서 시간이 걸렸는데.. 나의 경우에는 대부분 부모 컴포넌트에 넓이 값을 주어서 발생한 문제였다.
- 간단 목업을 만드는 과정을 통해 스타일드 컴포넌트가 좀 익숙해졌고 css도 큼지막히 알아야하는것들을 다시 숙지할 수 있었던 시간이었다. 앞으로 기능 구현하는 동안 틈틈히 css공부도 병행해야겠다는 생각이 들었다.
- display: flex (부모박스에서만 사용할 수 있다)
body{
height:1000vh (vh: 화면 크기에 따라 변한다. text-aligns 사용하려면 꼭 적용해주자)
margin:30px;
display: flex;
(주축)justify-content: center, flex-end, flex-start, space-evenly, space-around, space-between
(교차축-기본적으로 수직)align-items: center, flex-end, flex-start, stretch(div크기가 고정된 경우는 적용불가) body에 height를 적용해줘야 align-items가 가능하다.
justify-content, align-items를 이용해주고싶다면.. display:flex를 먼저 써야 나머지 속성 사용이 가능하다.
}
div {
width:50px;
height:50px;
background-color: bisque;
}
.tomato {
background-color: teal;
}
</style>
<body>
<div></div>
<div class='tomato'></div>
<div></div>
<div class='tomato'></div>
</body>