스타일 단위 컨벤션 관련

[sykang013]

저번 프로젝트 때, 반응형 웹 개발시의 단위 사용에 대해 조언받았던 것이 아래 세 가지 사항입니다.

1)패딩, 마진, 폰트사이즈 같은것은 rem(16px를 베이스로)(em단위가 다루기는 더 힘들것.)
2)플렉서블한 것이 필요한 곳은 100분율 위주로 하되, 높이는 뷰포트 단위 섞어쓰기.
3)그리드 이용시는 백분율도 좋지만 권장은 프렉션.

---

이 세 가지 사항에서 조금 수정하여, 컨벤션을 정해보는게 어떨까요?(아래는 단순 제안으로, 확정 전 좀 더 조사가 필요합니다)

1)rem(16px기준)단위를 사용해야할 경우

• 패딩, 마진, 폰트사이즈

2)px을 사용해야할 경우

• 브라우저 창 크기에 상관없이 고정된 값이 필요할 때
• 이미지에 픽셀단위를 주지 마라
  • HTML에서는 img 요소에 단위를 생략하면 px로 계산해서 렌더링 합니다.
    그리고 해당 크기는 CSS에서는 단위를 붙여 다른 크기로 재설정할 수 있구요.
    또 HTML 표준 문법 관점에서도 단위를 생략하라고 권고하고 있습니다.

3)백분율을 사용해야할 경우

• 가로

4)뷰포트 단위를 사용해야할 경우

• 세로

5)사용하지 말기

• em단위, fr 단위
• 그리드 레이아웃

참고문서

@sykang013 @imironjin @guahyoung @senasoon @kyungseob7

[sykang013]

단위 컨벤션 관련 얘기는 3/14(화) 진행해도 좋을듯 합니다! 만약 의견 있으시다면 자유롭게 남겨주세요!

[sykang013]

데일리 스크럼때 얘기나눠보았으나 아직 확정하기에는 어렵다고 판단. 일단은 진행하면서 추후 논의하기로.

[sykang013]

[논의 필요]

*CSS는 캐스케이딩. 컴포넌트들은 상위 요소들의 영향을 받는다.
*CSS는 높이관련(?)은(?) 원하는대로의 구현이 어려우므로 JS 사용하거나 vh 사용.

• 📍미디어 쿼리 사용
  • 모바일이 디폴트
  • 태블릿 @media (min-width: 768px)
  • 데탑 @media (min-width: 1920px)
• 📍마진상쇄
  • [x ] flex 에서는 마진상쇄가 일어나지 않으니 고려안해도 됨.
  • [x ] flex가 아니라면 밑의 사항 지키기
    • 자식 요소는 margin-top 만 사용한다.
    • 부모 요소는 padding 으로 조절, margin 사용하지 않는다.
    • 빈 요소는 height , min-height , max-height 셋 중 하나 주기
• 📍컴포넌트 작동 테스트
  • 다른 사람의 모니터에서도 잘 돌아가는지 확인해보아야한다.(페어 프로그래밍?)
    • 스토리북을 사용한다면 위와 같은 과정 없이 개별적으로 확인 가능.
    • 목요일 1시까지 ui테스트에 집중해서 스토리북 사용해보기.
    • 스토리북 사용해야하니 타입스크립트 사용.
• 📍상황에 따른 적절한 단위 사용
  • rem 단위
    • 폰트사이즈, 마진, 패딩
    • 자주 쓰이는 rem 단위 시스템화(?)
  • px 단위
    • 브라우저 크기 상관없이 정확히 고정된 사이즈여야 할 때.
    • border-radius, border line 같은것들
  • 백분율(%) 단위
    • 가로 반응형 관련 사용(부모 요소의 크기에 영향을 받음)
    • 이미지(?)
      • 너비를 주고, 세로는 auto로 하여 종횡비를 맞춰 늘어나고 줄어들게 한다.
  • vh(viewport height) 단위
    • 세로 반응형 관련 사용( 실제로 보여지는 브라우저 화면에 영향을 받음)
• 📍float, flex, grid
  • 반응형 웹인 만큼 주 레이아웃은 flex로 처리한다.
  • position 사용은?
  • 제안: float는 RWD에서는 거의 사용을 하지 않는다고 하니, 애초에 사용지양을 하는것이 어떨까요? 만약 사용해야만 한다고 생각되면 미리 얘기를 나눠보구요.
  • 제안: 크로스 브라우징을 고려해보았을 때, grid는 사용을 지양하는것이 좋을듯 합니다.
    • 참고자료_크로스브라우징_flex
    • 참고자료_크로스브라우징_grid
• 📍global styles 적용 제안(참고링크)
  • 모든 요소를 border-box로
    • body, body::before, body::after, body *, body *::before, body *::after { box-sizing: border-box; }
  • 링크 스타일 없애는 CSS
    • a { color: inherit; text-decoration: none; }
  • 유연한 미디어
    • img { max-width: 100%; height: auto; }
    • video { width: 100%; height: auto; }
  • 반응형 iframe(?)
• 구글링 중 찾은 코드 컨벤션
  • 클래스101

[imironjin]

패딩, 마진, 폰트 사이즈 등 화면에 맞게 가변적으로 변해야 하는 것은 rem 으로 하는 것이 맞는 것 같고, border-radius, border 과 같은 가변적일 순 있지만, 보통 불변이기에 px 단위로 하는 것이 좋을 것 같습니다. Grid사용을 안해봐서 잘모르지만, Flex로 충분히 가능한 경우에는 Flex에 우선순위를 두는 것이 어떤가 싶습니다.

[senasoon]

magin collapsing에 대해 알아봤는데 아래 글을 참고하면 좋을 것 같습니다.

CSS 마진상쇄

위 글에 따르면 블록 요소의 상하 마진이 겹칠 때 마진상쇄가 일어납니다. 다음은 마진 상쇄가 일어나는 세가지 상황입니다.

마진 상쇄가 일어나는 상황

• 인접 형제 박스 간 상하 마진
• 빈 요소(높이 0)의 상하 마진
• 부모 상단/첫 번째 자식의 상단 마진, 부모 하단/마지막 자식의 하단 마진

마진 상쇄 특징

• block-level만 적용
• 박스가 position: absoulte일 경우 적용되지 않음
• 박스가 float일 때 적용되지 않음
• 박스가 flex or grid일 경우 내부 아이템 적용되지 않음

마진 상쇄 해결 방법 예시

• display: inline-block / flex / grid
• border
• padding

제 생각에는 자식 요소의 경우 margin-top 요소만 사용하고 부모의 경우 상하 모두 마진상쇄의 위험이 있으므로 패딩으로 조정하는 것이 좋을 것 같습니다.

빈 요소의 경우는 border, padding, inline content, height, min-height, max-height 중 하나가 설정되어 있다면 마진 상쇄가 일어나지 않는다고 합니다. 저희는 반응형 웹을 구현하고 있으니 height 쪽을 설정해도 좋을 것 같습니다.