📌CSS란?
- CSS(Cascading Style Sheets)는 HTML 및 XML 기반 문서의 스타일과 레이아웃을 정의하기 위한 스타일 시트 언어.
- 웹 페이지의 시각적인 표현을 다루며, 웹 페이지의 색상, 레이아웃, 폰트, 크기, 간격 등을 지정하여 디자인할 수 있다.
📌CSS의 주요 기능과 특징
-
스타일 지정: CSS를 사용하여 웹 페이지의 텍스트, 배경, 여백, 크기, 색상 등 다양한 스타일 속성을 지정할 수 있다.
-
레이아웃 제어: CSS를 사용하여 웹 페이지의 레이아웃을 제어하고 요소의 위치, 크기, 정렬 등을 조정할 수 있다.
-
상속과 우선순위: CSS는 스타일 속성을 상속하며, 부모 요소의 스타일이 자식 요소로 전달된다. 또한 스타일 규칙이 충돌할 경우 우선순위에 따라 적용된다.
-
다양한 선택자: CSS는 요소 이름, 클래스, ID, 속성 등 다양한 선택자를 사용하여 특정 요소를 선택하고 스타일을 적용할 수 있다.
-
외부 스타일시트: CSS는 외부 스타일시트 파일로 작성되어 HTML 문서와 분리되어 저장될 수 있다. 이는 웹 사이트의 일관된 디자인과 유지보수성을 향상시킨다.
📌CSS에서 선택자란?
선택자(Selectors)는 웹 페이지의 특정 요소를 선택하고 스타일을 적용하는 데 사용되어 세밀한 스타일링이나 특정 요소에 대한 스타일 적용이 가능하게 해주는것.
🌱 1. 요소 선택자
(Element Selector): HTML 요소 이름으로 요소를 선택한다. 예를 들어, h1은 모든 h1 태그를 선택한다.
h1 {
color: blue;
}🌵2. 클래스 선택자
(Class Selector): 클래스 이름으로 요소를 선택한다. .으로 시작하고 클래스 이름을 작성합니다. 예를 들어, .container은 클래스 이름이 "container"인 모든 요소를 선택한다.
.container {
background-color: #f0f0f0;
}🪴3. ID 선택자 (ID Selector)
ID 속성 값으로 요소를 선택합니다. #으로 시작하고 ID 값을 작성한다. 예를 들어, #header는 ID가 "header"인 요소를 선택한다.
#header {
font-size: 24px;
}🌽4. 속성 선택자 (Attribute Selector)
속성 값을 기반으로 요소를 선택한다. [] 내에 속성 이름과 선택 조건을 작성한다. 예를 들어, [type="submit"]은 type 속성 값이 "submit"인 요소를 선택한다.
input[type="submit"] {
background-color: green;
}🌱5. 가상 클래스 선택자 (Pseudo-class Selector)
특정 상태나 위치에 있는 요소를 선택한다. :으로 시작하고 가상 클래스 이름을 작성한다. 예를 들어, :hover는 마우스를 요소 위로 올렸을 때 해당 요소를 선택한다.
a:hover {
text-decoration: underline;
}🌵6. 가상 요소 선택자 (Pseudo-element Selector)
특정 요소의 특정 부분을 선택한다. ::으로 시작하고 가상 요소 이름을 작성한다. 예를 들어, ::before는 요소의 내용의 앞부분을 선택하여 스타일을 적용한다.
p::before {
content: ">> ";
font-weight: bold;
}📌폰트관련 속성
CSS에서 폰트와 관련된 속성은 텍스트의 모양, 크기, 스타일 등을 조정하는 데 사용된다.
🌟1. font-family
- 설명: 텍스트에 적용할 폰트 패밀리를 지정한다. 여러 개의 폰트 이름을 명시하고, 사용 가능한 폰트가 없는 경우 대체 폰트를 선택한다.
- 예시:
font-family: Arial, sans-serif;
🌠2. font-size
- 설명: 텍스트의 크기를 지정한다. 크기는 픽셀(px), 백분율(%), em 등의 단위로 지정할 수 있다.
- 예시:
font-size: 16px;
💫3. font-weight
- 설명: 텍스트의 굵기를 지정한다. 일반적으로
normal(기본 굵기) 또는bold(굵게) 값을 사용한다. - 예시:
font-weight: bold;
🌟4. font-style
- 설명: 텍스트의 스타일을 지정한다. 일반적으로
normal(기본 스타일) 또는italic(이탤릭체) 값을 사용한다. - 예시:
font-style: italic;
🌠5. text-decoration
- 설명: 텍스트에 장식을 추가한다. 주로 링크(
<a>) 요소에 사용되며,none(장식 없음),underline(밑줄),line-through(취소선) 등의 값을 사용한다. - 예시:
text-decoration: underline;
💫6. line-height
- 설명: 줄 간격을 지정한다. 텍스트 줄의 높이를 조정하여 행간을 조절한다.
- 예시:
line-height: 1.5;
📌END
part - 2 에서 계속
