item p span 에 float 주신것과 .progress 에 대한 질문입니다.

Question

안녕하세요. item p span 에 float left 와 right 주신것과 .progress에 대한 질문입니다. item p 에 .item p { display: flex; justify-content: space-between; align-items: center; } 하면 span 에 float left right 를 한것과 같은 레이아웃이 만들어지긴 하는데, float 를 사용하신것은 혹시 크로스브라우징 때문에 사용하신걸까요? can i use 를 살펴보면 메이져 브라우저들은 거의 flex 를 지원하는데 IE 에서는 지원을 안하는 버전도 있고, prefix 를 사용해야 하는 버전도 있더라구요. 크로스브라우징을 생각하면 flex 보다 float 를 사용하는것이 맞긴하지만, 이미 서비스가 종료된 IE까지 생각해야 하는것이 맞는것인지 고민이 되네요... html tag 중에 progress 라는 tag 가 있는것으로 알고 있습니다. progress 라는 태그 대신에 div 를 사용하신 이유가 있을까요?혹시 커스텀 css 를 입히기 힘든 태그일까요...? input type=checkbox 같은 경우도 css 를 입히기 힘들기 때문에 div 같은 영역을 커스텀 입힌다고 하더라구요. 위같은 경우들처럼 input type checkbox 나 <progess> 를 사용하지 않고 div 같은 영역으로 커스텀을 입히면 웹접근성에 저해되지는 않나요?? 웹접근성이나 시맨틱 태그때문에 태그 하나 사용하는거에 고민이 되네요....

코딩웍스(Coding Works) · Answer

답변1) IE에서 flex는 부분지원합니다. 그런데 요즘 IE까지 고려하는 퍼블리싱은 특별한 경우를 제외하고는 하지 않는걸로 알고 있습니다. IE는 2022년 6월 15일부터 공식적으로 지원하지 않습니다. 결론은 IE를 고려해서 float만 사용해서 배치할지 고민할 필요는 없다고 봅니다. IE 지원 종료는 아래 블로그를 보시면 참고가 됩니다. 2022년 6월 15일 Internet Explorer 11 공식 종료 : https://www.inflearn.com/blogs/898 답변2) 를 사용해도 됩니다. 하지만 현재 예제는 CSS 애니메이션을 학습하는 예제라서 굳이 를 사용하지는 않았습니다. 웹접근성에 대한 부분도 꽤나 전문적인 부분입니다. 나중에 실무에서 웹접근성을 고려해야 하는 특별한 경우가 되면 그때 학습하시면 될 것 같습니다. 지금은 웹표준에 관련된 부분만 신경쓰세요.