[카카오테크 부트캠프] CSS 기초

CSS3의 개념

• CSS3는 Cascading Style Sheets의 최신 버전으로, 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다.
• HTML이 웹 페이지의 구조를 담당한다면, CSS는 이 구조를 꾸며주는 역할을 합니다.
• 주로 색상, 폰트, 간격, 배치 등의 스타일을 지정하여 웹 페이지의 시각적인 표현을 다룹니다

CSS3의 주요 역할

스타일 지정

• CSS는 HTML 요소에 스타일을 적용하여 웹 페이지의 시각적인 디자인을 꾸밀 수 있습니다.
• 각 요소에 대해 색상, 글꼴, 배경, 여백 등의 스타일을 지정할 수 있습니다.
• transition, animation 등의 속성을 사용하여 웹 요소에 다양한 애니메이션과 효과를 적용할 수 있습니다.

레이아웃 조정

• CSS는 웹 페이지의 요소들을 배치하는 데 중요한 역할을 합니다.
• Flexbox나 Grid와 같은 CSS 레이아웃 기술을 사용하여 요소들을 정렬하고 배치할 수 있습니다.

반응형 디자인

• CSS3는 미디어 쿼리(Media Queries)와 함께 사용되어 다양한 디바이스 크기에 맞춰 웹 페이지를 반응형으로 만들 수 있습니다.
• 이를 통해 모바일 기기나 데스크톱 화면에 최적화된 스타일을 적용할 수 있습니다.

선택자 (Selector)

• 선택자(Selector)는 CSS에서 HTML 요소를 선택할 때 사용하는 패턴이나 규칙이며, 선택자는 CSS 규칙의 첫 부분에 위치합니다.
• CSS에서는 다양한 선택자를 사용하여 HTML 요소에 스타일을 적용할 수 있습니다.
• 이 선택자들은 요소를 식별하고 스타일을 지정하는데 사용됩니다

선택자 종류

1. 전체 선택자 (*): 모든 요소를 선택합니다.
2. 요소 선택자: HTML 요소명을 직접 지정하여 스타일을 적용합니다
3. 클래스 선택자 (.class): HTML 요소에 클래스를 추가하고 그 클래스를 선택하여 스타일을 적용합니다.
4. 아이디 선택자 (#id): HTML 요소에 고유한 아이디를 추가하고 그 아이디를 선택하여 스타일을 적용합니다
5. 자식 선택자 (selector > selector): 특정 요소의 직계 자식 요소들을 선택하여 스타일을 적용합니다.
6. 자손 선택자 (selector selector): 특정 요소의 자손 요소들을 선택하여 스타일을 적용합니다.

여러 가지 레이아웃

박스 모델(Box Model)

• HTML 요소는 content, padding, border, margin으로 구성됩니다.
• Content: 실제 내용이 표시되는 영역입니다.
• Padding: 콘텐츠와 테두리(border) 사이의 여백입니다.
• Border: 콘텐츠 주위의 테두리입니다.
• Margin: 요소와 다른 요소 사이의 공간입니다

플렉스 박스(Flexbox)

• 요소를 효율적으로 정렬, 배치할 수 있는 레이아웃 모델입니다.
• 주로 한 방향(행 또는 열)으로 요소들을 정렬하는 데 사용됩니다.
• CSS에서 display: flex; 를 사용하여 부모 요소를 플렉스 컨테이너로 만들고, 자식 요소들을 유연하게 배치할 수 있습니다

그리드(Grid) 

• 2차원 레이아웃 시스템으로, 요소들을 행과 열의 그리드로 배치할 수 있습니다.
• CSS에서 display: grid; 를 사용하여 그리드 컨테이너를 만들고, 각 요소들을 그리드 셀에 배치합니다.
• 반응형 웹 디자인에 매우 유용하며, 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

플로팅(Floating)

• CSS에서 사용되는 레이아웃 기법으로, 특정 요소를 화면의 한쪽에 띄우는 방법입니다.
• 주로 이미지와 텍스트를 병렬로 배치할 때 사용되며, CSS에서 float: left; 또는 float: right; 속성을 사용하여 요소를 띄웁니다.