CSS

브라우저는 CSS 규칙의 특이성에 따라 요소에 어떤 스타일을 표시할지 결정합니다. 브라우저가 특정 요소와 일치하는 규칙을 이미 결정했다고 가정합니다. 일치하는 규칙 중에서 다음과 같은 기준으로 각 규칙에 대해 쉼표로 구분된 4개의 값인 'a, b, c, d'의 특이성이 계산됩니다:

1. 'a'는 인라인 스타일이 사용되는지 여부입니다. 속성 선언이 요소에 대한 인라인 스타일이면 'a'는 1이고, 그렇지 않으면 0입니다.
2. 'b'는 ID 선택자의 수입니다.
3. 'c'는 클래스, 속성 및 가상 클래스 선택자의 수입니다.
4. 'd'는 태그 및 가상 요소 선택자의 수입니다.

결과 특이성은 점수가 아니라 열별로 비교할 수 있는 값의 행렬입니다. 어떤 선택자가 가장 높은 특이성을 갖는지 결정하기 위해 선택자를 비교할 때 왼쪽에서 오른쪽으로 보고 각 열에서 가장 높은 값을 비교합니다. 따라서 'b' 열의 값은 'c' 및 'd' 열의 값을 무엇이든 상관없이 재정의합니다. 예를 들어, '0,1,0,0'의 특이성은 '0,0,10,10'보다 큽니다.

특이성이 동일한 경우: 최신 규칙이 중요합니다. 스타일시트(내부 또는 외부와 상관없이)에 동일한 규칙을 두 번 작성한 경우, 스타일시트의 아래쪽 규칙이 스타일을 적용할 요소에 더 가깝기 때문에 더 특이한 것으로 간주되어 적용됩니다.

필요한 경우 쉽게 재정의할 수 있도록 특이성이 낮은 CSS 규칙을 작성할 것입니다. CSS UI 컴포넌트 라이브러리 코드를 작성할 때는 라이브러리 사용자가 특이성을 높이기 위해 복잡한 CSS 규칙을 사용하거나 '!important'를 사용하지 않고도 재정의할 수 있도록 특이성이 낮아야 합니다.

• 재설정(Resetting) - 재설정은 요소에 대한 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예를 들어, 모든 요소의 'margin', 'padding', 'font-size'는 동일하게 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 다시 선언해야 합니다.
• 정규화(Normalizing) - 정규화는 모든 것을 '스타일 해제'하기보다는 유용한 기본 스타일을 보존합니다. 또한 일반적인 브라우저 종속성에 대한 버그를 수정합니다.

매우 사용자 정의되거나 파격적인 사이트 디자인이 있어 많은 자체 스타일링을 해야 하고 어떤 기본 스타일도 보존할 필요가 없을 때 재설정을 선택할 것입니다.

Float은 CSS 위치 지정 속성입니다. float된 요소는 페이지의 흐름에 계속 남아 있으며, 'position: absolute' 요소와 달리 다른 요소의 위치에 영향을 미칩니다(예: 텍스트가 float된 요소 주위로 흐름). 'position: absolute' 요소는 페이지 흐름에서 제거됩니다.

CSS 'clear' 속성은 'left'/'right'/'both' float된 요소 아래에 위치하도록 사용할 수 있습니다.

부모 요소에 float된 요소만 포함되어 있으면 높이가 0으로 축소됩니다. 컨테이너 내부의 float된 요소 뒤에 float을 해제하고 컨테이너 닫기 전에 해제하여 수정할 수 있습니다.

'.clearfix' 해킹은 영리한 CSS 가상 선택자('::after')를 사용하여 float을 해제합니다. 부모에 오버플로우를 설정하는 대신 추가 클래스 'clearfix'를 적용합니다. 그런 다음 이 CSS를 적용합니다:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

또는 부모 요소에 'overflow: auto' 또는 'overflow: hidden' 속성을 지정하여 자식 내부에서 새로운 블록 서식 컨텍스트를 설정하고 자식을 포함하도록 확장할 수 있습니다.

