span에 display: block줘서 text-align: right 된 부분 문의드려요

Question

안녕하세요 쌤, 몇가지 문의드려요. .notice_list { width : 90% ; float : left ; padding-top : 98px ; overflow : hidden ;} .notice_list ul {} .notice_list ul li { float : left ; width : 33.3333% ; padding-right : 50px ; box-sizing : border-box ; } .notice_list .data { display : block ; text-align : right ;} .data가 span인데 text-align: right이 되려면 블럭요소가 되어야하는게 맞나요? 보통은 부모한테 주면 인라인 자식들이 움직이던데 이부분은 자식이다 적용되면 안되니까 .data만 오른쪽으로 보내려는데 블락요소도 text-align이 되나해서요. 그리고 overflow: hidden을 플롯한 자식의 부모에 주는데 header파트에서 부모에게 안줘도 아무일이 없던데 그런경우도 있는건가요? 그리고 하도 줄상황이 많으니까 cf클래서를 만들어서 부모마다 다 붙이는것도 봤는게 그렇게 하는게 일반적인가요? 감사드립니다~ 초보라 계속 헷갈리는 부분이 많네요.ㅜㅜ

jyoung · Answer

Jennifer oh님 안녕하세요? span은 인라인요소이기때문에 block요소로 속성을 바꾸게 되면 text-align: right가 적용됩니다. block요소는 한줄을 꽉 채우는 속성이기때문에 그 안에서 정렬이 되는거지요~~ 그리고 header에 부모한테 안주는 이유는 height를 설정해놨기 때문에 자체적으로 높이가 지정되어 있어서 자식요소한테 float를 준다해도 높이값이 상실되지 않습니다~~~ 열심히 학습하시는 모습 보기 좋습니다^^ 언제든 공부하시면서 궁금하신점 있으면 질문주세요~~ 오늘도 좋은하루 되시구요^^ J.young드림