Advanced CSS는 일반적인 CSS를 넘어서는 다양한 고급 기능이다.
1. CSS Grid Layout
CSS Grid는 복잡한 레이아웃을 쉽게 구성할 수 있게 해주는 레이아웃 시스템이다. 행(row)과 열(column)을 기반으로 배치하는 방식이며, Flexbox보다 더 정교한 2D 레이아웃을 지원한다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3개의 같은 크기의 열 */
grid-gap: 20px; /* 열과 행 사이의 간격 */
}
.item {
background-color: lightblue;
}2. CSS Flexbox
Flexbox는 주로 1D 레이아웃을 위한 시스템으로, 콘텐츠를 효율적으로 정렬하고 분배하는데 유용하다. Flexbox를 사용하면 화면 크기에 따라 동적으로 아이템을 배치할 수 있다.
.container {
display: flex;
justify-content: space-between; /* 아이템 사이의 간격을 동일하게 배치 */
align-items: center; /* 아이템을 수직 중앙에 정렬 */
}
.item {
background-color: lightcoral;
padding: 10px;
}3. CSS Variables (커스텀 속성)
CSS 변수를 사용하면 코드의 재사용성을 높이고, 색상, 크기 등 반복되는 값을 하나의 변수로 정의해서 쉽게 관리할 수 있다. 이는 특히 테마를 변경하거나, CSS 파일을 수정할 때 유용하다.
:root {
--primary-color: #3498db;
--font-size: 16px;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}4. CSS Transitions & Animations
CSS Transition은 요소가 상태 변화 시 부드럽게 애니메이션을 적용할 수 있게 해준다. CSS Animation은 더 복잡한 애니메이션을 적용할 수 있으며, 키프레임을 사용하여 여러 상태를 정의할 수 있다.
CSS Transition 예시:
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}CSS Animation 예시:
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}5. CSS Masking
CSS Masking은 이미지나 다른 요소에 마스크를 적용해서 요소의 일부를 숨기거나 보이게 할 수 있다. mask-image를 사용하여 이미지나 그라디언트로 마스크를 적용할 수 있다.
.element {
mask-image: url('mask.png'); /* 마스크 이미지 */
mask-size: cover;
}6. CSS Shapes
CSS Shapes는 텍스트가 이미지나 다른 요소의 형태를 따라 흐를 수 있게 해주는 기능이다. 이를 통해 텍스트를 원형이나 다각형, 혹은 임의의 형태로 배치할 수 있다.
.shape {
shape-outside: circle(50%);
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
}7. CSS Clipping
clip-path를 사용하면 요소의 모양을 다양한 형상으로 자를 수 있다. 예를 들어, 원형, 다각형, 혹은 기본적인 경로로 요소를 자를 수 있다.
.element {
clip-path: circle(50%);
width: 200px;
height: 200px;
background-color: orange;
}8. CSS Grid Template Areas
CSS Grid에서는 grid-template-areas를 사용하여 레이아웃을 정의할 수 있다. 이 기능을 사용하면 직관적으로 레이아웃을 구성할 수 있으며, 복잡한 레이아웃도 쉽게 관리할 수 있다.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}9. CSS Media Queries (반응형 디자인)
미디어 쿼리는 다양한 화면 크기와 디바이스에 따라 스타일을 조정할 수 있는 방법이다. 이를 사용하면 웹페이지가 모바일, 태블릿, 데스크탑에서 잘 표시되도록 할 수 있다.
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}10. CSS Grid & Flexbox 결합
Grid와 Flexbox를 결합해서 더 복잡하고 유연한 레이아웃을 만들 수 있다. 예를 들어, 그리드로 기본 레이아웃을 설정하고, 그 안에 있는 항목들은 Flexbox로 정렬할 수 있다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
background-color: lightgreen;
}11. Backdrop Filter
backdrop-filter는 요소 뒤에 있는 콘텐츠에 필터 효과를 적용할 수 있게 해준다. 예를 들어, 배경에 흐림 효과를 주거나 색상을 변경할 수 있다.
.element {
backdrop-filter: blur(5px);
}12. CSS Grid의 auto-fill과 auto-fit
auto-fill과 auto-fit은 그리드 시스템에서 동적으로 아이템의 크기를 조정할 수 있는 기능이다. auto-fill은 가능한 만큼 컬럼을 추가하고, auto-fit은 그리드 아이템들이 크기에 맞게 자동으로 배치되도록 한다.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}