CSS의 'z-index' 속성은 겹치는 요소의 수직 스태킹 순서를 제어합니다. 'z-index'는 'static'이 아닌 'position' 값을 가진 요소에만 영향을 미칩니다.

'z-index' 값이 없으면 요소는 DOM에 나타나는 순서대로 스택됩니다(동일한 계층 수준에서 가장 아래에 있는 요소가 맨 위에 나타남). 비정적 위치 지정 요소(및 해당 자식)는 HTML 계층 구조에 관계없이 항상 기본 정적 위치 지정 요소 위에 나타납니다.

스태킹 컨텍스트는 일련의 레이어를 포함하는 요소입니다. 로컬 스태킹 컨텍스트 내에서 자식의 'z-index' 값은 문서 루트가 아닌 해당 요소에 상대적으로 설정됩니다. 해당 컨텍스트 외부의 레이어, 즉 로컬 스태킹 컨텍스트의 형제 요소는 그 안에 있는 레이어 사이에 위치할 수 없습니다. 요소 B가 요소 A 위에 위치하면 요소 A의 자식 요소인 요소 C는 요소 C의 'z-index'가 요소 B보다 높더라도 요소 B보다 높을 수 없습니다.

각 스태킹 컨텍스트는 자체 포함되어 있습니다. 요소의 내용이 스택된 후 전체 요소는 부모 스태킹 컨텍스트의 스태킹 순서에서 고려됩니다. 'opacity'가 1 미만, 'filter'가 'none'이 아닌 경우, 'transform'이 'none'이 아닌 경우와 같은 몇 가지 CSS 속성은 새로운 스태킹 컨텍스트를 트리거합니다.

_참고: 요소가 스태킹 컨텍스트를 생성하는 정확한 자격은 이 긴 [규칙] 세트에 나열되어 있습니다.

BFC(블록 서식 컨텍스트)는 블록 상자가 배치되는 웹 페이지의 시각적 CSS 렌더링의 일부입니다. float, 절대 위치 지정 요소, 'inline-blocks', 'table-cells', 'table-caption' 및 'visible'이 아닌 'overflow' 값을 가진 요소(해당 값이 뷰포트로 전파된 경우는 제외)는 새로운 블록 서식 컨텍스트를 설정합니다.

블록 서식 컨텍스트를 설정하는 방법을 아는 것이 중요합니다. 그렇게 하지 않으면 포함 상자가 [float된 자식을 포함]하지 않기 때문입니다. 이는 마진 축소와 유사하지만 전체 상자가 이상한 방식으로 축소되는 것을 발견할 수 있어 더 교활합니다.

BFC는 다음 조건 중 하나 이상을 만족하는 HTML 상자입니다:

• 'float' 값이 'none'이 아닙니다.
• 'position' 값이 'static'도 'relative'도 아닙니다.
• 'display' 값이 'table-cell', 'table-caption', 'inline-block', 'flex', 또는 'inline-flex', 'grid', 또는 'inline-grid'입니다.
• 'overflow' 값이 'visible'이 아닙니다.

BFC에서 각 상자의 왼쪽 바깥쪽 가장자리는 포함 블록의 왼쪽 가장자리에 닿습니다(오른쪽에서 왼쪽으로 서식 지정의 경우 오른쪽 가장자리가 닿음).

BFC에서 인접한 블록 수준 상자 간의 수직 마진은 축소됩니다. [마진 축소]에 대해 자세히 읽어보세요.

• 빈 'div' 메서드 - '<div style="clear:both;"></div>'.
• clearfix 메서드 - 위에서 설명한 '.clearfix' 클래스를 참조하세요.
• 'overflow: auto' 또는 'overflow: hidden' 메서드 - 부모가 새로운 블록 서식 컨텍스트를 설정하고 float된 자식을 포함하도록 확장합니다.

큰 프로젝트에서는 유틸리티 '.clearfix' 클래스를 작성하고 필요한 곳에 사용할 것입니다. 'overflow: hidden'은 자식이 부모보다 높으면 자식을 잘라낼 수 있으므로 그다지 이상적이지 않습니다.

