부스트코스 반응형 웹 tablet, mobile 강의 반추

앞서 pc버전에 이어 태블릿과 모바일 화면에 대응하는 반응형 웹 UI강의를 맞쳤고 배운 내용에 대해 반추하고자 정리함

1. 모바일 버전에서 메인 컨텐트 영역 float 해제 대신에 width: 100% 사용

내가 마크업을 할때에는 float: left속성을 해제하고 display: block으로 스타일링을 해 메인 요소들을 세로 1행으로 정렬하도록 했는데 굳이 그럴 필요없이 li태그에 width:100%을 해주고 자식 요소들에게도 width: 100%을 해주면 1행으로로 정렬된다.

2. 2행으로로 되 있던 1행 2열 요소를 으로 정렬 할 경우
   나는 display: inline-block을 이용해서 1행 2열정렬 한 후 width등의 속성으로 스타일링 했는데 부모요소에 display: table, table-layout: fixed, 자식요소에 display: table-cell 이용해 자식요소에 갯수가 몇개던 크기를 고정으로 나눠 줄 수 있다. 그 후 특정 요소에 width값을 주어 자식요소의 너비에 변화를 줄 수 있다.

https://www.biew.co.kr/entry/웹퍼블리셔가-알고있어야-할-display-table-속성

이 분의 블로그를 참고하였음

3. 다른데서 정의 한 것 초기화 후 재정의하기.

.content .inner{
        display: table;
        table-layout: fixed;
        margin: 0;
        width: 100%;
        border: none;
        border-bottom: 1px solid #000;
        
    }

예를들면 위와같이 border를 초기화 한 후 border-bottom을 재정의 한다. 다른데서 정의한 css 스타일링 대신에 현재 미디어쿼리에 맞게 새로 스타일링을 하려 할 경우 다른데서 정의한 필요없는 속성은 초기화하고 필요한 속성은 상속받도록 한다. 그리고 새로운 스타일링을 추가한다.