편집 기록

안녕하세요 야무님?

프론트엔드 개발 강의를 듣고 있는 박상준입니다.

우선 강의 덕분에 많이 배우고 있어서 감사하다는 말씀드리고 싶습니다.

감사합니다!

다름이 아니라 강의를 들으면서 실무에서 다음과 같은 사항을

어떻게 처리하는게 좋을지 궁금해서 질문남깁니다.

가. 크로스 브라우징

브라우저마다 엔진이 달라서 같은 html, css를 다르게 보여주는 경우가 많아서 이 때 브라우저 별 핵을 이용해서 동일하게 맞춰 주려고 하는데 이런식으로 처리하는게 맞는지 궁금합니다. 예를 들면 flex를 사용할 때 IE 11, 10에서 부분지원으로 깨지는 경우가 종종 발생해서 _:-ms-lang(x), 과 같은 핵을 이용해 조정하거나 margin, padding값이 상이해서 조정하는 경우입니다.

나. CSS모듈화

bootstrap과 같이 많이 사용할 CSS를 모듈로 만들어서 사용하면 효율적인 측면에서 더 좋을 것 같다는 생각이 있는데 네이밍, 어떤 경우 모듈로 사용해야 좋을지 아직 정확히 모르겠어서 야무님은 어떤생각이시고 어떻게 사용하시는지 알고 싶습니다. 또 모듈로 적용하고 싶으나 디자인 가이드라인이 늦게 나오고 개별 페이지 디자인만 먼저 나오는 상황에서는 어떻게 하는게 좋을 지 조언 부탁드립니다.

다. 반응형

 1-1 . 폰트
          폰트 같은 경우 고정된 px을 이용하기 보다 rem / em 과 같은 것을 이용하는 것이 좋다고 
          들었는데 rem을 이용한다면 중단점별 :root의 폰트 크기는 어떻게 조절하는 것이 좋을까
          요?

1-2 . 이미지
         디바이스 별로 밀도가 다르다는 말씀을 해주셨는데 그럼 만약 2,3,4배 밀도의 휴대폰을 각
         각 대응하려면 img src는 하나의 이미지만 연결되어있기때문에 대응을 못할 것 같은 생각
         이 드는데 그럼 @media 를 이용해서 resolution 별 background-img를 정해주는 방식으로 
         하면 될까요? 아니면 더 좋은 방법이 있을까요?

1-3. svg 사용시 
        디바이스 별 대응이 어려워짐에 따라서 실제 사진을 제외하고 svg로 만드는 것이 좋다고 말
        씀하셨는데 그럼 png처럼 네트워크 통신을 최소화하기 위한 방법인 이미지 스프라이트 기 
        법을 적용 할 수 있을까요? 어떻게 생각하시나요?

1-4. css 단위 사용 / Fluid 디자인
        주로 px을 사용하다보니 비율을 이용한 디자인에 대한 이해가 아직 부족한 것 같습니다.
        만약 다음과 같은 박스 모델이 있다면,

        :root {
            font-size:62.5%;
        }

        .containter {
            width : 100%; // 100vw 도 가능 할까요?
            max-width : 120rem;
            margin: 0 atuo;
            height : 500px; // px 대신 vh를 쓴다면 500/1200 이런식으로 계산해야할까요?
        }

       .item {
            width: 33.33%; // 33.33vw 일까요?
            height: 100%;
        }

       .desc {
            width: 100%;
            height: 50%;
            box-sizing : border-box;
            padding: 20px; // px로 주로 사용했는데 rem으로 고친다면 2rem 으로 하면 될까요?
        }

        강의 예제에서 vw, vh를 종종 사용하셨는데 관련한 css 단위 강의가 추가되었으면 좋겠습니
        다.(ex, ch 등등...) 

아직 모르는게 많다고 느껴서 그런지 궁금한 점이 많았네요

질문이 길어져서 죄송합니다!