CSS 스프라이트는 여러 이미지를 하나의 더 큰 이미지로 결합합니다. 아이콘에 흔히 사용되는 기술입니다(Gmail이 사용). 구현 방법:

1. 여러 이미지를 하나로 묶고 적절한 CSS를 생성하는 스프라이트 생성기를 사용합니다.
2. 각 이미지에는 'background-image', 'background-position', 'background-size' 속성이 정의된 해당 CSS 클래스가 있습니다.
3. 해당 이미지를 사용하려면 요소에 해당 클래스를 추가합니다.

장점:

• 여러 이미지에 대한 HTTP 요청 수를 줄입니다(스프라이트시트당 단일 요청만 필요). 그러나 HTTP2를 사용하면 여러 이미지를 로드하는 것이 더 이상 큰 문제가 아닙니다.
• ':hover' 가상 상태에만 나타나는 이미지와 같이 필요할 때까지 다운로드되지 않는 자산의 고급 다운로드. 깜박임이 보이지 않습니다.

• 문제를 식별하고 해당 브라우저를 파악한 후, 해당 브라우저가 사용될 때만 로드되는 별도의 스타일 시트를 사용합니다. 이 기술은 서버 측 렌더링이 필요합니다.
• Bootstrap과 같이 이러한 스타일링 문제를 이미 처리하는 라이브러리를 사용합니다.
• 'autoprefixer'를 사용하여 코드에 공급업체 접두사를 자동으로 추가합니다.
• Reset CSS 또는 Normalize.css를 사용합니다.
• Postcss(또는 유사한 트랜스파일링 라이브러리)를 사용하는 경우, 최신 CSS 구문(및 W3C 제안)을 사용할 수 있도록 선택할 수 있는 플러그인이 있을 수 있으며, 해당 코드 섹션을 사용한 대상에서 작동하는 해당 안전한 코드로 변환합니다.

• 점진적 성능 저하(Graceful degradation) - 최신 브라우저용 애플리케이션을 구축하면서도 이전 브라우저에서도 계속 작동하도록 하는 관행.
• 점진적 향상(Progressive enhancement) - 기본 수준의 사용자 경험을 위해 애플리케이션을 구축하지만, 브라우저가 지원할 때 기능 향상을 추가하는 관행.
• 기능 지원 확인을 위해 [caniuse.com]을 사용합니다.
• 자동 공급업체 접두사 삽입을 위한 Autoprefixer.
• [Modernizr]를 사용한 기능 감지.
• CSS 기능 쿼리 [@support] 사용

이러한 기술은 접근성(a11y)과 관련이 있습니다.

• 'width: 0; height: 0'. 요소가 화면에서 공간을 전혀 차지하지 않도록 하여 표시되지 않도록 합니다.
• 'position: absolute; left: -99999px'. 화면 밖으로 위치시킵니다.
• 'text-indent: -9999px'. 이는 'block' 요소 내의 텍스트에만 작동합니다. 이는 널리 사용되는 유명한 트릭이지만, 성능 문제와 같은 [몇 가지 단점]이 있으므로 대신 'text-indent: 100%'를 사용하는 것을 고려할 수 있습니다.
• 메타 태그. 예를 들어 Schema.org, RDF 및 JSON-LD를 사용합니다.
• WAI-ARIA. 웹 페이지의 접근성을 높이는 방법을 지정하는 W3C 기술 사양입니다.

WAI-ARIA가 이상적인 솔루션이더라도, 가장 적은 주의 사항이 있고 대부분의 요소에 작동하며 쉬운 기술이기 때문에 'absolute' 위치 지정 방식을 선택할 것입니다.

Flex가 인기를 얻기 전(2014년경)에는 float 기반 그리드 시스템이 가장 안정적이었습니다. 왜냐하면 다른 기존 시스템(flex, grid) 중에서 브라우저 지원이 가장 많았기 때문입니다. Bootstrap은 Bootstrap 4에서 flex 기반 방식으로 전환하기 전까지 float 방식을 사용했습니다. 현재(2020년) Flex는 그리드 시스템 구축에 권장되는 방식이며 [괜찮은 브라우저 지원]을 제공합니다.

