HTML, CSS16 CSS 논리 방향 속성-Block and Inline CSS 논리 방향 속성은 레이아웃을 논리적으로 제어할 수 있는 논리 속성과 값 입니다. 논리 속성은 해당요소의 물리적인 요소의 방향 속성을 상대적인 방향 속성 값을 통해 정의 합니다. 하나의 사이트에서 글 작성방향이 다양하게 지원되어야 하는 조건이라면 논리 속성값을 통해 width와 height에 대한 값을 정의하여 사용합니다. Block vs. inline 논리 속성 및 값은 흐름 방향을 나타내기 위해 "block"과 "inline"을 사용합니다. 이 용어들의 물리적인 방향은 writing-mode에 따라 다르게 설정됩니다. Block dimension 라인 내 텍스트 흐름에 수직인 방향, 즉 수평 쓰기 방식에서는 수직 차원이며, 수직 쓰기 방식에서는 수평 차원입니다. 가로쓰기로 글이 작성되는 것이 인.. 2023. 8. 13. scroll-snap scroll-snap-type scroll-snap-type 속성은 스크롤 영역에서 스냅 포인트가 얼마나 정확하게 적용될지를 설정합니다. 스냅 포인트를 적용하는 데 사용되는 정확한 애니메이션 또는 물리 기능은 브라우저에 따라 다릅니다. /* Keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* Optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll.. 2023. 8. 12. Writing Mode CSS 작성 모드 모듈은 국제 작성 모드를 정의합니다. 이 중에는 왼쪽에서 오른쪽으로 쓰는 방법(라틴 및 인디아 scripts에서 사용), 오른쪽에서 왼쪽으로 쓰는 방법(히브리어나 아랍어 scripts에서 사용), 양방향(왼쪽에서 오른쪽과 오른쪽에서 왼쪽 scripts을 혼합할 때 사용) 및 수직(일부 아시아 scripts에서 사용)방향 작성 방법이 있습니다. writing-mode writing-mode CSS 속성은 텍스트가 가로로 표시되는지, 세로로 표시되는지, 그리고 블록이 쌓이는 방향을 설정합니다. 문서 전체에 적용하려면 루트 요소(HTML 요소는 HTML 문서에서)에 적용해야 합니다. 이 속성은 블록의 흐름 방향을 지정하며, 블록 수준 컨테이너가 쌓이는 방향과 블록 내에서 인라인 수준 콘텐츠가.. 2023. 8. 11. scroll-behavior scroll-behavior scroll-behavior CSS 속성은 탐색 또는 CSSOM 스크롤링 API로 스크롤링이 트리거될 때 스크롤링 상자의 동작을 설정합니다. 사용자가 수행하는 스크롤과 같은 다른 스크롤은 이 속성에 영향을 받지 않습니다. 이 속성이 루트 요소에 지정된 경우 뷰포트에 적용됩니다. body 요소에서 지정된 이 속성은 뷰포트로 전파되지 않습니다. 사용자 에이전트는 이 속성을 무시할 수 있습니다. /* Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: reve.. 2023. 8. 11. 반응형 크기 설정을 위한 clamp(), min(), max() clamp() clamp() CSS 함수는 정의된 최소값과 최대값 사이의 범위로 값을 제한하는 데 사용됩니다. 이 함수는 세 개의 매개변수를 가져옵니다: 최소값, 선호값 및 허용되는 최대값입니다. 글꼴 크기에 clamp()를 사용하면 미디어 쿼리가 필요하지 않고 하나의 코드 라인으로 화면 크기에 따라 글꼴 크기가 커지거나 최대 글꼴 크기를 초과하지 않고 최소 글꼴 크기를 유지하는 유동적 타이포그래피(fluid typography)와 같은 효과를 낼 수 있습니다. /* Static values */ width: clamp(200px, 40%, 400px); width: clamp(20rem, 30vw, 70rem); width: clamp(10vw, 20em, 100vw); /* Calculated val.. 2023. 8. 9. Print용 CSS 설정 @media print 인쇄 시 적합한 출력을 위해, 인쇄 페이지용 미디어 쿼리를 사용하여 출력 시 변경되는 섹션을 명시해야 합니다. 미디어쿼리는 인쇄될 내용에 맞게 화면을 설정할때 사용하는 것으로 생각하시면 됩니다. @media print { } 배경출력을 위한 설정 인쇄 시, background속성(background-image, background-color)를 강제로 보이게 지정 @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } 화면분할 page-break 속성은 더 이상 권장되지 않고 있으며, 대신 break-before, break-after, break-inside와 같은 속성들이 CSS3에.. 2023. 8. 7. 이전 1 2 3 다음
