귀하는 로그인되어 있지 않습니다. 이대로 편집하면 귀하의 IP 주소가 편집 기록에 남게 됩니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== 개요 == [[CSS]](Cascading Style Sheets)는 웹 페이지의 [[마크업 언어]](예: [[HTML]])에 적용하여 문서의 시각적 표현을 정의하는 스타일시트 언어이다. 이를 통해 텍스트의 폰트나 색상, 레이아웃의 구조, 요소 간의 간격 등 다양한 디자인 요소를 일관성 있게 제어할 수 있다. CSS는 웹 디자인과 개발 분야에서 매우 중요한 위치를 차지하며, 사이트의 접근성과 유지보수성을 크게 향상시키는 역할을 한다. CSS가 널리 보급되기 전에는 웹 개발자들이 개별 HTML 태그에 직접 속성을 지정하거나, `<font>`와 같은 태그로 텍스트 스타일을 정의하는 방식이 주류였다. 이는 디자인 변경 시 상당한 양의 코드를 수정해야 하는 비효율을 야기했다. 반면 CSS는 스타일을 별도의 파일로 분리함으로써, 웹 문서의 구조와 디자인을 체계적으로 나눠서 관리할 수 있게 하였다. 오늘날에는 반응형 웹 디자인(Responsive Web Design)과 같은 개념이 각광받으면서, 화면 크기나 해상도, 사용자 인터페이스(UI)의 특성에 따라 CSS를 동적으로 조정하는 기법이 중요해졌다. 또한, 모바일 기기와 데스크톱, 인쇄용 등 다양한 미디어 타입을 대상으로 동일한 문서를 다르게 표현할 수 있도록 지원함으로써, 개발 효율과 사용자 경험을 모두 높이는 데 기여한다. == 역사 == CSS는 1994년 10월 10일 [[하콘 비움 리]](Håkon Wium Lie)에 의해 처음 제안되었다. 당시 웹은 빠르게 성장하고 있었지만, HTML만으로는 시각적인 표현을 다루는 데 한계가 분명했다. 웹 문서의 구조(HTML)와 표현(CSS)을 분리하자는 아이디어는 간결하고 효율적인 유지보수를 가능케 했으며, 이러한 장점 덕분에 CSS는 빠른 속도로 표준화 과정을 밟게 되었다. CSS 표준은 [[W3C]](World Wide Web Consortium)에서 관리하며, 역사적으로 여러 버전을 거치면서 기능과 안정성이 개선되었다. 또한, CSS가 제안된 이후 웹 브라우저들은 이를 적극적으로 지원하기 위해 경쟁적으로 기능을 구현하기 시작했고, 표준화에 맞춰 브라우저 간 호환성이 점차 나아져 왔다. 다만, CSS가 발전하는 속도에 비해 브라우저의 지원 상황이 뒤처지는 경우도 종종 발생하여, 웹 개발자들은 각 브라우저별로 벤더 프리픽스(-webkit-, -moz-, -o-, -ms- 등)를 활용해가며 호환성을 맞춰야 했다. 오늘날에는 모바일 브라우저와 데스크톱 브라우저 대부분이 최신 CSS 사양을 점차 빠르게 도입하고 있으며, 수많은 오픈소스 프로젝트와 커뮤니티가 적극적으로 참여하여 CSS의 발전 속도와 다양성을 더해주고 있다. === CSS1 === 1996년 12월에 발표된 CSS 레벨 1은 폰트 속성, 텍스트 색상, 배경, 여백, 패딩 등 기본적인 스타일링 기능을 중심으로 구성되어 있었다. 이 시기에 CSS는 다양한 기능을 제공하기보다는, “HTML 태그에 분산된 스타일 요소를 한곳에 모으자”라는 근본 목표를 실현하는 데 집중했다. CSS1은 당시 웹 브라우저들 간의 호환성 이슈가 심각했음에도 불구하고, 기존에 마크업에 직접 정의하던 스타일을 분리하여 웹 개발의 생산성을 높였다는 점에서 큰 의미가 있었다. 그러나 일부 브라우저 제조사들은 CSS 표준을 완벽히 지원하지 않아, 웹 디자이너나 개발자들은 특정 브라우저에 맞춘 꼼수(Hack) 기법을 사용해야 하는 어려움이 있었다. === CSS2 === 1998년 5월에 발표된 CSS 레벨 2는 포지셔닝(Positioning), 미디어 타입 지원, 테이블 레이아웃 등의 새로운 기능을 추가하였다. 특히, 웹 페이지 레이아웃을 잡는 데 큰 혁신을 가져온 것이 포지셔닝 속성으로, 요소를 문서 흐름에서 분리하거나, 절대/상대 위치를 지정하여 정교하게 배치할 수 있었다. CSS2는 인쇄 스타일 시트나 음성 브라우저와 같은 다양한 출력 매체를 지원하기 위해 미디어 타입을 적극적으로 도입함으로써, 화면용, 프린트용, 음성용 등 상황에 따른 다양한 스타일링이 가능하도록 했다. 이는 웹 문서가 더 이상 브라우저 화면만을 대상으로 하지 않는다는 점을 보여주는 중요한 이정표가 되었다. === CSS2.1 === CSS2의 오류를 수정하고 일부 기능을 개선한 CSS 레벨 2.1은 2011년 6월에 [[W3C]] 권고안으로 최종 발표되었다. CSS2.1은 웹 브라우저의 실제 구현 사례들을 종합하여, 아직 호환성 문제가 있는 기능들은 제외하거나 보완함으로써 실사용에 견고한 버전으로 자리 잡았다. 이 시기에 CSS는 폭넓은 지원을 받기 시작했으며, 웹 디자인 분야에 전문적인 직업이 생겨날 만큼 성장하였다. 기존의 테이블 기반 레이아웃이 사라지고, CSS만으로도 유연한 레이아웃을 구성할 수 있게 되면서, 웹 표준 준수와 접근성을 높이는 방향으로 시장이 재편되었다. === CSS3 === CSS3는 기존의 단일 표준 문서였던 CSS1, CSS2와 달리, 모듈화(Modular)된 접근 방식을 도입하였다. 이를 통해 각 모듈(예: 배경과 경계, 셰이프, 애니메이션, 그리드 레이아웃 등)이 독립적으로 개발되고 업데이트될 수 있게 되었다. 이는 표준화 과정이 더 유연해지고, 새로운 기능이 빠르게 추가되도록 만드는 데 큰 역할을 했다. CSS3는 그림자 효과(`box-shadow`), 그라데이션(`linear-gradient`, `radial-gradient`), 변형(`transform`), 트랜지션(`transition`), 애니메이션(`@keyframes`) 등 다양한 기능을 제공함으로써, 자바스크립트 없이도 다양한 인터랙션과 시각적 효과를 구현할 수 있게 했다. 또한, 미디어 쿼리(`@media`)를 통해 기기별 화면 크기나 해상도에 맞춘 반응형 디자인을 쉽게 적용할 수 있게 되어, 모바일 시대에 적합한 웹 개발의 기틀을 마련했다. == 문법 == CSS는 크게 선택자(Selector)와 선언 블록(Declaration Block)으로 구성된다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은 중괄호(<code>{}</code>)로 감싸며, 그 안에 여러 개의 속성과 값을 정의한다. 각 속성 선언은 콜론(<code>:</code>)으로 구분하고, 세미콜론(<code>;</code>)으로 마무리한다. 예시: <syntaxhighlight lang="css"> /* 간단한 CSS 문법 예시 */ 선택자 { 속성명: 속성값; 속성명2: 속성값2; } </syntaxhighlight> 아래는 단락(<code><p></code>) 요소를 빨간색 글씨, 16px 글꼴 크기로 표시하는 예시다: <syntaxhighlight lang="css"> p { color: red; font-size: 16px; } </syntaxhighlight> CSS 코드가 더욱 복잡해지면, 여러 선택자와 속성이 혼합되어 사용된다. 이를 관리하기 위해 SCSS(Sass)나 LESS와 같은 CSS 전처리기(Preprocessor)를 사용하는 경우도 많으며, 이러한 도구를 통해 변수, 중첩, 함수 등 고급 기능을 활용하여 유지보수가 용이한 스타일 코드를 작성할 수 있다. == 선택자 == CSS 선택자는 스타일을 적용할 요소를 정확하게 선택하는 역할을 한다. 올바른 선택자 사용은 코드의 가독성을 높이고, 불필요한 중복이나 우선순위 문제를 최소화하는 데 매우 중요하다. * 전체 선택자(<code>*</code>): 모든 요소를 선택한다. * 태그 선택자(<code>tagname</code>): 특정 태그명을 가진 모든 요소를 선택한다. * 클래스 선택자(<code>.classname</code>): 특정 클래스를 가진 모든 요소를 선택한다. * ID 선택자(<code>#idname</code>): 특정 ID를 가진 요소를 선택한다. * 자식 선택자(<code>parent > child</code>): 특정 부모의 직계 자식 요소를 선택한다. * 하위 선택자(<code>ancestor descendant</code>): 특정 조상의 모든 하위 요소를 선택한다. * 인접 형제 선택자(<code>prev + next</code>): 바로 다음에 위치한 형제 요소를 선택한다. * 일반 형제 선택자(<code>prev ~ siblings</code>): 이후에 위치한 모든 형제 요소를 선택한다. 또한, CSS에는 가상 클래스로 불리는 '''의사 클래스(Pseudo-class)'''와 의사 요소(Pseudo-element)도 존재한다. 예를 들어, <code>:hover</code>, <code>:focus</code>, <code>:active</code>와 같은 의사 클래스는 특정 상호작용 상태의 요소에 스타일을 적용할 때 사용한다. 의사 요소인 <code>::before</code>, <code>::after</code>, <code>::placeholder</code> 등은 요소의 실제 콘텐츠가 아닌, 가상의 영역에 스타일을 줄 때 유용하다. == 상속과 캐스케이딩 == CSS의 핵심 개념 중 하나인 상속은, 상위 요소에 적용된 스타일이 하위 요소에 자동으로 전달되는 메커니즘을 말한다. 예를 들어, <code>body</code>에 지정한 폰트나 색상 등이 별도의 설정 없이도 자식 요소에 전파되어 일관된 디자인을 유지할 수 있다. 다만 모든 속성이 상속되는 것은 아니므로, 상속되지 않는 속성은 하위 요소에 따로 지정해주어야 한다. 캐스케이딩(Cascading)은 여러 스타일 규칙이 충돌할 경우 적용 우선순위를 정하는 원리다. 이는 '''중요도(중요 선언인 <code>!important</code> 여부)''', '''명시도(선택자의 구체성)''', '''선언된 순서'''에 따라 결정된다. 일반적으로, 명시도가 높은 ID 선택자가 클래스 선택자보다 우선하며, 클래스 선택자는 태그 선택자보다 우선한다. 또한, 스타일 시트 내에서 나중에 선언된 규칙이 앞선 규칙을 덮어쓰기도 한다. == 박스 모델 == CSS의 박스 모델은 요소의 레이아웃을 결정하는 가장 기본적인 구조이며, 모든 HTML 요소는 사각형 박스로 이해된다. 박스 모델은 다음과 같은 영역으로 구성된다: * '''콘텐츠(Content):''' 텍스트나 이미지 등 실제 내용이 위치하는 영역. * '''패딩(Padding):''' 콘텐츠와 테두리 사이의 내부 여백. * '''테두리(Border):''' 패딩과 마진 사이의 경계선. * '''마진(Margin):''' 테두리 바깥의 외부 여백으로, 요소 간의 간격을 조절한다. 이 때 요소가 실제로 차지하는 영역은 <code>content + padding + border + margin</code>의 합이 되며, 개발자가 이를 적절히 조정함으로써 원하는 레이아웃과 디자인을 구성할 수 있다. 다만, <code>box-sizing</code> 속성을 <code>border-box</code>로 지정하면, 지정한 너비와 높이에 패딩과 테두리를 포함시켜 계산하는 방식으로 전환할 수도 있다. == 디스플레이 속성 == CSS의 <code>display</code> 속성은 요소가 문서 흐름 내에서 어떻게 배치되는지를 결정하며, 레이아웃에 큰 영향을 미친다. 주로 사용되는 값은 다음과 같다: * <code>block</code>: 블록 레벨 요소로, 항상 새로운 줄에서 시작하며 가로 전체를 차지한다. * <code>inline</code>: 인라인 요소로, 줄의 흐름 안에 배치되며 필요한 만큼의 너비만 차지한다. * <code>inline-block</code>: 인라인 요소처럼 흐름에 배치되지만, 블록 요소처럼 너비와 높이를 지정할 수 있다. * <code>none</code>: 요소를 화면에 표시하지 않는다(문서 흐름에서도 제외). 추가적으로 <code>flex</code>와 <code>grid</code> 같은 현대적인 레이아웃 방식도 지원된다. <code>flex</code>는 일차원(1D) 레이아웃에 적합하며, <code>grid</code>는 이차원(2D) 레이아웃을 쉽게 구성할 수 있게 해준다. == 최신 기능 == CSS3와 이후 사양에는 개발자들이 더욱 다양하고 창의적인 디자인을 구현할 수 있도록 하는 새로운 기능들이 계속해서 추가되고 있다: * '''삼각 함수 지원:''' <code>sin()</code>, <code>cos()</code>, <code>tan()</code> 등의 삼각 함수를 사용할 수 있어, 복잡한 애니메이션과 레이아웃 구성이 가능해졌다. 예를 들어, 요소를 특정 각도로 움직이거나 주기적으로 변형하는 효과를 줄 수 있다. * '''서브그리드(Subgrid):''' CSS 그리드 레이아웃에서 하위 그리드가 상위 그리드의 행과 열을 채택하여, 더욱 정밀하고 복잡한 레이아웃 구성을 구현할 수 있다. * '''<code>aspect-ratio</code> 속성:''' 요소의 종횡비를 지정해줌으로써, 이미지나 비디오와 같은 콘텐츠를 반응형 디자인에서도 일정한 비율로 유지시킬 수 있다. * '''<code>object-fit</code> 속성:''' 이미지나 비디오를 박스 내에서 어떻게 배치할지를 지정해준다. 예: <code>cover</code>, <code>contain</code> 등을 사용해 콘텐츠가 잘리지 않도록 조정할 수 있다. * '''애니메이션 스크롤(Scroll-Linked Animations):''' 최근 브라우저에서는 스크롤 이벤트와 연동하여 부드러운 애니메이션 효과를 구현하는 사양을 검토 중이거나 지원을 시작했다. == CSS 성능과 최적화 == CSS는 렌더링(그리기) 단계에서 '''레이아웃(Layout)''', '''페인트(Paint)''', '''컴포지트(Composite)''' 과정 등을 거치는데, 특정 속성들은 이 중 하나 이상을 크게 변경하여 성능에 영향을 미친다. 성능 최적화를 위해서는 속성이 어떤 렌더링 단계를 유발하는지를 이해하는 것이 중요하다. === 속도가 느린(비용이 큰) 속성들 === * '''레이아웃(Layout) 트리거''': <code>width</code>, <code>height</code>, <code>margin</code>, <code>padding</code>, <code>border</code>, <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> 등 레이아웃을 재계산(Reflow)해야 하는 속성들 - 이들은 요소의 크기나 위치를 재계산하므로, 형제 요소나 부모 요소의 배치에도 영향을 주어 '''상대적으로 속도가 느리다'''. * '''페인트(Paint) 트리거''': <code>background</code>, <code>box-shadow</code>, <code>color</code>, <code>outline</code>, <code>border-radius</code> 등 시각적(페인트) 업데이트를 필요로 하는 속성들 - 레이아웃을 전부 다시 계산하는 것은 아니지만, 다시 그리기(Repaint)가 일어나므로 여전히 비용이 크다. === 속도가 빠른(비용이 적은) 속성들 === * '''컴포지트(Composite) 트리거''': <code>transform</code>, <code>opacity</code>, <code>filter</code>(일부 브라우저) 등 - GPU 가속이 적용되거나, 레이아웃이나 페인트 없이 후반 컴포지팅 단계에서만 처리되는 경우가 많아 '''상대적으로 빠른 편'''이다. - 예: <code>transform: translateX(100px)</code>와 같이 위치 이동을 할 때 <code>transform</code> 속성을 사용하면, <code>left</code> 변경에 비해 비용이 적다. === 최적화 방안 === * '''하드웨어 가속 활용''': <code>transform</code> 또는 <code>opacity</code>를 사용해 애니메이션을 구현하고, 필요시 <code>will-change</code> 속성으로 브라우저에게 미리 최적화를 힌트준다. * '''변경이 잦은 요소 최소화''': 자주 변경되는 애니메이션 요소에는 레이아웃을 재계산해야 하는 속성 대신 컴포지트만 유발하는 속성을 사용한다. * '''CSS 애니메이션 대신 적절한 JS/WAAP(브라우저 API) 고려''': 복잡한 애니메이션이나 타이밍 제어가 필요할 때는 <code>requestAnimationFrame</code>을 활용해 레이아웃 계산을 최소화한다. * '''불필요한 중첩이나 복잡한 셀렉터 자제''': 복잡한 셀렉터는 브라우저의 스타일 계산(Stage)에도 영향을 준다. * '''이미지 스프라이트, 아이콘 폰트, SVG 활용''': 페인트 영역을 최소화하고 네트워크 요청 수를 줄여 성능을 끌어올린다. == 반응형 웹 디자인 == 반응형 웹 디자인(Responsive Web Design)은 화면 크기, 해상도, 기기 특성 등에 따라 웹 레이아웃이 유연하게 변하도록 설계하는 기법을 말한다. 이를 통해 하나의 웹 문서가 다양한 환경(모바일, 태블릿, 데스크톱, 대형 화면 등)에서 일관되게 보이면서도, 각 환경에 최적화된 사용자 경험을 제공할 수 있다. === 구성 방식 === 반응형 웹 디자인에서는 주로 '''미디어 쿼리'''와 유동적인(Grid, Flex) 레이아웃을 조합한다. 레이아웃의 폭, 폰트 크기, 이미지 크기 등을 기기 환경에 맞추어 변경한다. * '''Mobile-first''': 가장 작은 화면(모바일) 기준으로 스타일을 작성하고, 더 큰 화면에 대한 스타일을 확장해 나가는 방식 * '''Desktop-first''': 데스크톱 화면을 기준으로 작성 후, 작은 화면에 대해서는 추가적인 미디어 쿼리로 스타일을 재정의 === 일반적인 브레이크포인트(화면 구간) === 반응형을 구성할 때 자주 쓰이는 구간 예시는 아래와 같다. (프로젝트마다 달라질 수 있음) * 최대 너비 480px ~ 600px 이하: 휴대전화 * 최대 너비 768px 이하: 태블릿 세로 * 최대 너비 1024px 이하: 태블릿 가로 * 최대 너비 1200px 이하: 작은 데스크톱 * 1200px 초과: 일반/대형 데스크톱 아래 예시처럼 여러 미디어 쿼리를 통해 화면 크기에 따라 다른 스타일을 지정할 수 있다. <syntaxhighlight lang="css"> /* (1) 모바일용 기본 스타일 */ .container { max-width: 100%; margin: 0 auto; padding: 10px; } /* (2) 중간 크기(태블릿) 이상 */ @media (min-width: 768px) { .container { max-width: 700px; padding: 20px; } } /* (3) 큰 화면(데스크톱) 이상 */ @media (min-width: 1024px) { .container { max-width: 960px; padding: 30px; } } </syntaxhighlight> 이처럼 반응형 웹 디자인에서는 '''유연한 레이아웃''', '''반응형 이미지''', '''미디어 쿼리''' 등을 결합하여, 다양한 기기 화면에서 콘텐츠가 적절히 표시되도록 한다. == 예시 코드 모음 == 아래는 간단한 CSS 활용 예시를 몇 가지 제시한 것이다. 코드 스니펫을 통해 CSS 작성 방식을 구체적으로 살펴보자. <syntaxhighlight lang="css"> /* 반응형 예시: 화면 크기에 따라 폰트 크기 조절 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } @media (max-width: 600px) { body { font-size: 14px; } } @media (min-width: 601px) { body { font-size: 16px; } } </syntaxhighlight> <syntaxhighlight lang="css"> /* 간단한 그리드 레이아웃 예시 */ .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; } .grid-item { background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; } </syntaxhighlight> <syntaxhighlight lang="css"> /* 트랜지션과 호버 효과 */ .button { background-color: #3498db; color: #fff; padding: 12px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: #2980b9; } </syntaxhighlight> 위 예시들처럼, CSS를 잘 활용하면 반응형 웹부터 애니메이션까지 폭넓은 사용자 경험을 제공할 수 있다. <!-- 분류 --> [[분류:CSS]] [[분류:웹]] 편집 요약 가온 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 가온 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요! 취소 편집 도움말 (새 창에서 열림)