모험을 좋아하는 사람들은 새로운 'grid' 속성을 사용하는 [CSS Grid Layout]을 살펴볼 수 있습니다. 이는 그리드 레이아웃 구축에 flex보다 훨씬 뛰어나며 미래의 사실상 표준이 될 것입니다.

네. 예를 들어, 특정 중단점 이상에서 스택된 필 내비게이션을 고정 하단 탭 내비게이션으로 변환하는 것입니다.

네, 인라인 CSS, 임베디드 CSS 섹션 또는 외부 CSS 파일을 사용하여 도형을 색칠하는 여러 가지 방법이 있습니다(객체에 속성 지정 포함). 웹에서 찾을 수 있는 대부분의 SVG는 인라인 CSS를 사용하지만, 각 유형과 관련된 장단점이 있습니다.

기본적인 색칠은 노드에 두 가지 속성을 설정하여 수행할 수 있습니다: 'fill' 및 'stroke'. 'fill'은 객체 내부의 색을 설정하고 'stroke'는 객체 주위에 그려진 선의 색을 설정합니다. HTML에서 사용하는 것과 동일한 CSS 색상 명명 규칙을 사용할 수 있습니다. 예를 들어 색상 이름('red'), RGB 값('rgb(255,0,0)'), Hex 값, RGBA 값 등을 사용할 수 있습니다.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

위의 'fill="purple"'은 _표현 속성_의 예입니다. 흥미롭게도 'style="fill: purple"'과 같은 인라인 스타일(속성이기도 함)과는 달리, 표현 속성은 스타일시트에 정의된 CSS 스타일에 의해 [재정의될 수 있습니다]. 따라서 'svg { fill: blue; }'와 같은 작업을 수행하면 우리가 정의한 보라색 채우기를 재정의합니다.

네, @media 속성에는 4가지 유형이 있습니다(screen 포함):

• 'all' - 모든 미디어 유형 장치용
• 'print' - 프린터용
• 'speech' - 페이지를 소리 내어 '읽는' 스크린 리더용
• 'screen' - 컴퓨터 화면, 태블릿, 스마트폰 등용

다음은 'print' 미디어 유형 사용 예시입니다:

@media print {
  body {
    color: black;
  }
}

첫째, 브라우저가 선택자를 오른쪽(키 선택자)에서 왼쪽으로 일치시킨다는 점을 이해해야 합니다. 브라우저는 키 선택자에 따라 DOM에서 요소를 필터링하고 부모 요소를 거슬러 올라가 일치하는지 확인합니다. 선택자 체인의 길이가 짧을수록 브라우저가 해당 요소가 선택자와 일치하는지 더 빨리 결정할 수 있습니다. 따라서 태그 및 유니버설 선택자와 같은 키 선택자는 피하십시오. 이러한 선택자는 많은 요소와 일치하며 브라우저가 부모가 일치하는지 결정하는 데 더 많은 작업을 해야 합니다.

[BEM(블록 요소 수정자)] 방법론은 모든 것이 단일 클래스를 가지며, 계층 구조가 필요한 경우 해당 클래스 이름에 포함되도록 권장합니다. 이는 자연스럽게 선택자를 효율적이고 쉽게 재정의할 수 있도록 합니다.

리플로우, 리페인트 및 합성(compositing)을 [트리거]하는 CSS 속성에 유의하십시오. 가능한 한 레이아웃을 변경하는 스타일(리플로우 트리거) 작성을 피하십시오.

장점:

• CSS를 더 쉽게 유지 관리할 수 있습니다.
• 중첩 선택자를 쉽게 작성할 수 있습니다.
• 일관된 테마를 위한 변수. 다른 프로젝트 간에 테마 파일을 공유할 수 있습니다.
• 반복되는 CSS를 생성하는 Mixin.
• 루프, 목록 및 맵과 같은 Sass 기능은 구성을 더 쉽고 간결하게 만들 수 있습니다.
• 코드를 여러 파일로 분할. CSS 파일도 분할할 수 있지만, 그렇게 하면 각 CSS 파일을 다운로드하기 위해 HTTP 요청이 필요합니다.

단점:

