소소한 일상과 순간들을 기록하며, 지금 이 순간을 남겨두고 언젠가 다시 돌아볼 개인 저장 블로그.
-
recentPost
-
archive
-
recentComment
-
personalProject
전체 글
소소한 일상과 순간들을 기록하며, 지금 이 순간을 남겨두고 언젠가 다시 돌아볼 개인 저장 블로그.
17
-
배움지식
9편. 카운터 함수
개요CSS 카운터 함수는 HTML 요소에 자동으로 번호를 붙이거나, 계층적인 번호 체계를 구현할 수 있게 해줍니다.자바스크립트 없이도 목록, 챕터, 섹션 등에 순차 번호를 표시할 수 있어 문서 스타일링에 유용합니다.대표적인 함수로는 counter()와 counters()가 있습니다.주요 함수counter()하나의 카운터 값을 불러옵니다.ol { counter-reset: item;}li { counter-increment: item;}li::before { content: counter(item) ". ";}각 li 앞에 자동으로 번호가 붙습니다.counters()중첩된 카운터 값을 이어서 표시할 수 있습니다.ol { counter-reset: section;}li { counter-increm..
2025. 8. 19. -
배움지식
8편. 콘텐츠/참조 함수
개요CSS에서는 외부 값이나 환경 변수, 속성 값 등을 가져와서 활용할 수 있는 콘텐츠/참조 함수들이 있습니다.대표적으로 var(), attr(), env(), url()이 있으며, 재사용성과 유지보수성을 높이는 데 중요한 역할을 합니다.주요 함수var()CSS 커스텀 속성(변수)을 불러와 사용할 때 씁니다.:root { --main-color: #4CAF50;}.button { background-color: var(--main-color);}변수처럼 재사용 가능. 전체 색상을 쉽게 바꿀 수 있음.attr()HTML 속성 값을 가져와 콘텐츠에 출력할 수 있습니다. (단, 콘텐츠 삽입에 제한적)a::after { content: " (" attr(href) ")";}링크 뒤에 해당 href 값을 표..
2025. 8. 19. -
배움지식
7편. 그리드/레이아웃 함수
개요CSS Grid 레이아웃은 복잡한 웹 페이지 구조를 손쉽게 만들 수 있는 강력한 도구입니다.특히 minmax(), fit-content(), repeat() 같은 함수들은 레이아웃의 유연성과 재사용성을 크게 높여줍니다.이번 편에서는 그리드/레이아웃과 관련된 대표적인 함수들을 살펴봅니다.주요 함수minmax()최소 크기와 최대 크기를 동시에 지정할 수 있습니다. 뷰포트 크기에 따라 셀 크기가 유연하게 조절됩니다..grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(150px, 2fr);}첫 번째 칸은 최소 200px, 최대 1fr. 두 번째 칸은 최소 150px, 최대 2fr.fit-content()콘텐츠 크기를 기반으로 하..
2025. 8. 19. -
배움지식
6편. 모양/마스크 함수
개요CSS에는 요소의 모양을 잘라내거나 특정 부분만 보이도록 하는 모양/마스크 함수들이 있습니다.circle(), ellipse(), polygon(), inset(), path(), ray() 같은 함수들이 대표적입니다.이들은 보통 clip-path나 mask-image 속성과 함께 사용되며, 특별한 모양을 만들어내는 데 활용됩니다.주요 함수circle().avatar { clip-path: circle(50%);}요소를 완벽한 원형으로 잘라냅니다. (프로필 사진에 자주 사용)ellipse().banner { clip-path: ellipse(60% 40% at center);}타원 형태로 잘라냅니다. 배너나 강조 영역에 활용 가능.polygon().shape { clip-path: polygon..
2025. 8. 19. -
배움지식
5편. 변형(Transform) 함수
개요CSS transform 속성은 요소의 위치, 크기, 각도 등을 자유롭게 바꿀 수 있는 강력한 도구입니다.단순한 회전부터 3D 공간 효과까지 가능하기 때문에 애니메이션, 인터랙션 디자인에서 자주 사용됩니다.이번 편에서는 대표적인 변형 함수들을 알아봅니다.주요 변형 함수translate().box { transform: translate(50px, 20px);}👉 오른쪽으로 50px, 아래로 20px 이동rotate().box { transform: rotate(45deg);}👉 45도 회전scale().box { transform: scale(1.5);}👉 요소 크기를 1.5배 확대skew().box { transform: skew(20deg, 10deg);}👉 X축 20도, Y축 10..
2025. 8. 19. -
배움지식
4편. 필터 함수
개요CSS filter 속성은 요소에 다양한 시각 효과를 줄 수 있는 함수들을 제공합니다.흔히 이미지 편집 툴에서 보던 흐림(blur), 색상 반전(invert), 흑백(grayscale) 같은 효과를 웹에서도 간단히 적용할 수 있습니다.이번 편에서는 대표적인 필터 함수들을 알아봅니다.주요 필터 함수blur()요소를 흐리게 만듭니다. 값이 클수록 더 뿌옇게 보입니다.img { filter: blur(5px); }brightness()밝기를 조절합니다. 1이 기본값이며, 0.5는 어둡게, 2는 두 배 밝게 합니다.img { filter: brightness(1.5); }contrast()대비를 조절합니다. 1이 기본, 0이면 완전히 회색, 2 이상은 대비가 강해집니다.img { filter: contras..
2025. 8. 19. -
배움지식
3편. 그라디언트 함수
개요단색만으로는 심심한 웹 디자인을 그라디언트(Gradient)를 활용하면 훨씬 풍부하게 만들 수 있습니다.CSS에서는 선형, 원형, 원뿔형 그라디언트 등 다양한 방법으로 색상 전환 효과를 줄 수 있습니다.이번 편에서는 그라디언트 관련 CSS 함수들을 하나씩 살펴봅니다. linear-gradient()가장 기본적인 선형 그라디언트입니다. 위에서 아래, 왼쪽에서 오른쪽, 대각선 등 원하는 방향으로 색상이 부드럽게 변합니다. 예시background: linear-gradient(to right, red, blue);→ 왼쪽은 빨강, 오른쪽은 파랑으로 변환radial-gradient()원형 또는 타원형 모양으로 색상이 퍼지는 그라디언트입니다.중앙에서 바깥으로 퍼지는 효과를 줄 때 자주 사용합니다. 예시back..
2025. 8. 19. -
배움지식
2편. 색상 함수 (CSS Functions 기초)
개요웹 디자인에서 색상은 중요한 요소입니다.CSS는 다양한 색상 함수를 제공하여 단순히 red, blue 같은 이름뿐 아니라 훨씬 더 정밀하게 색상을 표현할 수 있게 합니다.이번 편에서는 실무에서 많이 쓰이는 대표적인 색상 함수들을 다룹니다. rgb(), rgba()가장 많이 쓰이는 함수로 빨강(R), 초록(G), 파랑(B) 값을 0 ~ 255 또는 0 ~ 100%로 지정합니다.rgba()는 여기에 투명도(Alpha) 값을 추가할 수 있습니다.예시:rgb(255, 0, 0); → 빨강색rgba(0, 0, 255, 0.5); → 반투명 파랑rgb(0% 100% 0%); → 녹색hsl(), hsla()색상(Hue), 채도(Saturation), 밝기(Lightness)로 색을 표현합니다.hsla()는 투명도..
2025. 8. 19.