Gaon12: 내용 보강

2024-12-26T11:08:03Z

내용 보강

Gaon12: 시작

2024-12-05T07:47:01Z

시작

새 문서

== 개요 ==
[[CSS]](Cascading Style Sheets)는 웹 페이지의 [[마크업 언어]](예: [[HTML]])에 적용하여 문서의 시각적 표현을 정의하는 스타일시트 언어이다. 이를 통해 레이아웃, 색상, 폰트 등 다양한 디자인 요소를 제어할 수 있다.

== 역사 ==
CSS는 1994년 10월 10일 [[하콘 비움 리]]에 의해 처음 제안되었으며, 이후 여러 버전으로 발전해왔다.

=== CSS1 ===
1996년 12월에 발표된 CSS 레벨 1은 폰트 속성, 텍스트 색상, 배경, 여백, 패딩 등의 기본적인 스타일링 기능을 제공하였다.

=== CSS2 ===
1998년 5월에 발표된 CSS 레벨 2는 포지셔닝, 미디어 타입 지원, 테이블 레이아웃 등 새로운 기능을 추가하였다.

=== CSS2.1 ===
CSS2의 오류를 수정하고 일부 기능을 개선한 CSS 레벨 2.1은 2011년 6월에 W3C 권고안으로 발표되었다.

=== CSS3 ===
CSS3는 모듈화된 접근 방식을 도입하여 각 모듈이 독립적으로 개발되고 업데이트될 수 있게 하였다. 이를 통해 그림자 효과, 그라데이션, 변형 등 다양한 기능이 추가되었다.

== 문법 ==
CSS는 선택자와 선언 블록으로 구성된다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언 블록은 중괄호({})로 감싸고, 그 안에 속성과 값을 콜론(:)으로 구분하여 정의한다. 각 선언은 세미콜론(;)으로 끝난다.

예시:
<syntaxhighlight lang="css">
선택자 {
속성명: 속성값;
}
</syntaxhighlight>

<syntaxhighlight lang="css">
p {
color: red;
font-size: 16px;
}
</syntaxhighlight>

== 선택자 ==
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에서는 상위 요소에 적용된 스타일이 하위 요소에 상속될 수 있다. 또한, 여러 스타일 규칙이 적용될 경우 우선순위에 따라 최종 스타일이 결정되는데, 이를 캐스케이딩이라고 한다. 우선순위는 중요도, 명시도, 소스 코드의 순서 등에 따라 결정된다.

== 박스 모델 ==
CSS의 박스 모델은 요소의 레이아웃을 결정하는 기본 구조로, 다음과 같이 구성된다:

* '''콘텐츠(Content):''' 텍스트나 이미지 등 실제 내용이 위치하는 영역.
* '''패딩(Padding):''' 콘텐츠와 테두리 사이의 공간.
* '''테두리(Border):''' 패딩과 마진 사이의 경계선.
* '''마진(Margin):''' 테두리 바깥의 외부 여백으로, 요소 간의 간격을 조절한다.

== 디스플레이 속성 ==
CSS의 <code>display</code> 속성은 요소의 박스 유형을 결정하며, 주요 값은 다음과 같다:

* <code>block</code>: 블록 레벨 요소로, 항상 새로운 줄에서 시작하며 가로 전체를 차지한다.
* <code>inline</code>: 인라인 요소로, 줄의 흐름 안에 배치되며 필요한 만큼의 너비만 차지한다.
* <code>inline-block</code>: 인라인 요소처럼 흐름에 배치되지만, 블록 요소처럼 너비와 높이를 지정할 수 있다.
* <code>none</code>: 요소를 화면에 표시하지 않는다.

== 최신 기능 ==
CSS3에는 다음과 같은 새로운 기능들이 도입되었다:

* '''삼각 함수 지원:''' <code>sin()</code>, <code>cos()</code>, <code>tan()</code> 등의 삼각 함수를 사용할 수 있게 되어 복잡한 애니메이션과 레이아웃 구성이 가능해졌다.
* '''서브그리드(Subgrid):''' 그리드 레이아웃에서 하위 그리드가 상위 그리드의 행과 열을 채택하여 정밀한 정렬이 가능하다.
* '''<code>aspect-ratio</code> 속성:''' 요소의 종횡비를 지정하여 반응형 디자인을 더욱 쉽게 구현할 수 있다.
* '''<code>object-fit</code> 속성:''' 이미지나 비디오 등의 콘텐츠가 박스 내에서 어떻게 맞출지 지정할 수 있다.


[[분류:CSS]] [[분류:웹]]

CSS - 편집 역사

Gaon12: 내용 보강

Gaon12: 시작