• 전처리를 위한 도구가 필요합니다. 재컴파일 시간이 느릴 수 있습니다.
• 현재 및 잠재적으로 사용 가능한 CSS를 작성하지 않음. 예를 들어, [webpack]과 함께 [postcss-loader]와 같은 것을 사용하면 잠재적으로 미래 호환 가능한 CSS를 작성할 수 있으므로 Sass 변수 대신 CSS 변수와 같은 것을 사용할 수 있습니다. 따라서 표준화되면 보상을 받을 수 있는 새로운 기술을 배우는 것입니다.

좋았던 점:

• 주로 위에서 언급한 장점들.
• 자바스크립트로 작성되는 코드가 적어서 Node와 잘 어울립니다.

싫었던 점:

• 저는 node-sass를 통해 Sass를 사용하는데, 이것은 C++로 작성된 LibSass의 바인딩입니다. 노드 버전을 전환할 때마다 자주 재컴파일해야 합니다.
• Less에서 변수 이름은 @로 시작하는데, 이는 @media, @import, @font-face 규칙과 같은 기본 CSS 키워드와 혼동될 수 있습니다.

@font-face를 사용하고 다양한 font-weight에 대한 font-family를 정의합니다.

이 부분은 위에서 효율적인 CSS 작성에 대한 내용과 관련이 있습니다. 브라우저는 선택자를 오른쪽(키 선택자)에서 왼쪽으로 일치시킵니다. 브라우저는 키 선택자에 따라 DOM에서 요소를 필터링하고 부모 요소를 거슬러 올라가 일치하는지 확인합니다. 선택자 체인의 길이가 짧을수록 브라우저가 해당 요소가 선택자와 일치하는지 더 빨리 결정할 수 있습니다.

예를 들어 'p span' 선택자의 경우, 브라우저는 먼저 모든 '<span>' 요소를 찾고 해당 부모를 따라 루트까지 거슬러 올라가 '<p>' 요소를 찾습니다. 특정 '<span>'에 대해 '<p>'를 찾자마자 '<span>'가 일치한다는 것을 알고 일치 검색을 중지할 수 있습니다.

CSS 가상 요소는 선택자에 추가되는 키워드로, 선택한 요소의 특정 부분을 스타일링할 수 있게 해줍니다. 장식용('first-line', ':first-letter') 또는 마크업을 수정하지 않고 마크업에 요소를 추가하는 데 사용될 수 있습니다('content: ...'와 결합된 ':before', ':after').

• ':first-line' 및 ':first-letter'는 텍스트를 장식하는 데 사용할 수 있습니다.
• 위에서 보여준 '.clearfix' 해킹에서 'clear: both'와 함께 제로 스페이스 요소를 추가하는 데 사용됩니다.
• 툴팁의 삼각형 화살표는 ':before' 및 ':after'를 사용합니다. 삼각형은 스타일링의 일부로 간주되고 실제 DOM이 아니기 때문에 관심사 분리를 장려합니다.

CSS 박스 모델은 문서 트리에 있는 요소에 대해 생성되고 시각적 서식 모델에 따라 배치되는 직사각형 상자를 설명합니다. 각 상자에는 내용 영역(예: 텍스트, 이미지 등)과 선택적 주변 'padding', 'border', 'margin' 영역이 있습니다.

CSS 박스 모델은 다음을 계산하는 역할을 합니다:

• 블록 요소가 차지하는 공간의 양.
• 테두리 및/또는 마진이 겹치거나 축소되는지 여부.
• 상자의 크기.

박스 모델은 다음 규칙을 따릅니다:

• 블록 요소의 크기는 'width', 'height', 'padding', 'border' 및 'margin'에 의해 계산됩니다.
• 'height'가 지정되지 않으면 블록 요소는 포함하는 내용의 높이와 'padding'만큼 높이가 됩니다(float이 있는 경우는 제외).
• 'width'가 지정되지 않으면 float되지 않은 블록 요소는 부모의 너비에서 'padding'을 뺀 만큼 확장됩니다.
• 요소의 'height'는 내용의 'height'에 의해 계산됩니다.
• 요소의 'width'는 내용의 'width'에 의해 계산됩니다.
• 기본적으로 'padding'과 'border'는 요소의 'width'와 'height'의 일부가 아닙니다.

