220330(css, html 혼자 깨달은 점)

우선 혼자 수정하고있는 Mycloset를 반응형 사이트로 만들어 보고 싶었다. 모바일 first로 제작하고 싶었고, 그래서 우선 width:400px로 준 다음에 하고 있었는데 그렇게 한 것이 오만이자 아주 큰 패착이었다.

사람들이 css가 JS보다 어려워요 하길래 난 재밌는데..ㅎ.ㅎ.ㅎ.ㅎ.ㅎ. 했는데 이제서야 알게 되었다. 고려 사항이 너무나도 많구나 쉽게 얕봤구나 생각이 들었다. 

깨달은 점

1.width를 따로 주지않고 개발자 도구에서 반응형으로 보기

-width:400px를 주고 시작하니까, iphone SE인 경우 가로 너비가 320px 이기 때문에 좌우 40px씩 안보인다. 

 

2. padding, 사진 단위를 상대적단위로 바꾸고, :root에 따로 설정하기

- 나중을 고려해서 미디어 쿼리에서 변경 할 경우 하나하나 변경하는 것이 조금 복잡하니 지정된 값을 조금 세세하게 설정하는 것이 나을 것 같다.

3. position값 줄 때 사람들마다 보는 디바이스가 다름을 인지하기.

-그냥 내 화면에서 보다가 어쩌다 반응형으로 돌려보니 아주 개판이었다. 4번에서 얘기하겠지만, html구조을 고려해야 한다.

4. html 구조를 생각하며 position의 위치값 주기

- 이 버튼이 뭔지 설명하는 말풍선을  모달창처럼 만들고 싶었기에, 모달창 만들듯이 그냥 한번에 몰아서 만들면 되겠지, 하고 css로 예쁘게 만들어서 배치했다. 그랬더니 width값은 400px로 고정인 상태에서 width가 늘어나고, height가 늘어나니 말풍선이 이상한 곳에 가 있었다. position은 position값이 주어진 부모(혹은조상)을 기준으로 값이 주어지기 때문에 설명하는 말풍선들은 버튼들을 부모로 해야겠다 라는 생각이들었다. (띄우는건 JS로?) 네이버 쇼핑에 설명하는 버튼이 있었던거로 기억하는데 구조를 어떻게 했는지 한번 봐야겠다.

 

 

우선 width 부터 400px이 아닌 max-width:1100px정도로 변경을 하고 만드는 것이 나을 것 같다....

증말 답답하군^^... 유지보수를 위해 내가 힘들더라도 깔끔하게정리하기!