220401(css)

width:320px인 디바이스(갤럭시 s9+)

 

현재까지의 상황에서 어제 고민했던 부분에서 알게된 점을 얘기해 보려한다.

(아니 이렇게 캡쳐를 하니까 저기 동그라미 z-index:-1;안준게 눈에 보이네..)수정함

설명들 가운데 정렬하기 (내일하기)

1.무작정 부모에게 position:relative; 주지 않기

-이전에 저 설명 말풍선을 한번에 모아서 한 div에 넣었고, 디바이스의 화면크기를 늘렸더니 내가 원하는 위치에 오지 않았다. 아주 자유 분방하게 위치해있었다. 그것에 대해 고민이 많았는데, 버튼의 하위요소로 말풍선을 해놓고 js로 변수로 선언해서 한번에 띄워야하는건가 싶었다. 생각해보니 굳이 상위요소인 div에 relative를 주지 않고, wrap을 position:relative을 하면 위치에 벗어나지 않을 것 같았다.(버튼들도 상위요소에 relative를 지우고 wrap에 준다면 함께 움직일 수있음). 코드를 변경해 다시 짜보니 만족스러운 결과가 나왔다.

2. transform에서 rotate했을 경우에 눈에보이는 화면만 변경된 모양이고, 영역은 동일함.

- 온도계 버튼과 온도 range를 같은 left값을 주었음에도 불구하고 온도 range가 이상한 곳에 존재하길래 왜저러나 싶었더니, 영역은 그대로 가로모양이였다... flex(column)로 온도 슬라이더를 정렬해 놓아서 제일 가로길이가 긴 range의 크기에 맞게 영역이 설정되었기 때문에 그꼴이 난거였다....(orient는 비표준이란다..) 다음에 또 작성해야할 일이 생기면, 고려하면서 해야겠다.