• 기본적으로 요소에는 'box-sizing: content-box'가 적용되어 콘텐츠 크기만 고려됩니다.
• 'box-sizing: border-box'는 요소의 'width'와 'height'가 계산되는 방식을 변경하며, 'border'와 'padding'도 계산에 포함됩니다.
• 이제 요소의 'height'는 콘텐츠의 'height' + 수직 'padding' + 수직 'border' 너비로 계산됩니다.
• 이제 요소의 'width'는 콘텐츠의 'width' + 수평 'padding' + 수평 'border' 너비로 계산됩니다.
• 'padding'과 'border'를 박스 모델의 일부로 고려하는 것이 디자이너가 그리드에서 콘텐츠를 실제로 상상하는 방식과 더 잘 어울립니다.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | 설명 | | :-- | :-- | | none | 요소를 표시하지 않습니다(요소는 더 이상 문서의 레이아웃에 영향을 미치지 않습니다). 모든 자식 요소도 더 이상 표시되지 않습니다. 문서는 요소가 문서 트리에 없는 것처럼 렌더링됩니다 | | block | 요소는 블록 방향(일반적으로 수평)에서 전체 줄을 소비합니다 | | inline | 요소가 서로 옆에 배치될 수 있습니다 | | inline-block | inline과 유사하지만 width 및 height 설정과 같은 일부 block 속성을 허용합니다 | | table | <table> 요소처럼 동작합니다 | | table-row | <tr> 요소처럼 동작합니다 | | table-cell | <td> 요소처럼 동작합니다 | | list-item | <li> 요소처럼 동작하여 list-style-type 및 list-style-position을 정의할 수 있습니다 |

좋은 측정을 위해 block과의 비교도 포함하겠습니다.

| | block | inline-block | inline | | --- | --- | --- | --- | | 크기 | 부모 컨테이너의 너비를 채웁니다. | 내용에 따라 다릅니다. | 내용에 따라 다릅니다. | | 위치 | 새 줄에서 시작하며 옆에 HTML 요소를 허용하지 않습니다 (float을 추가하는 경우 제외) | 다른 내용과 함께 흐르며 옆에 다른 요소를 허용합니다. | 다른 내용과 함께 흐르며 옆에 다른 요소를 허용합니다. | | width 및 height 지정 가능 여부 | 예 | 예 | 아니요. 설정되어도 무시됩니다. | | vertical-align으로 정렬 가능 여부 | 아니요 | 예 | 예 | | 여백 및 패딩 | 모든 측면이 존중됩니다. | 모든 측면이 존중됩니다. | 수평 측면만 존중됩니다. 수직 측면은 지정해도 레이아웃에 영향을 미치지 않습니다. 차지하는 수직 공간은 line-height에 따라 달라지지만, border 및 padding은 시각적으로 내용 주위에 나타납니다. | | Float | - | - | 수직 여백 및 패딩을 설정할 수 있는 block 요소처럼 됩니다. |

위치 지정된 요소는 계산된 'position' 속성이 'relative', 'absolute', 'fixed' 또는 'sticky'인 요소입니다.

• static - 기본 위치; 요소는 일반적으로 그러하듯이 페이지에 흐르게 됩니다. 'top', 'right', 'bottom', 'left', 'z-index' 속성은 적용되지 않습니다.
• relative - 요소의 위치는 자체적으로 조정되며, 레이아웃은 변경되지 않고(따라서 요소가 위치 지정되지 않았을 경우 있었을 공간에 간격을 남깁니다).
• absolute - 요소는 페이지의 흐름에서 제거되고, 가장 가까운 위치 지정된 조상(있는 경우)에 상대적으로 지정된 위치에 배치되거나, 그렇지 않으면 초기 포함 블록에 상대적으로 배치됩니다. 절대 위치 지정된 상자는 마진을 가질 수 있으며, 다른 마진과 축소되지 않습니다. 이러한 요소는 다른 요소의 위치에 영향을 미치지 않습니다.
• fixed - 요소는 페이지의 흐름에서 제거되고, 뷰포트에 상대적으로 지정된 위치에 배치되며, 스크롤할 때 움직이지 않습니다.
• sticky - Sticky 위치 지정은 상대 및 고정 위치 지정의 하이브리드입니다. 요소는 지정된 임계값을 넘을 때까지 'relative'로 처리된 다음, 'fixed'로 처리됩니다.

