CSS 팟캐스트 - 009: 레이아웃 를 통해 개인정보처리방침을 정의할 수 있습니다.
개발자로 일하고 있다고 상상해 보세요. 디자이너 동료가 새 웹사이트 디자인을 건네줍니다. 디자인은 온갖 흥미로운 레이아웃과 구성을 가지고 있습니다. 표시 영역 너비와 높이를 고려한 2차원 레이아웃입니다. 유연하고 유연해야 하는 레이아웃도 지원합니다. CSS로 이러한 스타일을 지정하는 가장 좋은 방법은 어떻게 결정할까요?
CSS는 레이아웃 문제를 해결할 수 있는 다양한 방법을 제공합니다. 가로축, 세로축 또는 둘 다에 표시할 수 있습니다. 컨텍스트에 적합한 레이아웃 메서드를 선택하는 것은 어려울 수 있지만 문제를 해결하기 위해 둘 이상의 레이아웃 방법이 필요한 경우가 많습니다. 이를 돕기 위해 다음 모듈에서는 이러한 결정을 내리는 데 도움이 되는 각 CSS 레이아웃 메커니즘의 고유한 기능에 대해 알아봅니다.
레이아웃: 간략한 이력
웹 초창기에는
단순한 문서보다 더 복잡한 디자인은 <table> 요소로 배치되었습니다.
90년대 후반에 CSS가 브라우저에 널리 채택되었을 때 시각적 스타일에서 HTML을 더 쉽게 분리할 수 있었습니다.
CSS는 개발자가 HTML을 손대지 않고도 웹사이트의 디자인과 분위기를 완전히 변경할 수 있는 가능성을 열었습니다.
이 새로운 기능은 The CSS Zen Garden,
는 더 많은 개발자가 CSS의 강력한 기능을 익히도록 장려하기 위해 만들어졌습니다.
웹 디자인 및 브라우저 기술에 대한 요구사항이 변화하면서 CSS도 발전했습니다. CSS 레이아웃과 레이아웃에 대한 Google의 접근 방식이 시간이 지남에 따라 어떻게 발전했는지 다음 페이지에서 확인할 수 있습니다. 이 기사에서 확인할 수 있습니다.
레이아웃: 현재와 미래
최신 CSS에는 놀라울 정도로 강력한 레이아웃 도구가 있습니다. 우리는 레이아웃을 위한 전용 시스템을 보유하고 있으며 우리가 사용할 수 있는 것을 대략적으로 살펴보고 확인하시기 바랍니다.
display 속성 이해
display 속성은 두 가지 작업을 실행합니다.
가장 먼저 할 일은 적용된 상자가 인라인으로 작동하는지, 아니면 차단으로 작동하는지 확인하는 것입니다.
.my-element {
display: inline;
}
인라인 요소는 문장 내 단어처럼 동작합니다.
이 두 상자는 인라인 방향으로 나란히 놓여 있습니다.
<span> 및 <strong>와 같은 요소
<p> (단락)과 같은 요소 내에서 일반적으로 텍스트에 스타일을 지정하는 데 사용됩니다.
기본적으로 인라인입니다.
또한 주변 공백도 보존합니다.