``)에도 자동으로 부모 요소의 속성이 자식 요소로 상속되어, 미니 기사 전체의 배경이 변경된다. 상속이 없는 경우, 미니 기사의 `` 헤더 부분이 흰색 배경으로 남게 된다.
4. 6. 공백 (Whitespace)
CSS 코드에서 속성과 선택자 사이의 공백은 무시된다. 따라서 다음 두 코드는 기능적으로 동일하다.[21]
```css
body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}
```
```css
body {
overflow: hidden;
background-color: #000000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
}
4. 6. 1. 들여쓰기
CSS의 가독성을 위해 서식을 지정하는 일반적인 방법 중 하나는 각 속성을 들여쓰고 자체 줄에 배치하는 것이다. CSS의 가독성을 위해 서식을 지정하는 것 외에도, 단축 속성을 사용하여 코드를 더 빠르게 작성할 수 있으며, 이는 렌더링 시에도 더 빠르게 처리된다.[21]
때로는 여러 속성 값이 자체 줄로 들여쓰기된다.
4. 7. 위치 지정 (Positioning)
CSS 2.1은 세 가지 위치 지정 방식을 정의한다.
- 일반 흐름: HTML 요소가 텍스트처럼 가로로 배치되거나, 단락처럼 세로로 쌓이는 방식이다. 블록 또는 인라인 요소의 상대 위치 지정 및 런인 박스도 포함된다.
- 플로트: 요소가 일반 흐름에서 벗어나 왼쪽이나 오른쪽으로 최대한 이동하고, 다른 콘텐츠는 플로트된 요소 옆으로 흐르는 방식이다.
- 절대 위치 지정: 요소가 다른 요소와 관계없이 독립적인 위치를 가지는 방식이다.
4. 7. 1. Position 속성
CSS 2.1은 세 가지 위치 지정 방식을 정의한다.
- 일반 흐름:
- * ''인라인'' 요소는 텍스트의 단어에서 글자가 배치되는 방식과 동일하게, 사용 가능한 공간을 가로질러 차례대로 배치되며 공간이 더 이상 없으면 아래에 새 줄을 시작한다.
- * ''블록'' 요소는 단락이나 글머리 기호 목록의 항목처럼 수직으로 쌓인다.
- * 일반 흐름에는 블록 또는 인라인 요소의 상대 위치 지정 및 런인 박스도 포함된다.
- 플로트:
- * 플로트된 요소는 일반 흐름에서 제거되어 사용 가능한 공간에서 최대한 왼쪽 또는 오른쪽으로 이동한다.
- * 그런 다음 다른 콘텐츠는 플로트된 요소 옆으로 흐른다.
- 절대 위치 지정:
- * 절대 위치 지정된 요소는 다른 요소의 일반 흐름에 포함되지 않으며 영향을 미치지 않는다.
- * 다른 요소와 독립적으로 컨테이너에 할당된 위치를 차지한다.
`position` 속성에는 다섯 가지 가능한 값이 있다. 요소가 `static` 이외의 방식으로 위치가 지정되면 추가 속성인 `top`, `bottom`, `left`, `right`를 사용하여 오프셋과 위치를 지정한다. position이 static인 요소는 `top`, `bottom`, `left` 또는 `right` 속성의 영향을 받지 않는다.
4. 7. 2. Float 및 Clear
`float` 속성은 세 가지 값 중 하나를 가질 수 있다. `absolute` 위치나 `fixed` 항목은 플로팅될 수 없다. 다른 요소들은 일반적으로 해당 요소의 `clear` 속성에 의해 방지되지 않는 한 플로팅된 항목 주위로 흐른다.
- `left`: 항목은 표시될 줄의 왼쪽에 '플로팅'된다. 다른 항목들은 오른쪽 주위로 흐를 수 있다.
- `right`: 항목은 표시될 줄의 오른쪽에 '플로팅'된다. 다른 항목들은 왼쪽 주위로 흐를 수 있다.
- `clear`: 요소가 왼쪽(`clear:left`), 오른쪽(`clear:right`), 또는 양쪽(`clear:both`)의 플로팅된 요소 아래에 나타나도록 강제한다.[22][23]
5. 활용
CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어이다. CSS를 활용하면 HTML로 작성된 내용과 CSS로 작성된 표현을 분리하여 웹 페이지를 더욱 효율적으로 구성하고 관리할 수 있다.
CSS는 다음과 같은 다양한 방식으로 활용된다.
- 내용과 표현의 분리: CSS를 사용하면 HTML 문서에서 내용과 표현을 분리할 수 있다. HTML은 문서의 구조와 내용을 담당하고, CSS는 디자인과 레이아웃을 담당한다. 이렇게 분리하면 HTML 코드가 간결해지고, 유지 보수가 쉬워진다.[17]
- 사이트 전체의 일관성 유지: CSS를 사용하면 웹 사이트 전체의 스타일을 일관성 있게 유지할 수 있다. 전역 스타일 시트를 통해 사이트 전체 요소의 스타일을 지정하고, 필요에 따라 스타일 시트를 수정하면 되므로 유지 관리가 쉽고, 시간과 비용을 절약할 수 있다.[17]
- 대역폭 절약: CSS 스타일 시트는 일반적으로 브라우저에 캐시되어 여러 페이지에서 다시 로드할 필요가 없으므로, 네트워크를 통해 전송되는 데이터 양을 줄여 대역폭을 절약할 수 있다.[17]
- 페이지 재포맷: CSS를 사용하면 단 한 줄의 코드로 동일한 페이지에 대해 다른 스타일 시트를 적용할 수 있다. 이를 통해 다양한 대상 장치에 맞게 페이지를 조정하거나, 접근성을 향상시킬 수 있다.[17]
- 접근성 향상: CSS를 사용하면 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하는 반응형 디자인을 구현할 수 있다. 이를 통해 다양한 환경에서 웹 페이지의 접근성과 사용자 경험을 향상시킬 수 있다.[17]
CSS는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다.
5. 1. 내용과 표현의 분리
CSS가 등장하기 전에는 HTML 문서의 거의 모든 표현 속성이 HTML 마크업 내에 포함되어 있었다. 모든 글꼴 색상, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로, 종종 반복적으로 설명해야 했다. CSS를 사용하면 작성자가 해당 정보의 대부분을 스타일 시트인 다른 파일로 이동할 수 있어 HTML이 훨씬 더 간단해진다.[17]
예를 들어, 머리글(h1 요소), 부제(h2), 하위 부제(h3) 등은 HTML을 사용하여 구조적으로 정의된다. 인쇄물 및 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조 선택은 ''표현적''이다.
CSS가 나오기 전에는, 모든 h2 머리글에 그러한 타이포그래피 특성을 할당하려는 문서 작성자는 해당 머리글 유형이 발생할 때마다 HTML 표현 마크업을 반복해야 했다. 이로 인해 문서가 더 복잡해지고 커지며 오류가 발생하기 쉽고 유지 관리하기 어려웠다. CSS를 사용하면 표현과 구조를 분리할 수 있다. CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 및 기타 많은 타이포그래피 특성을 정의할 수 있으며 화면 및 인쇄 보기에 대해 독립적으로 수행할 수 있다. 또한 CSS는 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의한다. W3C는 이제 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했다.[17]
CSS 이전의 HTML에서 빨간색 텍스트로 정의된 제목 요소는 다음과 같이 작성되었다.
```html
Chapter 1.
```
CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있다.
```html
Chapter 1.
```
내부 스타일 또는 외부 CSS 파일을 사용하면 CSS의 장점을 활용할 수 있다. 예를 들어, 문서에 다음 스타일 요소가 포함되어 있다고 가정해 보자.
```html
```
문서의 모든 h1 요소는 명시적인 코드가 필요 없이 자동으로 빨간색이 된다. 작성자가 나중에 h1 요소를 파란색으로 변경하려는 경우 스타일 요소를 다음과 같이 변경하여 수행할 수 있다.
```html
```
문서를 일일이 살펴보면서 각 개별 h1 요소의 색상을 변경하는 것보다 훨씬 간편하다.
스타일은 외부에 CSS 파일로 배치하고 아래와 같은 구문을 사용하여 불러올 수 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일을 편집하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정 (테마 또는 글꼴 크기), 다양한 웹 브라우저와의 호환성, 콘텐츠를 보는 데 사용되는 장치 유형 (예: 데스크톱, 태블릿 또는 모바일 장치), 화면 해상도, 사용자의 위치 및 기타 여러 변수가 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하여 접근성과 사용자 경험을 향상시킨다.
5. 2. 사이트 전체의 일관성 유지
CSS 등장 이전에는 HTML 문서 내에 모든 표현 속성(글꼴 색상, 배경 스타일, 요소 정렬, 테두리, 크기 등)을 명시적이고 반복적으로 작성해야 했다. CSS를 사용하면 이러한 정보 대부분을 스타일 시트라는 별도의 파일로 이동하여 HTML을 간결하게 만들 수 있다.
예를 들어, 머리글(h1), 부제(h2), 하위 부제(h3) 등은 HTML로 구조적으로 정의되지만, 글꼴, 크기, 색상, 강조 등의 표현적인 요소는 CSS를 통해 분리하여 정의할 수 있다.
CSS 이전에는 모든 `h2` 머리글에 특정 타이포그래피 속성을 지정하려면 해당 머리글이 나올 때마다 HTML 표현 마크업을 반복해야 했다. 이로 인해 문서는 복잡해지고, 커지며, 오류가 발생하기 쉽고, 유지 관리하기 어려웠다. CSS를 통해 표현과 구조를 분리하면 이러한 문제를 해결할 수 있다.
```html
```
위와 같이 스타일을 지정하면, 모든 `h1` 요소는 명시적인 코드 없이 자동으로 파란색이 된다. 나중에 `h1` 요소의 색상을 변경하려면 스타일 시트만 수정하면 되므로, 각 요소를 개별적으로 수정하는 것보다 훨씬 간편하다.
스타일은 외부 CSS 파일에 배치하고 아래와 같이 불러올 수 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일만 수정하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
여러 스타일 시트를 가져와서 출력 장치(화면, 인쇄 등)에 따라 다른 스타일을 적용할 수도 있다. 가장 높은 우선순위를 가진 스타일 시트가 콘텐츠 표시를 제어하며, 설정되지 않은 선언은 낮은 우선순위 소스(예: 사용자 에이전트 스타일)로 전달된다. 이 과정을 "캐스케이딩"이라고 한다.
CSS를 효과적으로 사용하면 전역 스타일 시트를 통해 사이트 전체 요소의 스타일을 지정할 수 있다. 요소 스타일을 변경해야 할 때 전역 스타일 시트의 규칙을 편집하면 되므로, CSS 이전보다 유지 관리가 쉽고, 비용과 시간을 절약할 수 있다.
스타일 정보는 작성자 스타일 시트나 사용자 에이전트 설정(사용자 스타일 시트)에 기재할 수 있다. 사용자 에이전트는 고유 스타일(기본 스타일 시트)을 가질 수도 있다. 작성자 스타일 시트는 마크업 문서 안에 직접 작성하거나 별도 문서로 불러올 수 있는데, CSS의 편리성을 위해 별도 문서로 불러오는 것이 권장된다.[17]
5. 3. 대역폭 절약
CSS가 등장하기 전에는 HTML 문서의 표현 속성이 HTML 마크업 내에 포함되어 있어서 모든 글꼴 색상, 배경 스타일 등을 HTML 내에서 반복적으로 설명해야 했다. CSS를 사용하면 이러한 정보 대부분을 스타일 시트라는 다른 파일로 이동할 수 있어 HTML을 간결하게 만들 수 있다.
예를 들어, 머리글(h1), 부제(h2) 등은 HTML을 사용하여 구조적으로 정의되지만, 글꼴, 크기, 색상 등은 표현적인 요소이다. CSS 이전에는 이러한 타이포그래피 특성을 각 머리글에 반복해서 지정해야 했기 때문에 문서가 복잡해지고 유지 관리하기 어려웠다. CSS를 사용하면 표현과 구조를 분리하여 이러한 문제를 해결할 수 있다.
CSS를 사용하면 다음과 같이 HTML 표현 속성 대신 스타일 속성을 사용할 수 있다.
```html
1장
```
스타일 속성을 내부 스타일 요소나 외부 CSS 파일에 배치하면 CSS의 장점이 더 명확해진다. 예를 들어, 문서에 다음과 같은 내부 스타일 요소를 포함하면 모든 `h1` 요소가 자동으로 빨간색이 된다.
```html
```
나중에 `h1` 요소의 색상을 변경하려면 스타일 요소만 수정하면 되므로, 각 요소를 개별적으로 수정하는 것보다 훨씬 간편하다.
스타일을 외부 CSS 파일에 배치하고 다음과 같이 로드할 수도 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
스타일 시트는 `class`, 유형 등에 따라 선택된 HTML 요소에 대해 스타일을 한 번 지정하므로, 각 요소마다 스타일 정보를 반복하는 것보다 훨씬 효율적이다. 외부 스타일 시트는 일반적으로 브라우저 캐시에 저장되어 여러 페이지에서 다시 로드하지 않고 사용할 수 있어 네트워크를 통한 데이터 전송량을 줄여준다. 즉, 대역폭 절약에도 도움이 된다.[17]
5. 4. 페이지 재포맷
CSS가 등장하기 전에는 HTML 문서의 표현 속성이 HTML 마크업 내에 포함되어 있었습니다. 글꼴 색상, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로 설명해야 했습니다. CSS를 사용하면 이러한 정보의 대부분을 스타일 시트라는 다른 파일로 이동할 수 있어 HTML이 훨씬 간단해집니다.
예를 들어, 머리글(h1), 부제(h2), 하위 부제(h3) 등은 HTML을 사용하여 구조적으로 정의됩니다. 인쇄물 및 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조 선택은 ''표현적''입니다.
CSS 이전에는 모든 `h2` 머리글에 타이포그래피 특성을 할당하려는 문서 작성자는 해당 머리글 유형이 발생할 때마다 HTML 표현 마크업을 반복해야 했습니다. CSS를 사용하면 표현과 구조를 분리할 수 있습니다. CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 등 다양한 타이포그래피 특성을 정의할 수 있으며, 화면 및 인쇄 보기에 대해 독립적으로 수행할 수 있습니다. 또한 CSS는 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의합니다. W3C는 이제 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했습니다.[17]
CSS 이전의 HTML에서 빨간색 텍스트로 정의된 제목 요소는 다음과 같이 작성되었습니다.
```html
Chapter 1.
```
CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있습니다.
```html
Chapter 1.
```
내부 스타일 요소 또는 외부 CSS 파일에 스타일 속성을 배치하면, CSS를 더욱 유용하게 사용할 수 있습니다. 예를 들어, 문서에 다음 스타일 요소가 포함되어 있다고 가정해 보겠습니다.
```html
```
문서의 모든 `h1` 요소는 명시적인 코드가 필요 없이 자동으로 빨간색이 됩니다. 작성자가 나중에 `h1` 요소를 파란색으로 변경하려는 경우, 스타일 요소를 다음과 같이 변경하여 수행할 수 있습니다.
```html
```
이는 문서를 일일이 살펴보면서 각 `h1` 요소의 색상을 변경하는 것보다 훨씬 간편합니다.
스타일은 외부 CSS 파일에 배치하고 다음과 유사한 구문을 사용하여 로드할 수도 있습니다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일을 편집하여 여러 문서의 스타일을 변경할 수 있습니다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 합니다. 이러한 매개변수에는 사용자 기본 설정 (테마 또는 글꼴 크기), 다양한 웹 브라우저와의 호환성, 콘텐츠를 보는 데 사용되는 장치 유형 (예: 데스크톱, 태블릿 또는 모바일 장치), 화면 해상도, 사용자의 지리적 위치 및 기타 여러 변수가 포함됩니다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하여 광범위한 환경에서 접근성과 사용자 경험을 향상시킵니다.
단 한 줄의 간단한 변경만으로, 동일한 페이지에 대해 다른 스타일 시트를 사용할 수 있습니다. 이는 접근성 측면에서 유리하며, 페이지나 사이트를 다양한 대상 장치에 맞게 조정할 수 있는 기능을 제공합니다.
5. 5. 접근성 향상
CSS를 사용하면 HTML 문서의 표현 속성을 스타일 시트로 분리하여 HTML 구조를 더 간단하게 만들고, 유지 보수를 쉽게 할 수 있다. 또한, 다양한 장치와 화면 크기에 맞게 반응형 웹 페이지를 디자인할 수 있어 접근성이 향상된다.[17]
CSS 이전에는 HTML의 표현 마크업을 반복해서 사용해야 했기 때문에 문서가 복잡해지고 유지 관리가 어려웠다. CSS를 사용하면 표현과 구조를 분리하여 이러한 문제를 해결할 수 있다. 예를 들어, CSS를 사용하면 글꼴, 크기, 색상, 강조와 같은 타이포그래피 특성을 정의할 수 있으며, 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의할 수 있다. W3C는 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했다.[17]
다음은 CSS를 사용하여 제목 요소의 색상을 빨간색으로 지정하는 예시이다.
```html
Chapter 1.
```
스타일 속성을 내부 스타일 요소나 외부 CSS 파일에 배치하면 CSS의 강력함을 더욱 잘 활용할 수 있다. 예를 들어, 문서에 다음과 같은 스타일 요소를 포함하면 문서의 모든 `` 요소가 자동으로 빨간색이 된다.
```html
```
나중에 `` 요소의 색상을 변경하려면 스타일 요소만 수정하면 되므로, 문서를 일일이 수정하는 것보다 훨씬 간편하다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등이 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하도록 돕는다.
CSS가 없으면 웹 디자이너는 시각 장애가 있는 사용자의 접근성을 방해하는 HTML 테이블과 같은 기술로 페이지를 레이아웃해야 했다. 하지만 CSS를 사용하면 이러한 문제 없이 웹 페이지 레이아웃을 구성할 수 있다.
6. 브라우저 지원
Microsoft의 인터넷 익스플로러 3[25]이 1996년에 출시되었으며, CSS에 대한 제한적인 지원을 제공했다. IE 4와 넷스케이프 4.x는 더 많은 지원을 추가했지만, 일반적으로 불완전했고 CSS를 유용하게 사용할 수 없게 만드는 많은 소프트웨어 버그가 있었다. 2000년 3월, Apple 매킨토시용 인터넷 익스플로러 5.0은 CSS 1을 99% 이상 지원하는 최초의 브라우저였으며,[35] 다른 브라우저들도 곧 뒤따랐고, 그들 중 많은 브라우저들이 CSS 2의 일부를 추가로 구현했다.
그러나 "버전 5" 웹 브라우저들이 CSS를 상당히 완벽하게 구현하기 시작했을 때에도 특정 영역에서는 여전히 오류가 있었다. Microsoft 인터넷 익스플로러 5. x for Windows는 CSS 표준과 비교했을 때 CSS 박스 모델을 제대로 구현하지 못했다. 이러한 불일치와 기능 지원의 차이로 인해 디자이너들은 CSS 해킹 및 필터라고 불리는 우회 방법을 사용하지 않고는 브라우저와 컴퓨팅 플랫폼에서 일관된 모양을 얻는 것이 어려웠다.
개별 브라우저 벤더들은 표준화 및 보편화에 앞서 때때로 새로운 매개변수를 도입했다. 미래의 구현에 간섭하는 것을 방지하기 위해 벤더들은 매개변수 앞에 고유한 이름을 붙였다. 예를 들어, 모질라 파이어폭스에는 `-moz-`, 애플 사파리의 브라우징 엔진에서 이름을 딴 `-webkit-`, 오페라 브라우저에는 `-o-`, 마이크로소프트 인터넷 익스플로러와 EdgeHTML을 사용하는 초기 버전의 마이크로소프트 엣지에는 `-ms-`를 사용했다.
웹 브라우저는 웹 페이지를 렌더링하기 위해 각기 다른 레이아웃 엔진을 사용하며, CSS 기능에 대한 지원은 브라우저마다 일관되지 않는다. CSS의 새로운 기능 도입은 주요 브라우저의 지원 부족으로 인해 방해받을 수 있다. 예를 들어, 인터넷 익스플로러는 많은 CSS 3 기능을 추가하는 데 시간이 걸렸고, 이는 해당 기능의 채택을 늦추고 개발자들 사이에서 브라우저의 평판을 손상시켰다. 사용자에게 일관된 경험을 제공하기 위해, 웹 개발자는 여러 운영 체제, 브라우저 및 브라우저 버전을 대상으로 사이트를 테스트하는 경우가 많으며, 이는 개발 시간과 복잡성을 증가시킨다.
BrowserStack과 같은 도구는 이러한 환경을 유지 관리하는 복잡성을 줄이기 위해 구축되었다. 이러한 테스트 도구 외에도, 많은 사이트에서는 [https://caniuse.com/ CanIUse] 및 MDN Web Docs를 포함하여 특정 CSS 속성에 대한 브라우저 지원 목록을 유지 관리한다. CSS 3은 `@supports` 지시문을 제공하는 기능 쿼리를 정의하며, 이를 통해 개발자는 특정 기능에 대한 지원을 직접 CSS 내에서 브라우저를 대상으로 지정할 수 있다.[66]
7. 제한 사항
CSS의 현재 기능에는 몇 가지 주목할 만한 제한 사항이 있다.
- 명시적인 스코프(범위) 선언 불가: `z-index`와 같은 속성의 스코핑 규칙은 `position: absolute` 또는 `position: relative` 속성을 가진 가장 가까운 상위 요소를 찾는다. 이러한 방식은 원치 않는 결과를 초래할 수 있다. 예를 들어, 요소의 위치를 조정해야 할 때 새로운 범위를 명시적으로 선언하는 것은 불가능하며, 이는 상위 요소의 원하는 범위를 사용하는 것을 방해한다.
- 의사 클래스의 동적 동작 제어 불가: CSS는 `:hover`와 같이 사용자의 피드백에 따라 조건부로 스타일을 적용하는 의사 클래스를 구현한다. `:hover`는 동적이며(자바스크립트의 "onmouseover"와 동일) 오용될 가능성이 있다(예: 커서 근접 팝업 구현).[68] 그러나 CSS는 클라이언트가 이를 비활성화하거나("disable"과 같은 속성) 그 영향을 제한할 수 있는 기능(각 속성에 대한 "nochange"와 같은 값)이 없다.
- 규칙 이름 지정 불가: CSS 규칙에는 이름을 지정할 수 없다. 이는 클라이언트 측 스크립트에서 선택자가 변경되더라도 해당 규칙을 참조할 수 있게 해준다.
- 규칙 간 스타일 포함 불가: CSS 스타일은 원하는 효과를 얻기 위해 여러 규칙에 걸쳐 중복되어야 하는 경우가 많아 유지 관리가 더 많이 필요하고 더욱 철저한 테스트를 요구한다. 이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었지만 이후 폐기되었다.[69][70] 대신, 작성자는 Sass, Less, 또는 Stylus와 같이 CSS로 컴파일되는 더 정교한 스타일시트 언어를 사용하여 이 기능을 얻을 수 있다.
- 마크업 변경 없이 특정 텍스트 타겟팅 불가: ::first-letter 가상 요소 외에는, 마크업을 변경하지 않고 특정 텍스트 범위를 지정할 수 없다.
7. 1. 명시적인 스코프 선언 불가
`z-index`와 같은 속성의 스코핑 규칙은 `position: absolute` 또는 `position: relative` 속성을 가진 가장 가까운 상위 요소를 찾는다. 이러한 방식은 원치 않는 결과를 초래할 수 있다. 예를 들어, 요소의 위치를 조정해야 할 경우 새로운 범위를 명시적으로 선언하는 것은 불가능하며, 이는 상위 요소의 원하는 범위를 사용하는 것을 방해한다.
7. 2. 의사 클래스의 동적 동작 제어 불가
CSS는 대체 스타일의 조건부 적용을 통해 어느 정도의 사용자 피드백을 허용하는 의사 클래스를 구현한다. 하나의 CSS 의사 클래스인 `:hover`는 동적이며(자바스크립트의 "onmouseover"와 동일) 오용의 가능성이 있다(예: 커서 근접 팝업 구현).[68] 그러나 CSS는 클라이언트가 이를 비활성화할 수 있는 기능("disable"과 같은 속성)이나 그 영향을 제한할 수 있는 기능(각 속성에 대한 "nochange"와 같은 값)이 없다.
7. 3. 규칙 이름 지정 불가
CSS 규칙에는 이름을 지정할 수 없다. 이는 클라이언트 측 스크립트에서 선택자가 변경되더라도 해당 규칙을 참조할 수 있게 해준다.
7. 4. 규칙 간 스타일 포함 불가
CSS 스타일은 원하는 효과를 얻기 위해 여러 규칙에 걸쳐 중복되어야 하는 경우가 많아 유지 관리가 더 많이 필요하고 더욱 철저한 테스트를 요구한다. 이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었지만 이후 폐기되었다.[69][70] 대신, 작성자는 Sass, Less, 또는 Stylus와 같이 CSS로 컴파일되는 더 정교한 스타일시트 언어를 사용하여 이 기능을 얻을 수 있다.
7. 5. 마크업 변경 없이 특정 텍스트 타겟팅 불가
::first-letter 가상 요소 외에는, 마크업을 변경하지 않고 특정 텍스트 범위를 지정할 수 없다.
8. 표준화
W3C은 CSS 표준을 제정하고 관리하며, 웹 개발자들이 표준에 맞는 CSS를 사용할 수 있도록 권장한다.
8. 1. CSS 프레임워크
CSS 프레임워크는 CSS를 사용하여 웹 페이지의 스타일을 더 쉽고 표준에 맞게 지정할 수 있도록 만들어진 라이브러리이다. 블루프린트, 부트스트랩, 파운데이션 등이 대표적인 CSS 프레임워크이다. 프로그래밍 및 스크립팅 언어 라이브러리와 마찬가지로, CSS 프레임워크는 일반적으로 HTML head|헤드영어에서 참조되는 외부 .css 시트로 통합되어 웹 페이지 디자인과 레이아웃을 위한 여러 옵션을 제공한다. 많은 CSS 프레임워크가 있지만, 일부 개발자들은 빠른 프로토타입 제작이나 학습 목적으로만 사용하고, 실제 사이트에는 디자인, 유지 관리 및 다운로드 오버헤드를 고려하여 각 사이트에 맞는 CSS를 직접 제작하는 것을 선호한다.[71]
8. 1. 1. Blueprint
블루프린트는 CSS 프레임워크의 일종으로, 웹 개발을 더욱 쉽고 빠르게 만드는 것을 목표로 한다. 이 프레임워크는 CSS와 자바스크립트 파일 모음으로 구성되어 있으며, 웹사이트의 레이아웃, 타이포그래피, 그리고 기타 시각적 요소를 제어하는 데 사용된다. 블루프린트는 그리드 시스템, 기본 스타일, 유틸리티 클래스를 제공하여 개발자가 일관성 있고 접근성이 뛰어난 웹사이트를 쉽게 만들 수 있도록 돕는다.[71]
8. 1. 2. Bootstrap
부트스트랩은 CSS 프레임워크 중 하나로, 웹 페이지 디자인과 레이아웃을 위한 다양한 기능을 제공한다.[71]
8. 1. 3. Foundation
파운데이션은 CSS 프레임워크 중 하나이다.[71]
8. 2. 디자인 방법론
프로젝트에서 사용되는 CSS 리소스의 크기가 증가함에 따라 개발팀은 종종 CSS를 체계적으로 관리하기 위한 공통된 디자인 방법론을 결정해야 한다. 목표는 개발 용이성, 개발 중 협업 용이성 및 브라우저에서 배포된 스타일시트의 성능이다. 인기 있는 방법론으로는 OOCSS(객체 지향 CSS), ACSS(원자적 CSS), CSS(유기적 캐스케이드 스타일 시트), SMACSS(확장 가능하고 모듈형 CSS 아키텍처) 및 BEM(블록, 요소, 수정자) 등이 있다.[71]
참조
[1]
웹사이트
W3C HTML5 Logo
https://www.w3.org/h[...]
2024-11-20
[2]
웹사이트
CSS developer guide
https://developer.mo[...]
2015-09-24
[3]
서적
JavaScript: the definitive guide
https://www.worldcat[...]
O'Reilly
2011-04-18
[4]
웹사이트
What is CSS?
https://www.w3.org/s[...]
World Wide Web Consortium
2010-12-01
[5]
뉴스
Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript
https://www.htmlgood[...]
HTMLGoodies
2010-07-23
[6]
웹사이트
W3C CSS validation service
https://jigsaw.w3.or[...]
2012-06-30
[7]
웹사이트
W3C CSS2.1 specification for pseudo-elements and pseudo-classes
https://www.w3.org/T[...]
World Wide Web Consortium
2012-04-30
[8]
웹사이트
Selectors
https://www.w3.org/T[...]
W3C
[9]
웹사이트
Selectors Level 3
https://www.w3.org/T[...]
W3C
2014-05-30
[10]
웹사이트
CSS Syntax Module Level 3
https://www.w3.org/T[...]
2023-10-01
[11]
웹사이트
W3C CSS2.1 specification for rule sets, declaration blocks, and selectors
https://www.w3.org/T[...]
World Wide Web Consortium
2009-06-20
[12]
웹사이트
Full property table
https://www.w3.org/T[...]
W3C
2014-05-30
[13]
웹사이트
Index of CSS properties
https://www.w3.org/S[...]
2020-08-09
[14]
웹사이트
CSS Color
https://developer.mo[...]
MDN Web Docs
2024-04-05
[15]
웹사이트
6.1 Length units
https://www.w3.org/T[...]
2019-06-20
[16]
웹사이트
5. Distance Units: the <length> type
https://www.w3.org/T[...]
2019-06-20
[17]
웹사이트
HTML 5. A vocabulary and associated APIs for HTML and XHTML
https://www.w3.org/T[...]
World Wide Web Consortium
2014-06-28
[18]
서적
Cascading Style Sheets: The Definitive Guide
https://shop.oreilly[...]
O'Reilly Media, Inc.
2014-02-16
[19]
웹사이트
Assigning property values, Cascading, and Inheritance
https://www.w3.org/T[...]
2014-06-10
[20]
웹사이트
Can a CSS class inherit one or more other classes?
https://stackoverflo[...]
2017-09-10
[21]
뉴스
Shorthand properties
https://developer.mo[...]
Mozilla Developers
2018-01-30
[22]
웹사이트
9.3 Positioning schemes
https://www.w3.org/T[...]
W3C
2011-02-16
[23]
서적
Spring into HTML and CSS
Pearson Education, Inc
[24]
웹사이트
Cascading HTML style sheets – a proposal
https://www.w3.org/P[...]
CERN
2014-05-25
[25]
서적
Cascading Style Sheets, designing for the Web
https://archive.org/[...]
Addison Wesley
2010-06-23
[26]
웹사이트
Cascading Style Sheets, level 1
https://www.w3.org/T[...]
World Wide Web Consortium
2014-03-07
[27]
웹사이트
Simple style sheets for SGML & HTML on the web
https://www.w3.org/P[...]
World Wide Web Consortium
1995-04-14
[28]
웹사이트
Cascading Style Sheets
https://people.opera[...]
University of Oslo
2014-09-03
[29]
웹사이트
Interview Robert Cailliau on the WWW Proposal: "How It Really Happened."
https://www.computer[...]
Institute of Electrical and Electronics Engineers
1997-11
[30]
웹사이트
Stream-based Style sheet Proposal
https://www.w3.org/P[...]
1995-03-31
[31]
웹사이트
Libwww Hackers
https://www.w3.org/L[...]
World Wide Web Consortium
2002-06-07
[32]
웹사이트
Yves Lafon
https://www.w3.org/P[...]
World Wide Web Consortium
2010-06-17
[33]
웹사이트
The W3C Team: Technology and Society
https://www.w3.org/P[...]
World Wide Web Consortium
2008-07-18
[34]
웹사이트
JavaScript-Based Style Sheets
https://www.w3.org/S[...]
W3C
1996-08-22
[35]
웹사이트
CSS software
https://www.w3.org/S[...]
W3C
2011-01-15
[36]
웹사이트
CSS 2.1 – Anne's Weblog
https://annevankeste[...]
2011-02-16
[37]
웹사이트
Archive of W3C News in 2007
https://www.w3.org/N[...]
World Wide Web Consortium
2011-02-16
[38]
웹사이트
Incorrect MIME Type for CSS Files
https://web.archive.[...]
Mozilla
2002-03-18
[39]
웹사이트
File Types
https://donsnotes.co[...]
2009-11-27
[40]
웹사이트
css file extension details
https://web.archive.[...]
File extension database
2010-03-12
[41]
웹사이트
What Are CSS Vendor or Browser Prefixes?
https://www.lifewire[...]
2019-11-12
[42]
웹사이트
Compatibility Standard
https://compat.spec.[...]
2024-01-24
[43]
웹사이트
CSS Snapshot 2023 – 2.4. CSS Levels
https://www.w3.org/T[...]
2023-12-07
[44]
서적
Cascading style sheets: designing for the Web
https://archive.org/[...]
Addison Wesley Longman
1997
[45]
웹사이트
Cascading Style Sheets, level 1
https://www.w3.org/T[...]
W3C
[46]
웹사이트
Cascading Style Sheets level 1 specification
https://www.w3.org/T[...]
W3C
[47]
웹사이트
Aural style sheets
https://www.w3.org/T[...]
W3C
2014-10-26
[48]
웹사이트
Cascading Style Sheets, level 2
https://www.w3.org/T[...]
W3C
[49]
웹사이트
Cascading Style Sheets, level 2 revision 1
https://www.w3.org/T[...]
W3C
[50]
웹사이트
Cascading Style Sheets Standard Boasts Unprecedented Interoperability
https://www.w3.org/2[...]
W3C
[51]
웹사이트
Descriptions of all CSS specifications
https://www.w3.org/S[...]
World Wide Web Consortium
2011-03-03
[52]
웹사이트
CSS current work
https://www.w3.org/S[...]
World Wide Web Consortium
2011-03-03
[53]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2010
https://www.w3.org/T[...]
World Wide Web Consortium
2011-03-03
[54]
웹사이트
All CSS specifications
https://www.w3.org/S[...]
W3C
2014-05-30
[55]
웹사이트
A Word About CSS4
https://www.xanthir.[...]
2012-10-18
[56]
웹사이트
CSS Flexible Box Layout Module Level 1
https://www.w3.org/T[...]
W3C
2012-10-18
[57]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2007
https://www.w3.org/T[...]
2016-07-18
[58]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2010
https://www.w3.org/T[...]
2011-03-03
[59]
웹사이트
CSS Snapshot 2015
https://www.w3.org/T[...]
2017-02-13
[60]
웹사이트
CSS Snapshot 2017
https://www.w3.org/T[...]
2017-02-13
[61]
웹사이트
CSS Snapshot 2018
https://www.w3.org/T[...]
2019-01-02
[62]
웹사이트
CSS
https://caniuse.com/[...]
2019-01-26
[63]
웹사이트
CSS
https://developer.mo[...]
2023-07-21
[64]
웹사이트
Call for Participation in CSS4 Community Group
https://www.w3.org/c[...]
2020-02-27
[65]
뉴스
CSS3 Solutions for Internet Explorer
https://www.smashing[...]
2016-10-12
[66]
웹사이트
Using Feature Queries in CSS
https://hacks.mozill[...]
2016-10-12
[67]
뉴스
Looking at the Web with Internet Explorer 6, one last time
https://arstechnica.[...]
2016-10-12
[68]
웹사이트
Pure CSS Popups
https://web.archive.[...]
meyerweb.com
2009-11-19
[69]
웹사이트
CSS apply rule
https://web.archive.[...]
GitHub
2016-02-27
[70]
웹사이트
Why I Abandoned @apply — Tab Completion
https://www.xanthir.[...]
[71]
서적
Handcrafted CSS: More Bulletproof Web Design
https://books.google[...]
New Riders
2010-06-19
[72]
웹사이트
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
https://clubmate.fi/[...]
Hiljá
2015-06-02
[73]
문서
[74]
문서
Inheritance propagates property values from parent elements to their children.
https://www.w3.org/T[...]
W3C CSSWG
2022
[75]
문서
en:Internet Explorer box model bug
[76]
간행물
CSS Snapshot 2023
2023-02-14
[77]
웹사이트
All CSS specifications
https://www.w3.org/S[...]
W3C
2023-09-06
[78]
문서
CSS Snapshot 2023 ... This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023.
https://www.w3.org/T[...]
CSSWG
2023
[79]
웹인용
CSS developer guide
https://developer.mo[...]
2015-09-24
[80]
문서
HTML의 index.html과 같은 것
[81]
저널
Cascading HTML style sheets - a proposal
http://www.w3.org/Pe[...]
CERN
1994-10-10
[82]
문서
CSS: under construction
http://www.w3.org/St[...]
W3C
[83]
문서
Introduction to CSS3, W3C Working Draft, 23 May 2001
http://www.w3.org/TR[...]
[84]
웹인용
A Word About CSS4
http://www.xanthir.c[...]
2012-10-18
[85]
웹인용
W3C CSS Selectors Level 4
http://www.w3.org/TR[...]
W3.org
2014-05-30
[86]
웹인용
W3C CSS2.1 specification for rule sets, declaration blocks, and selectors
http://www.w3.org/TR[...]
World Wide Web Consortium
2009-06-20
[87]
문서
예: {{code|lang=css|code=margin: 30px !important;}}
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com
` 헤더 부분이 흰색 배경으로 남게 된다.
4. 6. 공백 (Whitespace)
CSS 코드에서 속성과 선택자 사이의 공백은 무시된다. 따라서 다음 두 코드는 기능적으로 동일하다.[21]
```css
body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}
```
```css
body {
overflow: hidden;
background-color: #000000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
}
4. 6. 1. 들여쓰기
CSS의 가독성을 위해 서식을 지정하는 일반적인 방법 중 하나는 각 속성을 들여쓰고 자체 줄에 배치하는 것이다. CSS의 가독성을 위해 서식을 지정하는 것 외에도, 단축 속성을 사용하여 코드를 더 빠르게 작성할 수 있으며, 이는 렌더링 시에도 더 빠르게 처리된다.[21]
때로는 여러 속성 값이 자체 줄로 들여쓰기된다.
4. 7. 위치 지정 (Positioning)
CSS 2.1은 세 가지 위치 지정 방식을 정의한다.
- 일반 흐름: HTML 요소가 텍스트처럼 가로로 배치되거나, 단락처럼 세로로 쌓이는 방식이다. 블록 또는 인라인 요소의 상대 위치 지정 및 런인 박스도 포함된다.
- 플로트: 요소가 일반 흐름에서 벗어나 왼쪽이나 오른쪽으로 최대한 이동하고, 다른 콘텐츠는 플로트된 요소 옆으로 흐르는 방식이다.
- 절대 위치 지정: 요소가 다른 요소와 관계없이 독립적인 위치를 가지는 방식이다.
4. 7. 1. Position 속성
CSS 2.1은 세 가지 위치 지정 방식을 정의한다.
- 일반 흐름:
- * ''인라인'' 요소는 텍스트의 단어에서 글자가 배치되는 방식과 동일하게, 사용 가능한 공간을 가로질러 차례대로 배치되며 공간이 더 이상 없으면 아래에 새 줄을 시작한다.
- * ''블록'' 요소는 단락이나 글머리 기호 목록의 항목처럼 수직으로 쌓인다.
- * 일반 흐름에는 블록 또는 인라인 요소의 상대 위치 지정 및 런인 박스도 포함된다.
- 플로트:
- * 플로트된 요소는 일반 흐름에서 제거되어 사용 가능한 공간에서 최대한 왼쪽 또는 오른쪽으로 이동한다.
- * 그런 다음 다른 콘텐츠는 플로트된 요소 옆으로 흐른다.
- 절대 위치 지정:
- * 절대 위치 지정된 요소는 다른 요소의 일반 흐름에 포함되지 않으며 영향을 미치지 않는다.
- * 다른 요소와 독립적으로 컨테이너에 할당된 위치를 차지한다.
`position` 속성에는 다섯 가지 가능한 값이 있다. 요소가 `static` 이외의 방식으로 위치가 지정되면 추가 속성인 `top`, `bottom`, `left`, `right`를 사용하여 오프셋과 위치를 지정한다. position이 static인 요소는 `top`, `bottom`, `left` 또는 `right` 속성의 영향을 받지 않는다.
4. 7. 2. Float 및 Clear
`float` 속성은 세 가지 값 중 하나를 가질 수 있다. `absolute` 위치나 `fixed` 항목은 플로팅될 수 없다. 다른 요소들은 일반적으로 해당 요소의 `clear` 속성에 의해 방지되지 않는 한 플로팅된 항목 주위로 흐른다.
- `left`: 항목은 표시될 줄의 왼쪽에 '플로팅'된다. 다른 항목들은 오른쪽 주위로 흐를 수 있다.
- `right`: 항목은 표시될 줄의 오른쪽에 '플로팅'된다. 다른 항목들은 왼쪽 주위로 흐를 수 있다.
- `clear`: 요소가 왼쪽(`clear:left`), 오른쪽(`clear:right`), 또는 양쪽(`clear:both`)의 플로팅된 요소 아래에 나타나도록 강제한다.[22][23]
5. 활용
CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어이다. CSS를 활용하면 HTML로 작성된 내용과 CSS로 작성된 표현을 분리하여 웹 페이지를 더욱 효율적으로 구성하고 관리할 수 있다.
CSS는 다음과 같은 다양한 방식으로 활용된다.
- 내용과 표현의 분리: CSS를 사용하면 HTML 문서에서 내용과 표현을 분리할 수 있다. HTML은 문서의 구조와 내용을 담당하고, CSS는 디자인과 레이아웃을 담당한다. 이렇게 분리하면 HTML 코드가 간결해지고, 유지 보수가 쉬워진다.[17]
- 사이트 전체의 일관성 유지: CSS를 사용하면 웹 사이트 전체의 스타일을 일관성 있게 유지할 수 있다. 전역 스타일 시트를 통해 사이트 전체 요소의 스타일을 지정하고, 필요에 따라 스타일 시트를 수정하면 되므로 유지 관리가 쉽고, 시간과 비용을 절약할 수 있다.[17]
- 대역폭 절약: CSS 스타일 시트는 일반적으로 브라우저에 캐시되어 여러 페이지에서 다시 로드할 필요가 없으므로, 네트워크를 통해 전송되는 데이터 양을 줄여 대역폭을 절약할 수 있다.[17]
- 페이지 재포맷: CSS를 사용하면 단 한 줄의 코드로 동일한 페이지에 대해 다른 스타일 시트를 적용할 수 있다. 이를 통해 다양한 대상 장치에 맞게 페이지를 조정하거나, 접근성을 향상시킬 수 있다.[17]
- 접근성 향상: CSS를 사용하면 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하는 반응형 디자인을 구현할 수 있다. 이를 통해 다양한 환경에서 웹 페이지의 접근성과 사용자 경험을 향상시킬 수 있다.[17]
CSS는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다.
5. 1. 내용과 표현의 분리
CSS가 등장하기 전에는 HTML 문서의 거의 모든 표현 속성이 HTML 마크업 내에 포함되어 있었다. 모든 글꼴 색상, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로, 종종 반복적으로 설명해야 했다. CSS를 사용하면 작성자가 해당 정보의 대부분을 스타일 시트인 다른 파일로 이동할 수 있어 HTML이 훨씬 더 간단해진다.[17]
예를 들어, 머리글(h1 요소), 부제(h2), 하위 부제(h3) 등은 HTML을 사용하여 구조적으로 정의된다. 인쇄물 및 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조 선택은 ''표현적''이다.
CSS가 나오기 전에는, 모든 h2 머리글에 그러한 타이포그래피 특성을 할당하려는 문서 작성자는 해당 머리글 유형이 발생할 때마다 HTML 표현 마크업을 반복해야 했다. 이로 인해 문서가 더 복잡해지고 커지며 오류가 발생하기 쉽고 유지 관리하기 어려웠다. CSS를 사용하면 표현과 구조를 분리할 수 있다. CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 및 기타 많은 타이포그래피 특성을 정의할 수 있으며 화면 및 인쇄 보기에 대해 독립적으로 수행할 수 있다. 또한 CSS는 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의한다. W3C는 이제 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했다.[17]
CSS 이전의 HTML에서 빨간색 텍스트로 정의된 제목 요소는 다음과 같이 작성되었다.
```html
Chapter 1.
```
CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있다.
```html
Chapter 1.
```
내부 스타일 또는 외부 CSS 파일을 사용하면 CSS의 장점을 활용할 수 있다. 예를 들어, 문서에 다음 스타일 요소가 포함되어 있다고 가정해 보자.
```html
```
문서의 모든 h1 요소는 명시적인 코드가 필요 없이 자동으로 빨간색이 된다. 작성자가 나중에 h1 요소를 파란색으로 변경하려는 경우 스타일 요소를 다음과 같이 변경하여 수행할 수 있다.
```html
```
문서를 일일이 살펴보면서 각 개별 h1 요소의 색상을 변경하는 것보다 훨씬 간편하다.
스타일은 외부에 CSS 파일로 배치하고 아래와 같은 구문을 사용하여 불러올 수 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일을 편집하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정 (테마 또는 글꼴 크기), 다양한 웹 브라우저와의 호환성, 콘텐츠를 보는 데 사용되는 장치 유형 (예: 데스크톱, 태블릿 또는 모바일 장치), 화면 해상도, 사용자의 위치 및 기타 여러 변수가 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하여 접근성과 사용자 경험을 향상시킨다.
5. 2. 사이트 전체의 일관성 유지
CSS 등장 이전에는 HTML 문서 내에 모든 표현 속성(글꼴 색상, 배경 스타일, 요소 정렬, 테두리, 크기 등)을 명시적이고 반복적으로 작성해야 했다. CSS를 사용하면 이러한 정보 대부분을 스타일 시트라는 별도의 파일로 이동하여 HTML을 간결하게 만들 수 있다.
예를 들어, 머리글(h1), 부제(h2), 하위 부제(h3) 등은 HTML로 구조적으로 정의되지만, 글꼴, 크기, 색상, 강조 등의 표현적인 요소는 CSS를 통해 분리하여 정의할 수 있다.
CSS 이전에는 모든 `h2` 머리글에 특정 타이포그래피 속성을 지정하려면 해당 머리글이 나올 때마다 HTML 표현 마크업을 반복해야 했다. 이로 인해 문서는 복잡해지고, 커지며, 오류가 발생하기 쉽고, 유지 관리하기 어려웠다. CSS를 통해 표현과 구조를 분리하면 이러한 문제를 해결할 수 있다.
```html
```
위와 같이 스타일을 지정하면, 모든 `h1` 요소는 명시적인 코드 없이 자동으로 파란색이 된다. 나중에 `h1` 요소의 색상을 변경하려면 스타일 시트만 수정하면 되므로, 각 요소를 개별적으로 수정하는 것보다 훨씬 간편하다.
스타일은 외부 CSS 파일에 배치하고 아래와 같이 불러올 수 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일만 수정하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
여러 스타일 시트를 가져와서 출력 장치(화면, 인쇄 등)에 따라 다른 스타일을 적용할 수도 있다. 가장 높은 우선순위를 가진 스타일 시트가 콘텐츠 표시를 제어하며, 설정되지 않은 선언은 낮은 우선순위 소스(예: 사용자 에이전트 스타일)로 전달된다. 이 과정을 "캐스케이딩"이라고 한다.
CSS를 효과적으로 사용하면 전역 스타일 시트를 통해 사이트 전체 요소의 스타일을 지정할 수 있다. 요소 스타일을 변경해야 할 때 전역 스타일 시트의 규칙을 편집하면 되므로, CSS 이전보다 유지 관리가 쉽고, 비용과 시간을 절약할 수 있다.
스타일 정보는 작성자 스타일 시트나 사용자 에이전트 설정(사용자 스타일 시트)에 기재할 수 있다. 사용자 에이전트는 고유 스타일(기본 스타일 시트)을 가질 수도 있다. 작성자 스타일 시트는 마크업 문서 안에 직접 작성하거나 별도 문서로 불러올 수 있는데, CSS의 편리성을 위해 별도 문서로 불러오는 것이 권장된다.[17]
5. 3. 대역폭 절약
CSS가 등장하기 전에는 HTML 문서의 표현 속성이 HTML 마크업 내에 포함되어 있어서 모든 글꼴 색상, 배경 스타일 등을 HTML 내에서 반복적으로 설명해야 했다. CSS를 사용하면 이러한 정보 대부분을 스타일 시트라는 다른 파일로 이동할 수 있어 HTML을 간결하게 만들 수 있다.
예를 들어, 머리글(h1), 부제(h2) 등은 HTML을 사용하여 구조적으로 정의되지만, 글꼴, 크기, 색상 등은 표현적인 요소이다. CSS 이전에는 이러한 타이포그래피 특성을 각 머리글에 반복해서 지정해야 했기 때문에 문서가 복잡해지고 유지 관리하기 어려웠다. CSS를 사용하면 표현과 구조를 분리하여 이러한 문제를 해결할 수 있다.
CSS를 사용하면 다음과 같이 HTML 표현 속성 대신 스타일 속성을 사용할 수 있다.
```html
1장
```
스타일 속성을 내부 스타일 요소나 외부 CSS 파일에 배치하면 CSS의 장점이 더 명확해진다. 예를 들어, 문서에 다음과 같은 내부 스타일 요소를 포함하면 모든 `h1` 요소가 자동으로 빨간색이 된다.
```html
```
나중에 `h1` 요소의 색상을 변경하려면 스타일 요소만 수정하면 되므로, 각 요소를 개별적으로 수정하는 것보다 훨씬 간편하다.
스타일을 외부 CSS 파일에 배치하고 다음과 같이 로드할 수도 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
스타일 시트는 `class`, 유형 등에 따라 선택된 HTML 요소에 대해 스타일을 한 번 지정하므로, 각 요소마다 스타일 정보를 반복하는 것보다 훨씬 효율적이다. 외부 스타일 시트는 일반적으로 브라우저 캐시에 저장되어 여러 페이지에서 다시 로드하지 않고 사용할 수 있어 네트워크를 통한 데이터 전송량을 줄여준다. 즉, 대역폭 절약에도 도움이 된다.[17]
5. 4. 페이지 재포맷
CSS가 등장하기 전에는 HTML 문서의 표현 속성이 HTML 마크업 내에 포함되어 있었습니다. 글꼴 색상, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로 설명해야 했습니다. CSS를 사용하면 이러한 정보의 대부분을 스타일 시트라는 다른 파일로 이동할 수 있어 HTML이 훨씬 간단해집니다.
예를 들어, 머리글(h1), 부제(h2), 하위 부제(h3) 등은 HTML을 사용하여 구조적으로 정의됩니다. 인쇄물 및 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조 선택은 ''표현적''입니다.
CSS 이전에는 모든 `h2` 머리글에 타이포그래피 특성을 할당하려는 문서 작성자는 해당 머리글 유형이 발생할 때마다 HTML 표현 마크업을 반복해야 했습니다. CSS를 사용하면 표현과 구조를 분리할 수 있습니다. CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 등 다양한 타이포그래피 특성을 정의할 수 있으며, 화면 및 인쇄 보기에 대해 독립적으로 수행할 수 있습니다. 또한 CSS는 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의합니다. W3C는 이제 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했습니다.[17]
CSS 이전의 HTML에서 빨간색 텍스트로 정의된 제목 요소는 다음과 같이 작성되었습니다.
```html
Chapter 1.
```
CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있습니다.
```html
Chapter 1.
```
내부 스타일 요소 또는 외부 CSS 파일에 스타일 속성을 배치하면, CSS를 더욱 유용하게 사용할 수 있습니다. 예를 들어, 문서에 다음 스타일 요소가 포함되어 있다고 가정해 보겠습니다.
```html
```
문서의 모든 `h1` 요소는 명시적인 코드가 필요 없이 자동으로 빨간색이 됩니다. 작성자가 나중에 `h1` 요소를 파란색으로 변경하려는 경우, 스타일 요소를 다음과 같이 변경하여 수행할 수 있습니다.
```html
```
이는 문서를 일일이 살펴보면서 각 `h1` 요소의 색상을 변경하는 것보다 훨씬 간편합니다.
스타일은 외부 CSS 파일에 배치하고 다음과 유사한 구문을 사용하여 로드할 수도 있습니다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일을 편집하여 여러 문서의 스타일을 변경할 수 있습니다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 합니다. 이러한 매개변수에는 사용자 기본 설정 (테마 또는 글꼴 크기), 다양한 웹 브라우저와의 호환성, 콘텐츠를 보는 데 사용되는 장치 유형 (예: 데스크톱, 태블릿 또는 모바일 장치), 화면 해상도, 사용자의 지리적 위치 및 기타 여러 변수가 포함됩니다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하여 광범위한 환경에서 접근성과 사용자 경험을 향상시킵니다.
단 한 줄의 간단한 변경만으로, 동일한 페이지에 대해 다른 스타일 시트를 사용할 수 있습니다. 이는 접근성 측면에서 유리하며, 페이지나 사이트를 다양한 대상 장치에 맞게 조정할 수 있는 기능을 제공합니다.
5. 5. 접근성 향상
CSS를 사용하면 HTML 문서의 표현 속성을 스타일 시트로 분리하여 HTML 구조를 더 간단하게 만들고, 유지 보수를 쉽게 할 수 있다. 또한, 다양한 장치와 화면 크기에 맞게 반응형 웹 페이지를 디자인할 수 있어 접근성이 향상된다.[17]
CSS 이전에는 HTML의 표현 마크업을 반복해서 사용해야 했기 때문에 문서가 복잡해지고 유지 관리가 어려웠다. CSS를 사용하면 표현과 구조를 분리하여 이러한 문제를 해결할 수 있다. 예를 들어, CSS를 사용하면 글꼴, 크기, 색상, 강조와 같은 타이포그래피 특성을 정의할 수 있으며, 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의할 수 있다. W3C는 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했다.[17]
다음은 CSS를 사용하여 제목 요소의 색상을 빨간색으로 지정하는 예시이다.
```html
Chapter 1.
```
스타일 속성을 내부 스타일 요소나 외부 CSS 파일에 배치하면 CSS의 강력함을 더욱 잘 활용할 수 있다. 예를 들어, 문서에 다음과 같은 스타일 요소를 포함하면 문서의 모든 `` 요소가 자동으로 빨간색이 된다.
```html
```
나중에 `` 요소의 색상을 변경하려면 스타일 요소만 수정하면 되므로, 문서를 일일이 수정하는 것보다 훨씬 간편하다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등이 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하도록 돕는다.
CSS가 없으면 웹 디자이너는 시각 장애가 있는 사용자의 접근성을 방해하는 HTML 테이블과 같은 기술로 페이지를 레이아웃해야 했다. 하지만 CSS를 사용하면 이러한 문제 없이 웹 페이지 레이아웃을 구성할 수 있다.
6. 브라우저 지원
Microsoft의 인터넷 익스플로러 3[25]이 1996년에 출시되었으며, CSS에 대한 제한적인 지원을 제공했다. IE 4와 넷스케이프 4.x는 더 많은 지원을 추가했지만, 일반적으로 불완전했고 CSS를 유용하게 사용할 수 없게 만드는 많은 소프트웨어 버그가 있었다. 2000년 3월, Apple 매킨토시용 인터넷 익스플로러 5.0은 CSS 1을 99% 이상 지원하는 최초의 브라우저였으며,[35] 다른 브라우저들도 곧 뒤따랐고, 그들 중 많은 브라우저들이 CSS 2의 일부를 추가로 구현했다.
그러나 "버전 5" 웹 브라우저들이 CSS를 상당히 완벽하게 구현하기 시작했을 때에도 특정 영역에서는 여전히 오류가 있었다. Microsoft 인터넷 익스플로러 5. x for Windows는 CSS 표준과 비교했을 때 CSS 박스 모델을 제대로 구현하지 못했다. 이러한 불일치와 기능 지원의 차이로 인해 디자이너들은 CSS 해킹 및 필터라고 불리는 우회 방법을 사용하지 않고는 브라우저와 컴퓨팅 플랫폼에서 일관된 모양을 얻는 것이 어려웠다.
개별 브라우저 벤더들은 표준화 및 보편화에 앞서 때때로 새로운 매개변수를 도입했다. 미래의 구현에 간섭하는 것을 방지하기 위해 벤더들은 매개변수 앞에 고유한 이름을 붙였다. 예를 들어, 모질라 파이어폭스에는 `-moz-`, 애플 사파리의 브라우징 엔진에서 이름을 딴 `-webkit-`, 오페라 브라우저에는 `-o-`, 마이크로소프트 인터넷 익스플로러와 EdgeHTML을 사용하는 초기 버전의 마이크로소프트 엣지에는 `-ms-`를 사용했다.
웹 브라우저는 웹 페이지를 렌더링하기 위해 각기 다른 레이아웃 엔진을 사용하며, CSS 기능에 대한 지원은 브라우저마다 일관되지 않는다. CSS의 새로운 기능 도입은 주요 브라우저의 지원 부족으로 인해 방해받을 수 있다. 예를 들어, 인터넷 익스플로러는 많은 CSS 3 기능을 추가하는 데 시간이 걸렸고, 이는 해당 기능의 채택을 늦추고 개발자들 사이에서 브라우저의 평판을 손상시켰다. 사용자에게 일관된 경험을 제공하기 위해, 웹 개발자는 여러 운영 체제, 브라우저 및 브라우저 버전을 대상으로 사이트를 테스트하는 경우가 많으며, 이는 개발 시간과 복잡성을 증가시킨다.
BrowserStack과 같은 도구는 이러한 환경을 유지 관리하는 복잡성을 줄이기 위해 구축되었다. 이러한 테스트 도구 외에도, 많은 사이트에서는 [https://caniuse.com/ CanIUse] 및 MDN Web Docs를 포함하여 특정 CSS 속성에 대한 브라우저 지원 목록을 유지 관리한다. CSS 3은 `@supports` 지시문을 제공하는 기능 쿼리를 정의하며, 이를 통해 개발자는 특정 기능에 대한 지원을 직접 CSS 내에서 브라우저를 대상으로 지정할 수 있다.[66]
7. 제한 사항
CSS의 현재 기능에는 몇 가지 주목할 만한 제한 사항이 있다.
- 명시적인 스코프(범위) 선언 불가: `z-index`와 같은 속성의 스코핑 규칙은 `position: absolute` 또는 `position: relative` 속성을 가진 가장 가까운 상위 요소를 찾는다. 이러한 방식은 원치 않는 결과를 초래할 수 있다. 예를 들어, 요소의 위치를 조정해야 할 때 새로운 범위를 명시적으로 선언하는 것은 불가능하며, 이는 상위 요소의 원하는 범위를 사용하는 것을 방해한다.
- 의사 클래스의 동적 동작 제어 불가: CSS는 `:hover`와 같이 사용자의 피드백에 따라 조건부로 스타일을 적용하는 의사 클래스를 구현한다. `:hover`는 동적이며(자바스크립트의 "onmouseover"와 동일) 오용될 가능성이 있다(예: 커서 근접 팝업 구현).[68] 그러나 CSS는 클라이언트가 이를 비활성화하거나("disable"과 같은 속성) 그 영향을 제한할 수 있는 기능(각 속성에 대한 "nochange"와 같은 값)이 없다.
- 규칙 이름 지정 불가: CSS 규칙에는 이름을 지정할 수 없다. 이는 클라이언트 측 스크립트에서 선택자가 변경되더라도 해당 규칙을 참조할 수 있게 해준다.
- 규칙 간 스타일 포함 불가: CSS 스타일은 원하는 효과를 얻기 위해 여러 규칙에 걸쳐 중복되어야 하는 경우가 많아 유지 관리가 더 많이 필요하고 더욱 철저한 테스트를 요구한다. 이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었지만 이후 폐기되었다.[69][70] 대신, 작성자는 Sass, Less, 또는 Stylus와 같이 CSS로 컴파일되는 더 정교한 스타일시트 언어를 사용하여 이 기능을 얻을 수 있다.
- 마크업 변경 없이 특정 텍스트 타겟팅 불가: ::first-letter 가상 요소 외에는, 마크업을 변경하지 않고 특정 텍스트 범위를 지정할 수 없다.
7. 1. 명시적인 스코프 선언 불가
`z-index`와 같은 속성의 스코핑 규칙은 `position: absolute` 또는 `position: relative` 속성을 가진 가장 가까운 상위 요소를 찾는다. 이러한 방식은 원치 않는 결과를 초래할 수 있다. 예를 들어, 요소의 위치를 조정해야 할 경우 새로운 범위를 명시적으로 선언하는 것은 불가능하며, 이는 상위 요소의 원하는 범위를 사용하는 것을 방해한다.
7. 2. 의사 클래스의 동적 동작 제어 불가
CSS는 대체 스타일의 조건부 적용을 통해 어느 정도의 사용자 피드백을 허용하는 의사 클래스를 구현한다. 하나의 CSS 의사 클래스인 `:hover`는 동적이며(자바스크립트의 "onmouseover"와 동일) 오용의 가능성이 있다(예: 커서 근접 팝업 구현).[68] 그러나 CSS는 클라이언트가 이를 비활성화할 수 있는 기능("disable"과 같은 속성)이나 그 영향을 제한할 수 있는 기능(각 속성에 대한 "nochange"와 같은 값)이 없다.
7. 3. 규칙 이름 지정 불가
CSS 규칙에는 이름을 지정할 수 없다. 이는 클라이언트 측 스크립트에서 선택자가 변경되더라도 해당 규칙을 참조할 수 있게 해준다.
7. 4. 규칙 간 스타일 포함 불가
CSS 스타일은 원하는 효과를 얻기 위해 여러 규칙에 걸쳐 중복되어야 하는 경우가 많아 유지 관리가 더 많이 필요하고 더욱 철저한 테스트를 요구한다. 이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었지만 이후 폐기되었다.[69][70] 대신, 작성자는 Sass, Less, 또는 Stylus와 같이 CSS로 컴파일되는 더 정교한 스타일시트 언어를 사용하여 이 기능을 얻을 수 있다.
7. 5. 마크업 변경 없이 특정 텍스트 타겟팅 불가
::first-letter 가상 요소 외에는, 마크업을 변경하지 않고 특정 텍스트 범위를 지정할 수 없다.
8. 표준화
W3C은 CSS 표준을 제정하고 관리하며, 웹 개발자들이 표준에 맞는 CSS를 사용할 수 있도록 권장한다.
8. 1. CSS 프레임워크
CSS 프레임워크는 CSS를 사용하여 웹 페이지의 스타일을 더 쉽고 표준에 맞게 지정할 수 있도록 만들어진 라이브러리이다. 블루프린트, 부트스트랩, 파운데이션 등이 대표적인 CSS 프레임워크이다. 프로그래밍 및 스크립팅 언어 라이브러리와 마찬가지로, CSS 프레임워크는 일반적으로 HTML head|헤드영어에서 참조되는 외부 .css 시트로 통합되어 웹 페이지 디자인과 레이아웃을 위한 여러 옵션을 제공한다. 많은 CSS 프레임워크가 있지만, 일부 개발자들은 빠른 프로토타입 제작이나 학습 목적으로만 사용하고, 실제 사이트에는 디자인, 유지 관리 및 다운로드 오버헤드를 고려하여 각 사이트에 맞는 CSS를 직접 제작하는 것을 선호한다.[71]
8. 1. 1. Blueprint
블루프린트는 CSS 프레임워크의 일종으로, 웹 개발을 더욱 쉽고 빠르게 만드는 것을 목표로 한다. 이 프레임워크는 CSS와 자바스크립트 파일 모음으로 구성되어 있으며, 웹사이트의 레이아웃, 타이포그래피, 그리고 기타 시각적 요소를 제어하는 데 사용된다. 블루프린트는 그리드 시스템, 기본 스타일, 유틸리티 클래스를 제공하여 개발자가 일관성 있고 접근성이 뛰어난 웹사이트를 쉽게 만들 수 있도록 돕는다.[71]
8. 1. 2. Bootstrap
부트스트랩은 CSS 프레임워크 중 하나로, 웹 페이지 디자인과 레이아웃을 위한 다양한 기능을 제공한다.[71]
8. 1. 3. Foundation
파운데이션은 CSS 프레임워크 중 하나이다.[71]
8. 2. 디자인 방법론
프로젝트에서 사용되는 CSS 리소스의 크기가 증가함에 따라 개발팀은 종종 CSS를 체계적으로 관리하기 위한 공통된 디자인 방법론을 결정해야 한다. 목표는 개발 용이성, 개발 중 협업 용이성 및 브라우저에서 배포된 스타일시트의 성능이다. 인기 있는 방법론으로는 OOCSS(객체 지향 CSS), ACSS(원자적 CSS), CSS(유기적 캐스케이드 스타일 시트), SMACSS(확장 가능하고 모듈형 CSS 아키텍처) 및 BEM(블록, 요소, 수정자) 등이 있다.[71]
참조
[1]
웹사이트
W3C HTML5 Logo
https://www.w3.org/h[...]
2024-11-20
[2]
웹사이트
CSS developer guide
https://developer.mo[...]
2015-09-24
[3]
서적
JavaScript: the definitive guide
https://www.worldcat[...]
O'Reilly
2011-04-18
[4]
웹사이트
What is CSS?
https://www.w3.org/s[...]
World Wide Web Consortium
2010-12-01
[5]
뉴스
Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript
https://www.htmlgood[...]
HTMLGoodies
2010-07-23
[6]
웹사이트
W3C CSS validation service
https://jigsaw.w3.or[...]
2012-06-30
[7]
웹사이트
W3C CSS2.1 specification for pseudo-elements and pseudo-classes
https://www.w3.org/T[...]
World Wide Web Consortium
2012-04-30
[8]
웹사이트
Selectors
https://www.w3.org/T[...]
W3C
[9]
웹사이트
Selectors Level 3
https://www.w3.org/T[...]
W3C
2014-05-30
[10]
웹사이트
CSS Syntax Module Level 3
https://www.w3.org/T[...]
2023-10-01
[11]
웹사이트
W3C CSS2.1 specification for rule sets, declaration blocks, and selectors
https://www.w3.org/T[...]
World Wide Web Consortium
2009-06-20
[12]
웹사이트
Full property table
https://www.w3.org/T[...]
W3C
2014-05-30
[13]
웹사이트
Index of CSS properties
https://www.w3.org/S[...]
2020-08-09
[14]
웹사이트
CSS Color
https://developer.mo[...]
MDN Web Docs
2024-04-05
[15]
웹사이트
6.1 Length units
https://www.w3.org/T[...]
2019-06-20
[16]
웹사이트
5. Distance Units: the <length> type
https://www.w3.org/T[...]
2019-06-20
[17]
웹사이트
HTML 5. A vocabulary and associated APIs for HTML and XHTML
https://www.w3.org/T[...]
World Wide Web Consortium
2014-06-28
[18]
서적
Cascading Style Sheets: The Definitive Guide
https://shop.oreilly[...]
O'Reilly Media, Inc.
2014-02-16
[19]
웹사이트
Assigning property values, Cascading, and Inheritance
https://www.w3.org/T[...]
2014-06-10
[20]
웹사이트
Can a CSS class inherit one or more other classes?
https://stackoverflo[...]
2017-09-10
[21]
뉴스
Shorthand properties
https://developer.mo[...]
Mozilla Developers
2018-01-30
[22]
웹사이트
9.3 Positioning schemes
https://www.w3.org/T[...]
W3C
2011-02-16
[23]
서적
Spring into HTML and CSS
Pearson Education, Inc
[24]
웹사이트
Cascading HTML style sheets – a proposal
https://www.w3.org/P[...]
CERN
2014-05-25
[25]
서적
Cascading Style Sheets, designing for the Web
https://archive.org/[...]
Addison Wesley
2010-06-23
[26]
웹사이트
Cascading Style Sheets, level 1
https://www.w3.org/T[...]
World Wide Web Consortium
2014-03-07
[27]
웹사이트
Simple style sheets for SGML & HTML on the web
https://www.w3.org/P[...]
World Wide Web Consortium
1995-04-14
[28]
웹사이트
Cascading Style Sheets
https://people.opera[...]
University of Oslo
2014-09-03
[29]
웹사이트
Interview Robert Cailliau on the WWW Proposal: "How It Really Happened."
https://www.computer[...]
Institute of Electrical and Electronics Engineers
1997-11
[30]
웹사이트
Stream-based Style sheet Proposal
https://www.w3.org/P[...]
1995-03-31
[31]
웹사이트
Libwww Hackers
https://www.w3.org/L[...]
World Wide Web Consortium
2002-06-07
[32]
웹사이트
Yves Lafon
https://www.w3.org/P[...]
World Wide Web Consortium
2010-06-17
[33]
웹사이트
The W3C Team: Technology and Society
https://www.w3.org/P[...]
World Wide Web Consortium
2008-07-18
[34]
웹사이트
JavaScript-Based Style Sheets
https://www.w3.org/S[...]
W3C
1996-08-22
[35]
웹사이트
CSS software
https://www.w3.org/S[...]
W3C
2011-01-15
[36]
웹사이트
CSS 2.1 – Anne's Weblog
https://annevankeste[...]
2011-02-16
[37]
웹사이트
Archive of W3C News in 2007
https://www.w3.org/N[...]
World Wide Web Consortium
2011-02-16
[38]
웹사이트
Incorrect MIME Type for CSS Files
https://web.archive.[...]
Mozilla
2002-03-18
[39]
웹사이트
File Types
https://donsnotes.co[...]
2009-11-27
[40]
웹사이트
css file extension details
https://web.archive.[...]
File extension database
2010-03-12
[41]
웹사이트
What Are CSS Vendor or Browser Prefixes?
https://www.lifewire[...]
2019-11-12
[42]
웹사이트
Compatibility Standard
https://compat.spec.[...]
2024-01-24
[43]
웹사이트
CSS Snapshot 2023 – 2.4. CSS Levels
https://www.w3.org/T[...]
2023-12-07
[44]
서적
Cascading style sheets: designing for the Web
https://archive.org/[...]
Addison Wesley Longman
1997
[45]
웹사이트
Cascading Style Sheets, level 1
https://www.w3.org/T[...]
W3C
[46]
웹사이트
Cascading Style Sheets level 1 specification
https://www.w3.org/T[...]
W3C
[47]
웹사이트
Aural style sheets
https://www.w3.org/T[...]
W3C
2014-10-26
[48]
웹사이트
Cascading Style Sheets, level 2
https://www.w3.org/T[...]
W3C
[49]
웹사이트
Cascading Style Sheets, level 2 revision 1
https://www.w3.org/T[...]
W3C
[50]
웹사이트
Cascading Style Sheets Standard Boasts Unprecedented Interoperability
https://www.w3.org/2[...]
W3C
[51]
웹사이트
Descriptions of all CSS specifications
https://www.w3.org/S[...]
World Wide Web Consortium
2011-03-03
[52]
웹사이트
CSS current work
https://www.w3.org/S[...]
World Wide Web Consortium
2011-03-03
[53]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2010
https://www.w3.org/T[...]
World Wide Web Consortium
2011-03-03
[54]
웹사이트
All CSS specifications
https://www.w3.org/S[...]
W3C
2014-05-30
[55]
웹사이트
A Word About CSS4
https://www.xanthir.[...]
2012-10-18
[56]
웹사이트
CSS Flexible Box Layout Module Level 1
https://www.w3.org/T[...]
W3C
2012-10-18
[57]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2007
https://www.w3.org/T[...]
2016-07-18
[58]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2010
https://www.w3.org/T[...]
2011-03-03
[59]
웹사이트
CSS Snapshot 2015
https://www.w3.org/T[...]
2017-02-13
[60]
웹사이트
CSS Snapshot 2017
https://www.w3.org/T[...]
2017-02-13
[61]
웹사이트
CSS Snapshot 2018
https://www.w3.org/T[...]
2019-01-02
[62]
웹사이트
CSS
https://caniuse.com/[...]
2019-01-26
[63]
웹사이트
CSS
https://developer.mo[...]
2023-07-21
[64]
웹사이트
Call for Participation in CSS4 Community Group
https://www.w3.org/c[...]
2020-02-27
[65]
뉴스
CSS3 Solutions for Internet Explorer
https://www.smashing[...]
2016-10-12
[66]
웹사이트
Using Feature Queries in CSS
https://hacks.mozill[...]
2016-10-12
[67]
뉴스
Looking at the Web with Internet Explorer 6, one last time
https://arstechnica.[...]
2016-10-12
[68]
웹사이트
Pure CSS Popups
https://web.archive.[...]
meyerweb.com
2009-11-19
[69]
웹사이트
CSS apply rule
https://web.archive.[...]
GitHub
2016-02-27
[70]
웹사이트
Why I Abandoned @apply — Tab Completion
https://www.xanthir.[...]
[71]
서적
Handcrafted CSS: More Bulletproof Web Design
https://books.google[...]
New Riders
2010-06-19
[72]
웹사이트
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
https://clubmate.fi/[...]
Hiljá
2015-06-02
[73]
문서
[74]
문서
Inheritance propagates property values from parent elements to their children.
https://www.w3.org/T[...]
W3C CSSWG
2022
[75]
문서
en:Internet Explorer box model bug
[76]
간행물
CSS Snapshot 2023
2023-02-14
[77]
웹사이트
All CSS specifications
https://www.w3.org/S[...]
W3C
2023-09-06
[78]
문서
CSS Snapshot 2023 ... This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023.
https://www.w3.org/T[...]
CSSWG
2023
[79]
웹인용
CSS developer guide
https://developer.mo[...]
2015-09-24
[80]
문서
HTML의 index.html과 같은 것
[81]
저널
Cascading HTML style sheets - a proposal
http://www.w3.org/Pe[...]
CERN
1994-10-10
[82]
문서
CSS: under construction
http://www.w3.org/St[...]
W3C
[83]
문서
Introduction to CSS3, W3C Working Draft, 23 May 2001
http://www.w3.org/TR[...]
[84]
웹인용
A Word About CSS4
http://www.xanthir.c[...]
2012-10-18
[85]
웹인용
W3C CSS Selectors Level 4
http://www.w3.org/TR[...]
W3.org
2014-05-30
[86]
웹인용
W3C CSS2.1 specification for rule sets, declaration blocks, and selectors
http://www.w3.org/TR[...]
World Wide Web Consortium
2009-06-20
[87]
문서
예: {{code|lang=css|code=margin: 30px !important;}}
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com
5. 활용
CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어이다. CSS를 활용하면 HTML로 작성된 내용과 CSS로 작성된 표현을 분리하여 웹 페이지를 더욱 효율적으로 구성하고 관리할 수 있다.
CSS는 다음과 같은 다양한 방식으로 활용된다.
- 내용과 표현의 분리: CSS를 사용하면 HTML 문서에서 내용과 표현을 분리할 수 있다. HTML은 문서의 구조와 내용을 담당하고, CSS는 디자인과 레이아웃을 담당한다. 이렇게 분리하면 HTML 코드가 간결해지고, 유지 보수가 쉬워진다.[17]
- 사이트 전체의 일관성 유지: CSS를 사용하면 웹 사이트 전체의 스타일을 일관성 있게 유지할 수 있다. 전역 스타일 시트를 통해 사이트 전체 요소의 스타일을 지정하고, 필요에 따라 스타일 시트를 수정하면 되므로 유지 관리가 쉽고, 시간과 비용을 절약할 수 있다.[17]
- 대역폭 절약: CSS 스타일 시트는 일반적으로 브라우저에 캐시되어 여러 페이지에서 다시 로드할 필요가 없으므로, 네트워크를 통해 전송되는 데이터 양을 줄여 대역폭을 절약할 수 있다.[17]
- 페이지 재포맷: CSS를 사용하면 단 한 줄의 코드로 동일한 페이지에 대해 다른 스타일 시트를 적용할 수 있다. 이를 통해 다양한 대상 장치에 맞게 페이지를 조정하거나, 접근성을 향상시킬 수 있다.[17]
- 접근성 향상: CSS를 사용하면 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하는 반응형 디자인을 구현할 수 있다. 이를 통해 다양한 환경에서 웹 페이지의 접근성과 사용자 경험을 향상시킬 수 있다.[17]
CSS는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다.
5. 1. 내용과 표현의 분리
CSS가 등장하기 전에는 HTML 문서의 거의 모든 표현 속성이 HTML 마크업 내에 포함되어 있었다. 모든 글꼴 색상, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로, 종종 반복적으로 설명해야 했다. CSS를 사용하면 작성자가 해당 정보의 대부분을 스타일 시트인 다른 파일로 이동할 수 있어 HTML이 훨씬 더 간단해진다.[17]예를 들어, 머리글(
h1 요소), 부제(h2), 하위 부제(h3) 등은 HTML을 사용하여 구조적으로 정의된다. 인쇄물 및 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조 선택은 ''표현적''이다.CSS가 나오기 전에는, 모든
h2 머리글에 그러한 타이포그래피 특성을 할당하려는 문서 작성자는 해당 머리글 유형이 발생할 때마다 HTML 표현 마크업을 반복해야 했다. 이로 인해 문서가 더 복잡해지고 커지며 오류가 발생하기 쉽고 유지 관리하기 어려웠다. CSS를 사용하면 표현과 구조를 분리할 수 있다. CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 및 기타 많은 타이포그래피 특성을 정의할 수 있으며 화면 및 인쇄 보기에 대해 독립적으로 수행할 수 있다. 또한 CSS는 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의한다. W3C는 이제 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했다.[17]CSS 이전의 HTML에서 빨간색 텍스트로 정의된 제목 요소는 다음과 같이 작성되었다.
```html
Chapter 1.
```
CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있다.
```html
Chapter 1.
```
내부 스타일 또는 외부 CSS 파일을 사용하면 CSS의 장점을 활용할 수 있다. 예를 들어, 문서에 다음 스타일 요소가 포함되어 있다고 가정해 보자.
```html
```
문서의 모든
h1 요소는 명시적인 코드가 필요 없이 자동으로 빨간색이 된다. 작성자가 나중에 h1 요소를 파란색으로 변경하려는 경우 스타일 요소를 다음과 같이 변경하여 수행할 수 있다.```html
```
문서를 일일이 살펴보면서 각 개별
h1 요소의 색상을 변경하는 것보다 훨씬 간편하다.스타일은 외부에 CSS 파일로 배치하고 아래와 같은 구문을 사용하여 불러올 수 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일을 편집하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정 (테마 또는 글꼴 크기), 다양한 웹 브라우저와의 호환성, 콘텐츠를 보는 데 사용되는 장치 유형 (예: 데스크톱, 태블릿 또는 모바일 장치), 화면 해상도, 사용자의 위치 및 기타 여러 변수가 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하여 접근성과 사용자 경험을 향상시킨다.
5. 2. 사이트 전체의 일관성 유지
CSS 등장 이전에는 HTML 문서 내에 모든 표현 속성(글꼴 색상, 배경 스타일, 요소 정렬, 테두리, 크기 등)을 명시적이고 반복적으로 작성해야 했다. CSS를 사용하면 이러한 정보 대부분을 스타일 시트라는 별도의 파일로 이동하여 HTML을 간결하게 만들 수 있다.예를 들어, 머리글(
h1), 부제(h2), 하위 부제(h3) 등은 HTML로 구조적으로 정의되지만, 글꼴, 크기, 색상, 강조 등의 표현적인 요소는 CSS를 통해 분리하여 정의할 수 있다.CSS 이전에는 모든 `h2` 머리글에 특정 타이포그래피 속성을 지정하려면 해당 머리글이 나올 때마다 HTML 표현 마크업을 반복해야 했다. 이로 인해 문서는 복잡해지고, 커지며, 오류가 발생하기 쉽고, 유지 관리하기 어려웠다. CSS를 통해 표현과 구조를 분리하면 이러한 문제를 해결할 수 있다.
```html
```
위와 같이 스타일을 지정하면, 모든 `h1` 요소는 명시적인 코드 없이 자동으로 파란색이 된다. 나중에 `h1` 요소의 색상을 변경하려면 스타일 시트만 수정하면 되므로, 각 요소를 개별적으로 수정하는 것보다 훨씬 간편하다.
스타일은 외부 CSS 파일에 배치하고 아래와 같이 불러올 수 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일만 수정하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
여러 스타일 시트를 가져와서 출력 장치(화면, 인쇄 등)에 따라 다른 스타일을 적용할 수도 있다. 가장 높은 우선순위를 가진 스타일 시트가 콘텐츠 표시를 제어하며, 설정되지 않은 선언은 낮은 우선순위 소스(예: 사용자 에이전트 스타일)로 전달된다. 이 과정을 "캐스케이딩"이라고 한다.
CSS를 효과적으로 사용하면 전역 스타일 시트를 통해 사이트 전체 요소의 스타일을 지정할 수 있다. 요소 스타일을 변경해야 할 때 전역 스타일 시트의 규칙을 편집하면 되므로, CSS 이전보다 유지 관리가 쉽고, 비용과 시간을 절약할 수 있다.
스타일 정보는 작성자 스타일 시트나 사용자 에이전트 설정(사용자 스타일 시트)에 기재할 수 있다. 사용자 에이전트는 고유 스타일(기본 스타일 시트)을 가질 수도 있다. 작성자 스타일 시트는 마크업 문서 안에 직접 작성하거나 별도 문서로 불러올 수 있는데, CSS의 편리성을 위해 별도 문서로 불러오는 것이 권장된다.[17]
5. 3. 대역폭 절약
CSS가 등장하기 전에는 HTML 문서의 표현 속성이 HTML 마크업 내에 포함되어 있어서 모든 글꼴 색상, 배경 스타일 등을 HTML 내에서 반복적으로 설명해야 했다. CSS를 사용하면 이러한 정보 대부분을 스타일 시트라는 다른 파일로 이동할 수 있어 HTML을 간결하게 만들 수 있다.예를 들어, 머리글(
h1), 부제(h2) 등은 HTML을 사용하여 구조적으로 정의되지만, 글꼴, 크기, 색상 등은 표현적인 요소이다. CSS 이전에는 이러한 타이포그래피 특성을 각 머리글에 반복해서 지정해야 했기 때문에 문서가 복잡해지고 유지 관리하기 어려웠다. CSS를 사용하면 표현과 구조를 분리하여 이러한 문제를 해결할 수 있다.CSS를 사용하면 다음과 같이 HTML 표현 속성 대신 스타일 속성을 사용할 수 있다.
```html
1장
```
스타일 속성을 내부 스타일 요소나 외부 CSS 파일에 배치하면 CSS의 장점이 더 명확해진다. 예를 들어, 문서에 다음과 같은 내부 스타일 요소를 포함하면 모든 `h1` 요소가 자동으로 빨간색이 된다.
```html
```
나중에 `h1` 요소의 색상을 변경하려면 스타일 요소만 수정하면 되므로, 각 요소를 개별적으로 수정하는 것보다 훨씬 간편하다.
스타일을 외부 CSS 파일에 배치하고 다음과 같이 로드할 수도 있다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여 여러 문서의 스타일을 쉽게 변경할 수 있다.
스타일 시트는 `class`, 유형 등에 따라 선택된 HTML 요소에 대해 스타일을 한 번 지정하므로, 각 요소마다 스타일 정보를 반복하는 것보다 훨씬 효율적이다. 외부 스타일 시트는 일반적으로 브라우저 캐시에 저장되어 여러 페이지에서 다시 로드하지 않고 사용할 수 있어 네트워크를 통한 데이터 전송량을 줄여준다. 즉, 대역폭 절약에도 도움이 된다.[17]
5. 4. 페이지 재포맷
CSS가 등장하기 전에는 HTML 문서의 표현 속성이 HTML 마크업 내에 포함되어 있었습니다. 글꼴 색상, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로 설명해야 했습니다. CSS를 사용하면 이러한 정보의 대부분을 스타일 시트라는 다른 파일로 이동할 수 있어 HTML이 훨씬 간단해집니다.예를 들어, 머리글(
h1), 부제(h2), 하위 부제(h3) 등은 HTML을 사용하여 구조적으로 정의됩니다. 인쇄물 및 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조 선택은 ''표현적''입니다.CSS 이전에는 모든 `h2` 머리글에 타이포그래피 특성을 할당하려는 문서 작성자는 해당 머리글 유형이 발생할 때마다 HTML 표현 마크업을 반복해야 했습니다. CSS를 사용하면 표현과 구조를 분리할 수 있습니다. CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 등 다양한 타이포그래피 특성을 정의할 수 있으며, 화면 및 인쇄 보기에 대해 독립적으로 수행할 수 있습니다. 또한 CSS는 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의합니다. W3C는 이제 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했습니다.[17]
CSS 이전의 HTML에서 빨간색 텍스트로 정의된 제목 요소는 다음과 같이 작성되었습니다.
```html
Chapter 1.
```
CSS를 사용하면 HTML 표현 속성 대신 스타일 속성을 사용하여 동일한 요소를 코딩할 수 있습니다.
```html
Chapter 1.
```
내부 스타일 요소 또는 외부 CSS 파일에 스타일 속성을 배치하면, CSS를 더욱 유용하게 사용할 수 있습니다. 예를 들어, 문서에 다음 스타일 요소가 포함되어 있다고 가정해 보겠습니다.
```html
```
문서의 모든 `h1` 요소는 명시적인 코드가 필요 없이 자동으로 빨간색이 됩니다. 작성자가 나중에 `h1` 요소를 파란색으로 변경하려는 경우, 스타일 요소를 다음과 같이 변경하여 수행할 수 있습니다.
```html
```
이는 문서를 일일이 살펴보면서 각 `h1` 요소의 색상을 변경하는 것보다 훨씬 간편합니다.
스타일은 외부 CSS 파일에 배치하고 다음과 유사한 구문을 사용하여 로드할 수도 있습니다.
```html
```
이렇게 하면 HTML 문서에서 스타일을 더욱 분리하여, 외부 CSS 파일을 편집하여 여러 문서의 스타일을 변경할 수 있습니다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 합니다. 이러한 매개변수에는 사용자 기본 설정 (테마 또는 글꼴 크기), 다양한 웹 브라우저와의 호환성, 콘텐츠를 보는 데 사용되는 장치 유형 (예: 데스크톱, 태블릿 또는 모바일 장치), 화면 해상도, 사용자의 지리적 위치 및 기타 여러 변수가 포함됩니다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하여 광범위한 환경에서 접근성과 사용자 경험을 향상시킵니다.
단 한 줄의 간단한 변경만으로, 동일한 페이지에 대해 다른 스타일 시트를 사용할 수 있습니다. 이는 접근성 측면에서 유리하며, 페이지나 사이트를 다양한 대상 장치에 맞게 조정할 수 있는 기능을 제공합니다.
5. 5. 접근성 향상
CSS를 사용하면 HTML 문서의 표현 속성을 스타일 시트로 분리하여 HTML 구조를 더 간단하게 만들고, 유지 보수를 쉽게 할 수 있다. 또한, 다양한 장치와 화면 크기에 맞게 반응형 웹 페이지를 디자인할 수 있어 접근성이 향상된다.[17]CSS 이전에는 HTML의 표현 마크업을 반복해서 사용해야 했기 때문에 문서가 복잡해지고 유지 관리가 어려웠다. CSS를 사용하면 표현과 구조를 분리하여 이러한 문제를 해결할 수 있다. 예를 들어, CSS를 사용하면 글꼴, 크기, 색상, 강조와 같은 타이포그래피 특성을 정의할 수 있으며, 음성 텍스트 리더를 위한 읽기 속도 및 강조와 같은 비 시각적 스타일도 정의할 수 있다. W3C는 모든 표현 HTML 마크업의 사용을 더 이상 사용하지 않음으로 지정했다.[17]
다음은 CSS를 사용하여 제목 요소의 색상을 빨간색으로 지정하는 예시이다.
```html
Chapter 1.
```
스타일 속성을 내부 스타일 요소나 외부 CSS 파일에 배치하면 CSS의 강력함을 더욱 잘 활용할 수 있다. 예를 들어, 문서에 다음과 같은 스타일 요소를 포함하면 문서의 모든 `
` 요소가 자동으로 빨간색이 된다.
```html
```
나중에 `` 요소의 색상을 변경하려면 스타일 요소만 수정하면 되므로, 문서를 일일이 수정하는 것보다 훨씬 간편하다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등이 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하도록 돕는다.
CSS가 없으면 웹 디자이너는 시각 장애가 있는 사용자의 접근성을 방해하는 HTML 테이블과 같은 기술로 페이지를 레이아웃해야 했다. 하지만 CSS를 사용하면 이러한 문제 없이 웹 페이지 레이아웃을 구성할 수 있다.
CSS는 다양한 매개변수에 따라 스타일을 조정하여 여러 표현 형식으로 콘텐츠를 게시하는 것을 용이하게 한다. 이러한 매개변수에는 사용자 기본 설정, 웹 브라우저, 장치 유형, 화면 해상도, 사용자의 지리적 위치 등이 포함된다. 또한 CSS는 반응형 디자인을 가능하게 하여 콘텐츠가 다양한 화면 크기와 방향에 동적으로 적응하도록 돕는다.
CSS가 없으면 웹 디자이너는 시각 장애가 있는 사용자의 접근성을 방해하는 HTML 테이블과 같은 기술로 페이지를 레이아웃해야 했다. 하지만 CSS를 사용하면 이러한 문제 없이 웹 페이지 레이아웃을 구성할 수 있다.
6. 브라우저 지원
Microsoft의 인터넷 익스플로러 3[25]이 1996년에 출시되었으며, CSS에 대한 제한적인 지원을 제공했다. IE 4와 넷스케이프 4.x는 더 많은 지원을 추가했지만, 일반적으로 불완전했고 CSS를 유용하게 사용할 수 없게 만드는 많은 소프트웨어 버그가 있었다. 2000년 3월, Apple 매킨토시용 인터넷 익스플로러 5.0은 CSS 1을 99% 이상 지원하는 최초의 브라우저였으며,[35] 다른 브라우저들도 곧 뒤따랐고, 그들 중 많은 브라우저들이 CSS 2의 일부를 추가로 구현했다.
그러나 "버전 5" 웹 브라우저들이 CSS를 상당히 완벽하게 구현하기 시작했을 때에도 특정 영역에서는 여전히 오류가 있었다. Microsoft 인터넷 익스플로러 5. x for Windows는 CSS 표준과 비교했을 때 CSS 박스 모델을 제대로 구현하지 못했다. 이러한 불일치와 기능 지원의 차이로 인해 디자이너들은 CSS 해킹 및 필터라고 불리는 우회 방법을 사용하지 않고는 브라우저와 컴퓨팅 플랫폼에서 일관된 모양을 얻는 것이 어려웠다.
개별 브라우저 벤더들은 표준화 및 보편화에 앞서 때때로 새로운 매개변수를 도입했다. 미래의 구현에 간섭하는 것을 방지하기 위해 벤더들은 매개변수 앞에 고유한 이름을 붙였다. 예를 들어, 모질라 파이어폭스에는 `-moz-`, 애플 사파리의 브라우징 엔진에서 이름을 딴 `-webkit-`, 오페라 브라우저에는 `-o-`, 마이크로소프트 인터넷 익스플로러와 EdgeHTML을 사용하는 초기 버전의 마이크로소프트 엣지에는 `-ms-`를 사용했다.
웹 브라우저는 웹 페이지를 렌더링하기 위해 각기 다른 레이아웃 엔진을 사용하며, CSS 기능에 대한 지원은 브라우저마다 일관되지 않는다. CSS의 새로운 기능 도입은 주요 브라우저의 지원 부족으로 인해 방해받을 수 있다. 예를 들어, 인터넷 익스플로러는 많은 CSS 3 기능을 추가하는 데 시간이 걸렸고, 이는 해당 기능의 채택을 늦추고 개발자들 사이에서 브라우저의 평판을 손상시켰다. 사용자에게 일관된 경험을 제공하기 위해, 웹 개발자는 여러 운영 체제, 브라우저 및 브라우저 버전을 대상으로 사이트를 테스트하는 경우가 많으며, 이는 개발 시간과 복잡성을 증가시킨다.
BrowserStack과 같은 도구는 이러한 환경을 유지 관리하는 복잡성을 줄이기 위해 구축되었다. 이러한 테스트 도구 외에도, 많은 사이트에서는 [https://caniuse.com/ CanIUse] 및 MDN Web Docs를 포함하여 특정 CSS 속성에 대한 브라우저 지원 목록을 유지 관리한다. CSS 3은 `@supports` 지시문을 제공하는 기능 쿼리를 정의하며, 이를 통해 개발자는 특정 기능에 대한 지원을 직접 CSS 내에서 브라우저를 대상으로 지정할 수 있다.[66]
7. 제한 사항
CSS의 현재 기능에는 몇 가지 주목할 만한 제한 사항이 있다.
- 명시적인 스코프(범위) 선언 불가: `z-index`와 같은 속성의 스코핑 규칙은 `position: absolute` 또는 `position: relative` 속성을 가진 가장 가까운 상위 요소를 찾는다. 이러한 방식은 원치 않는 결과를 초래할 수 있다. 예를 들어, 요소의 위치를 조정해야 할 때 새로운 범위를 명시적으로 선언하는 것은 불가능하며, 이는 상위 요소의 원하는 범위를 사용하는 것을 방해한다.
- 의사 클래스의 동적 동작 제어 불가: CSS는 `:hover`와 같이 사용자의 피드백에 따라 조건부로 스타일을 적용하는 의사 클래스를 구현한다. `:hover`는 동적이며(자바스크립트의 "onmouseover"와 동일) 오용될 가능성이 있다(예: 커서 근접 팝업 구현).[68] 그러나 CSS는 클라이언트가 이를 비활성화하거나("disable"과 같은 속성) 그 영향을 제한할 수 있는 기능(각 속성에 대한 "nochange"와 같은 값)이 없다.
- 규칙 이름 지정 불가: CSS 규칙에는 이름을 지정할 수 없다. 이는 클라이언트 측 스크립트에서 선택자가 변경되더라도 해당 규칙을 참조할 수 있게 해준다.
- 규칙 간 스타일 포함 불가: CSS 스타일은 원하는 효과를 얻기 위해 여러 규칙에 걸쳐 중복되어야 하는 경우가 많아 유지 관리가 더 많이 필요하고 더욱 철저한 테스트를 요구한다. 이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었지만 이후 폐기되었다.[69][70] 대신, 작성자는 Sass, Less, 또는 Stylus와 같이 CSS로 컴파일되는 더 정교한 스타일시트 언어를 사용하여 이 기능을 얻을 수 있다.
- 마크업 변경 없이 특정 텍스트 타겟팅 불가: ::first-letter 가상 요소 외에는, 마크업을 변경하지 않고 특정 텍스트 범위를 지정할 수 없다.
7. 1. 명시적인 스코프 선언 불가
`z-index`와 같은 속성의 스코핑 규칙은 `position: absolute` 또는 `position: relative` 속성을 가진 가장 가까운 상위 요소를 찾는다. 이러한 방식은 원치 않는 결과를 초래할 수 있다. 예를 들어, 요소의 위치를 조정해야 할 경우 새로운 범위를 명시적으로 선언하는 것은 불가능하며, 이는 상위 요소의 원하는 범위를 사용하는 것을 방해한다.7. 2. 의사 클래스의 동적 동작 제어 불가
CSS는 대체 스타일의 조건부 적용을 통해 어느 정도의 사용자 피드백을 허용하는 의사 클래스를 구현한다. 하나의 CSS 의사 클래스인 `:hover`는 동적이며(자바스크립트의 "onmouseover"와 동일) 오용의 가능성이 있다(예: 커서 근접 팝업 구현).[68] 그러나 CSS는 클라이언트가 이를 비활성화할 수 있는 기능("disable"과 같은 속성)이나 그 영향을 제한할 수 있는 기능(각 속성에 대한 "nochange"와 같은 값)이 없다.7. 3. 규칙 이름 지정 불가
CSS 규칙에는 이름을 지정할 수 없다. 이는 클라이언트 측 스크립트에서 선택자가 변경되더라도 해당 규칙을 참조할 수 있게 해준다.7. 4. 규칙 간 스타일 포함 불가
CSS 스타일은 원하는 효과를 얻기 위해 여러 규칙에 걸쳐 중복되어야 하는 경우가 많아 유지 관리가 더 많이 필요하고 더욱 철저한 테스트를 요구한다. 이를 해결하기 위해 몇 가지 새로운 CSS 기능이 제안되었지만 이후 폐기되었다.[69][70] 대신, 작성자는 Sass, Less, 또는 Stylus와 같이 CSS로 컴파일되는 더 정교한 스타일시트 언어를 사용하여 이 기능을 얻을 수 있다.7. 5. 마크업 변경 없이 특정 텍스트 타겟팅 불가
::first-letter 가상 요소 외에는, 마크업을 변경하지 않고 특정 텍스트 범위를 지정할 수 없다.8. 표준화
W3C은 CSS 표준을 제정하고 관리하며, 웹 개발자들이 표준에 맞는 CSS를 사용할 수 있도록 권장한다.
8. 1. CSS 프레임워크
CSS 프레임워크는 CSS를 사용하여 웹 페이지의 스타일을 더 쉽고 표준에 맞게 지정할 수 있도록 만들어진 라이브러리이다. 블루프린트, 부트스트랩, 파운데이션 등이 대표적인 CSS 프레임워크이다. 프로그래밍 및 스크립팅 언어 라이브러리와 마찬가지로, CSS 프레임워크는 일반적으로 HTML head|헤드영어에서 참조되는 외부 .css 시트로 통합되어 웹 페이지 디자인과 레이아웃을 위한 여러 옵션을 제공한다. 많은 CSS 프레임워크가 있지만, 일부 개발자들은 빠른 프로토타입 제작이나 학습 목적으로만 사용하고, 실제 사이트에는 디자인, 유지 관리 및 다운로드 오버헤드를 고려하여 각 사이트에 맞는 CSS를 직접 제작하는 것을 선호한다.[71]8. 1. 1. Blueprint
블루프린트는 CSS 프레임워크의 일종으로, 웹 개발을 더욱 쉽고 빠르게 만드는 것을 목표로 한다. 이 프레임워크는 CSS와 자바스크립트 파일 모음으로 구성되어 있으며, 웹사이트의 레이아웃, 타이포그래피, 그리고 기타 시각적 요소를 제어하는 데 사용된다. 블루프린트는 그리드 시스템, 기본 스타일, 유틸리티 클래스를 제공하여 개발자가 일관성 있고 접근성이 뛰어난 웹사이트를 쉽게 만들 수 있도록 돕는다.[71]8. 1. 2. Bootstrap
부트스트랩은 CSS 프레임워크 중 하나로, 웹 페이지 디자인과 레이아웃을 위한 다양한 기능을 제공한다.[71]8. 1. 3. Foundation
파운데이션은 CSS 프레임워크 중 하나이다.[71]8. 2. 디자인 방법론
프로젝트에서 사용되는 CSS 리소스의 크기가 증가함에 따라 개발팀은 종종 CSS를 체계적으로 관리하기 위한 공통된 디자인 방법론을 결정해야 한다. 목표는 개발 용이성, 개발 중 협업 용이성 및 브라우저에서 배포된 스타일시트의 성능이다. 인기 있는 방법론으로는 OOCSS(객체 지향 CSS), ACSS(원자적 CSS), CSS(유기적 캐스케이드 스타일 시트), SMACSS(확장 가능하고 모듈형 CSS 아키텍처) 및 BEM(블록, 요소, 수정자) 등이 있다.[71]참조
[1]
웹사이트
W3C HTML5 Logo
https://www.w3.org/h[...]
2024-11-20
[2]
웹사이트
CSS developer guide
https://developer.mo[...]
2015-09-24
[3]
서적
JavaScript: the definitive guide
https://www.worldcat[...]
O'Reilly
2011-04-18
[4]
웹사이트
What is CSS?
https://www.w3.org/s[...]
World Wide Web Consortium
2010-12-01
[5]
뉴스
Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript
https://www.htmlgood[...]
HTMLGoodies
2010-07-23
[6]
웹사이트
W3C CSS validation service
https://jigsaw.w3.or[...]
2012-06-30
[7]
웹사이트
W3C CSS2.1 specification for pseudo-elements and pseudo-classes
https://www.w3.org/T[...]
World Wide Web Consortium
2012-04-30
[8]
웹사이트
Selectors
https://www.w3.org/T[...]
W3C
[9]
웹사이트
Selectors Level 3
https://www.w3.org/T[...]
W3C
2014-05-30
[10]
웹사이트
CSS Syntax Module Level 3
https://www.w3.org/T[...]
2023-10-01
[11]
웹사이트
W3C CSS2.1 specification for rule sets, declaration blocks, and selectors
https://www.w3.org/T[...]
World Wide Web Consortium
2009-06-20
[12]
웹사이트
Full property table
https://www.w3.org/T[...]
W3C
2014-05-30
[13]
웹사이트
Index of CSS properties
https://www.w3.org/S[...]
2020-08-09
[14]
웹사이트
CSS Color
https://developer.mo[...]
MDN Web Docs
2024-04-05
[15]
웹사이트
6.1 Length units
https://www.w3.org/T[...]
2019-06-20
[16]
웹사이트
5. Distance Units: the <length> type
https://www.w3.org/T[...]
2019-06-20
[17]
웹사이트
HTML 5. A vocabulary and associated APIs for HTML and XHTML
https://www.w3.org/T[...]
World Wide Web Consortium
2014-06-28
[18]
서적
Cascading Style Sheets: The Definitive Guide
https://shop.oreilly[...]
O'Reilly Media, Inc.
2014-02-16
[19]
웹사이트
Assigning property values, Cascading, and Inheritance
https://www.w3.org/T[...]
2014-06-10
[20]
웹사이트
Can a CSS class inherit one or more other classes?
https://stackoverflo[...]
2017-09-10
[21]
뉴스
Shorthand properties
https://developer.mo[...]
Mozilla Developers
2018-01-30
[22]
웹사이트
9.3 Positioning schemes
https://www.w3.org/T[...]
W3C
2011-02-16
[23]
서적
Spring into HTML and CSS
Pearson Education, Inc
[24]
웹사이트
Cascading HTML style sheets – a proposal
https://www.w3.org/P[...]
CERN
2014-05-25
[25]
서적
Cascading Style Sheets, designing for the Web
https://archive.org/[...]
Addison Wesley
2010-06-23
[26]
웹사이트
Cascading Style Sheets, level 1
https://www.w3.org/T[...]
World Wide Web Consortium
2014-03-07
[27]
웹사이트
Simple style sheets for SGML & HTML on the web
https://www.w3.org/P[...]
World Wide Web Consortium
1995-04-14
[28]
웹사이트
Cascading Style Sheets
https://people.opera[...]
University of Oslo
2014-09-03
[29]
웹사이트
Interview Robert Cailliau on the WWW Proposal: "How It Really Happened."
https://www.computer[...]
Institute of Electrical and Electronics Engineers
1997-11
[30]
웹사이트
Stream-based Style sheet Proposal
https://www.w3.org/P[...]
1995-03-31
[31]
웹사이트
Libwww Hackers
https://www.w3.org/L[...]
World Wide Web Consortium
2002-06-07
[32]
웹사이트
Yves Lafon
https://www.w3.org/P[...]
World Wide Web Consortium
2010-06-17
[33]
웹사이트
The W3C Team: Technology and Society
https://www.w3.org/P[...]
World Wide Web Consortium
2008-07-18
[34]
웹사이트
JavaScript-Based Style Sheets
https://www.w3.org/S[...]
W3C
1996-08-22
[35]
웹사이트
CSS software
https://www.w3.org/S[...]
W3C
2011-01-15
[36]
웹사이트
CSS 2.1 – Anne's Weblog
https://annevankeste[...]
2011-02-16
[37]
웹사이트
Archive of W3C News in 2007
https://www.w3.org/N[...]
World Wide Web Consortium
2011-02-16
[38]
웹사이트
Incorrect MIME Type for CSS Files
https://web.archive.[...]
Mozilla
2002-03-18
[39]
웹사이트
File Types
https://donsnotes.co[...]
2009-11-27
[40]
웹사이트
css file extension details
https://web.archive.[...]
File extension database
2010-03-12
[41]
웹사이트
What Are CSS Vendor or Browser Prefixes?
https://www.lifewire[...]
2019-11-12
[42]
웹사이트
Compatibility Standard
https://compat.spec.[...]
2024-01-24
[43]
웹사이트
CSS Snapshot 2023 – 2.4. CSS Levels
https://www.w3.org/T[...]
2023-12-07
[44]
서적
Cascading style sheets: designing for the Web
https://archive.org/[...]
Addison Wesley Longman
1997
[45]
웹사이트
Cascading Style Sheets, level 1
https://www.w3.org/T[...]
W3C
[46]
웹사이트
Cascading Style Sheets level 1 specification
https://www.w3.org/T[...]
W3C
[47]
웹사이트
Aural style sheets
https://www.w3.org/T[...]
W3C
2014-10-26
[48]
웹사이트
Cascading Style Sheets, level 2
https://www.w3.org/T[...]
W3C
[49]
웹사이트
Cascading Style Sheets, level 2 revision 1
https://www.w3.org/T[...]
W3C
[50]
웹사이트
Cascading Style Sheets Standard Boasts Unprecedented Interoperability
https://www.w3.org/2[...]
W3C
[51]
웹사이트
Descriptions of all CSS specifications
https://www.w3.org/S[...]
World Wide Web Consortium
2011-03-03
[52]
웹사이트
CSS current work
https://www.w3.org/S[...]
World Wide Web Consortium
2011-03-03
[53]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2010
https://www.w3.org/T[...]
World Wide Web Consortium
2011-03-03
[54]
웹사이트
All CSS specifications
https://www.w3.org/S[...]
W3C
2014-05-30
[55]
웹사이트
A Word About CSS4
https://www.xanthir.[...]
2012-10-18
[56]
웹사이트
CSS Flexible Box Layout Module Level 1
https://www.w3.org/T[...]
W3C
2012-10-18
[57]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2007
https://www.w3.org/T[...]
2016-07-18
[58]
웹사이트
Cascading Style Sheets (CSS) Snapshot 2010
https://www.w3.org/T[...]
2011-03-03
[59]
웹사이트
CSS Snapshot 2015
https://www.w3.org/T[...]
2017-02-13
[60]
웹사이트
CSS Snapshot 2017
https://www.w3.org/T[...]
2017-02-13
[61]
웹사이트
CSS Snapshot 2018
https://www.w3.org/T[...]
2019-01-02
[62]
웹사이트
CSS
https://caniuse.com/[...]
2019-01-26
[63]
웹사이트
CSS
https://developer.mo[...]
2023-07-21
[64]
웹사이트
Call for Participation in CSS4 Community Group
https://www.w3.org/c[...]
2020-02-27
[65]
뉴스
CSS3 Solutions for Internet Explorer
https://www.smashing[...]
2016-10-12
[66]
웹사이트
Using Feature Queries in CSS
https://hacks.mozill[...]
2016-10-12
[67]
뉴스
Looking at the Web with Internet Explorer 6, one last time
https://arstechnica.[...]
2016-10-12
[68]
웹사이트
Pure CSS Popups
https://web.archive.[...]
meyerweb.com
2009-11-19
[69]
웹사이트
CSS apply rule
https://web.archive.[...]
GitHub
2016-02-27
[70]
웹사이트
Why I Abandoned @apply — Tab Completion
https://www.xanthir.[...]
[71]
서적
Handcrafted CSS: More Bulletproof Web Design
https://books.google[...]
New Riders
2010-06-19
[72]
웹사이트
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
https://clubmate.fi/[...]
Hiljá
2015-06-02
[73]
문서
[74]
문서
Inheritance propagates property values from parent elements to their children.
https://www.w3.org/T[...]
W3C CSSWG
2022
[75]
문서
en:Internet Explorer box model bug
[76]
간행물
CSS Snapshot 2023
2023-02-14
[77]
웹사이트
All CSS specifications
https://www.w3.org/S[...]
W3C
2023-09-06
[78]
문서
CSS Snapshot 2023 ... This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023.
https://www.w3.org/T[...]
CSSWG
2023
[79]
웹인용
CSS developer guide
https://developer.mo[...]
2015-09-24
[80]
문서
HTML의 index.html과 같은 것
[81]
저널
Cascading HTML style sheets - a proposal
http://www.w3.org/Pe[...]
CERN
1994-10-10
[82]
문서
CSS: under construction
http://www.w3.org/St[...]
W3C
[83]
문서
Introduction to CSS3, W3C Working Draft, 23 May 2001
http://www.w3.org/TR[...]
[84]
웹인용
A Word About CSS4
http://www.xanthir.c[...]
2012-10-18
[85]
웹인용
W3C CSS Selectors Level 4
http://www.w3.org/TR[...]
W3.org
2014-05-30
[86]
웹인용
W3C CSS2.1 specification for rule sets, declaration blocks, and selectors
http://www.w3.org/TR[...]
World Wide Web Consortium
2009-06-20
[87]
문서
예: {{code|lang=css|code=margin: 30px !important;}}
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com