• 부트스트랩 - 출시 주기가 느립니다. 부트스트랩 4는 거의 2년 동안 알파 버전이었습니다. 널리 사용되는 스피너 버튼 컴포넌트를 추가합니다.
• 시맨틱 UI - 소스 코드 구조 때문에 테마 사용자 정의를 이해하기가 매우 어렵습니다. 기존의 테마 시스템은 사용자 정의하기가 어렵습니다. 공급업체 라이브러리 내에 하드코딩된 구성 경로. 부트스트랩과는 달리 변수를 재정의하기 위해 잘 설계되지 않았습니다.
• 불마 - 비시맨틱하고 불필요한 클래스와 마크업이 많이 필요합니다. 이전 버전과 호환되지 않습니다. 버전 업그레이드는 앱을 미묘하게 손상시킵니다.

네. Flexbox는 주로 1차원 레이아웃에 사용되는 반면 Grid는 2차원 레이아웃에 사용됩니다.

Flexbox는 컨테이너 내 요소의 수직 중앙 정렬, 고정 푸터 등 CSS의 많은 일반적인 문제를 해결합니다. Bootstrap과 Bulma는 Flexbox를 기반으로 하며, 요즘에는 레이아웃을 생성하는 데 권장되는 방법일 것입니다. 이전에 Flexbox를 사용해 보았지만 'flex-grow'를 사용하는 데 브라우저 호환성 문제(Safari)가 발생하여 'inline-blocks'와 수학을 사용하여 너비를 백분율로 계산하도록 코드를 다시 작성해야 했습니다. 좋은 경험은 아니었습니다.

Grid는 그리드 기반 레이아웃을 생성하는 데 가장 직관적인 방법이지만(확실히!), 현재 브라우저 지원이 광범위하지 않습니다.

이 두 가지 접근 방식은 서로 배타적이지 않다는 점을 기억하세요.

웹사이트를 반응형으로 만든다는 것은 특정 요소가 장치의 화면 크기(일반적으로 뷰포트 너비)에 따라 크기나 다른 기능을 조정하여 반응한다는 의미입니다. 이는 CSS 미디어 쿼리를 통해 이루어지며, 예를 들어 작은 장치에서는 글꼴 크기를 작게 만드는 방식입니다.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

모바일 우선 전략 또한 반응형이지만, 모바일 장치에 대한 모든 스타일을 기본으로 정의하고 나중에 다른 장치에 대한 특정 반응형 규칙만 추가해야 한다고 동의합니다. 이전 예시를 따르면:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

모바일 우선 전략에는 두 가지 주요 장점이 있습니다:

• 모바일 장치에서 성능이 더 뛰어납니다. 왜냐하면 모바일 장치에 적용되는 모든 규칙이 어떤 미디어 쿼리에도 검증될 필요가 없기 때문입니다.
• 반응형 CSS 규칙과 관련하여 더 깔끔한 코드를 작성하게 만듭니다.

반응형 디자인과 적응형 디자인 모두 다양한 장치에서 사용자 경험을 최적화하려고 시도하며, 다양한 뷰포트 크기, 해상도, 사용 컨텍스트, 제어 메커니즘 등을 조정합니다.

반응형 디자인은 유연성 원칙에 따라 작동합니다. 즉, 어떤 장치에서도 잘 보일 수 있는 단일 유동적인 웹사이트입니다. 반응형 웹사이트는 미디어 쿼리, 유연한 그리드 및 반응형 이미지를 사용하여 다양한 요소에 따라 유연하게 변화하는 사용자 경험을 만듭니다. 마치 단 하나의 공이 여러 개의 다른 고리를 통과하기 위해 커지거나 작아지는 것과 같습니다.

적응형 디자인은 점진적 향상의 현대적인 정의와 더 비슷합니다. 하나의 유연한 디자인 대신, 적응형 디자인은 장치 및 기타 기능을 감지한 다음 미리 정의된 뷰포트 크기 및 기타 특성 세트에 따라 적절한 기능과 레이아웃을 제공합니다. 사이트는 사용되는 장치 유형을 감지하고 해당 장치에 대한 미리 설정된 레이아웃을 제공합니다. 여러 개의 다른 크기의 고리를 통과하는 단 하나의 공 대신, 고리 크기에 따라 사용할 여러 개의 다른 공이 있는 것과 같습니다.

이 두 가지 방법 모두 고려해야 할 몇 가지 문제가 있습니다:

• 반응형 디자인은 모든 상황에 맞는 단일 유연한 레이아웃을 사용하기 때문에 상당히 어려울 수 있습니다. 미디어 쿼리 중단점을 설정하는 방법이 그러한 과제 중 하나입니다. 표준화된 중단점 값을 사용해야 할까요? 아니면 특정 레이아웃에 적합한 중단점을 사용해야 할까요? 해당 레이아웃이 변경되면 어떻게 될까요?
• 적응형 디자인은 일반적으로 사용자 에이전트 스니핑 또는 DPI 감지 등을 필요로 하는데, 이 모든 것이 신뢰할 수 없는 것으로 판명될 수 있습니다.

레티나(Retina)는 단순히 픽셀 비율이 1보다 큰 고해상도 화면을 지칭하는 마케팅 용어입니다. 중요한 점은 픽셀 비율을 사용한다는 것은 이러한 디스플레이가 요소를 동일한 크기로 표시하기 위해 더 낮은 해상도 화면을 에뮬레이트한다는 것입니다. 오늘날 우리는 모든 모바일 장치를 사실상 레티나 디스플레이로 간주합니다.

브라우저는 기본적으로 이미지 외에는 장치 해상도에 따라 DOM 요소를 렌더링합니다.

레티나 디스플레이를 최대한 활용하여 선명하고 보기 좋은 그래픽을 얻으려면 가능한 한 고해상도 이미지를 사용해야 합니다. 그러나 항상 가장 높은 해상도 이미지를 사용하면 더 많은 바이트를 전송해야 하므로 성능에 영향을 미칩니다.

이 문제를 해결하기 위해 HTML5에 명시된 반응형 이미지를 사용할 수 있습니다. 이는 동일한 이미지의 다양한 해상도 파일을 브라우저에 제공하고 브라우저가 최적의 이미지를 결정하도록 하는 것을 요구합니다. 예를 들어, srcset HTML 속성과 선택적으로 sizes를 사용합니다:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

HTML5의 srcset을 지원하지 않는 브라우저(예: IE11)는 이를 무시하고 대신 src를 사용한다는 점에 유의하는 것이 중요합니다. IE11을 지원해야 하고 성능상의 이유로 이 기능을 제공하고자 한다면 JavaScript 폴리필을 사용할 수 있습니다.

아이콘의 경우에도 가능한 한 SVG와 아이콘 글꼴을 사용하는 것을 선택할 것입니다. 해상도에 관계없이 매우 선명하게 렌더링되기 때문입니다.

translate()는 CSS transform의 값입니다. transform 또는 opacity를 변경하면 브라우저 리플로우(reflow) 또는 리페인트(repaint)가 트리거되지 않지만, 합성(composition)을 트리거합니다. 반면 absolute 위치 지정을 변경하면 reflow가 트리거됩니다. transform은 브라우저가 요소에 대한 GPU 레이어를 생성하도록 하지만, absolute 위치 지정 속성을 변경하면 CPU를 사용합니다. 따라서 translate()가 더 효율적이며 더 부드러운 애니메이션을 위해 더 짧은 페인트 시간을 초래합니다.

translate()를 사용할 때 요소는 여전히 원래 공간을 차지합니다(일종의 position: relative와 비슷함). absolute 위치를 변경하는 것과는 다릅니다.