**[계룡건설] GreenTech SW개발자 - CSS 학습 노트 .1**

이 카테고리는 국비지원 과정으로 [계룡건설] 빅데이터 기반 GreenTech SW개발자 과정에서 학습하는 내용을 정리하는 공간입니다.

---

CSS 핵심  정리

1. CSS 적용 방법

• 인라인 스타일: 태그의 style 속성에 직접 작성.
• 내부 스타일 시트: <style> 태그에 작성 (HTML 문서 내 head 태그에 위치).
• 외부 스타일 시트: .css 파일로 분리하여 <link> 태그로 연결.

---

2. CSS 셀렉터

기본 셀렉터

• 전체 선택자: * - 문서 내 모든 요소 선택.
• 태그 선택자: div, p, h1 등 - 특정 HTML 태그 선택.
• 클래스 선택자: .classname - 특정 클래스 속성을 가진 요소 선택.
• ID 선택자: #idname - 특정 ID 속성을 가진 요소 선택.

조합 셀렉터

• 자식 선택자: div > p - 특정 부모의 자식 요소만 선택.
• 자손 선택자: div p - 특정 부모의 모든 하위 요소 선택.
• 그룹 선택자: h1, h2, h3 - 여러 요소를 동시에 선택.

속성 선택자

• 특정 속성을 가진 요소 선택: input[type="text"]

가상 클래스 선택자

• :hover - 마우스 오버 상태.
• :focus - 포커스 상태.
• :nth-child(n) - n번째 자식 요소 선택.
• :first-child - 첫 번째 자식 요소 선택.

가상 요소 선택자

• ::before - 요소 앞에 콘텐츠 추가.
• ::after - 요소 뒤에 콘텐츠 추가.
• ::marker - 리스트 아이템 마커 꾸미기.

---

3. 박스 모델

박스 모델 4가지 영역

• 컨텐츠 영역: 텍스트나 이미지 등이 위치하는 내부 영역.
• 패딩: 컨텐츠와 테두리 사이의 내부 여백.
• 보더: 테두리.
• 마진: 요소 외부 여백.

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

박스 크기 계산

• 기본적으로 요소의 width와 height는 컨텐츠 영역의 크기.
• box-sizing: border-box; - 패딩과 보더를 포함한 전체 박스 크기 지정.

---

4. 배치와 정렬

Display 속성

• block: 블록 요소 (새 줄에서 시작, 전체 너비 차지).
• inline: 인라인 요소 (컨텐츠 크기만큼 차지).
• inline-block: 인라인처럼 배치, 블록처럼 크기 지정 가능.
• flex: 유연한 박스 모델 레이아웃.
• grid: 격자형 레이아웃 시스템.

Position 속성

• static: 기본값 (요소를 문서 흐름에 따라 배치).
• relative: 요소 자신의 위치 기준으로 이동.
• absolute: 가장 가까운 position 속성을 가진 부모 기준.
• fixed: 뷰포트를 기준으로 고정.
• sticky: 스크롤 중 특정 지점에서 고정.

---

5. 색상과 배경

• color: 텍스트 색상.
• background-color: 배경 색상.
• background-image: 배경 이미지.
• background-size: 이미지 크기 지정.
• background-repeat: 이미지 반복 여부 지정.
• background-position: 이미지 위치 지정.

---

6. 텍스트와 글꼴

• font-family: 글꼴.
• font-size: 글자 크기.
• font-weight: 글자 두께.
• text-align: 텍스트 정렬.
• text-decoration: 텍스트 꾸미기 (밑줄, 취소선 등).
• line-height: 줄 간격.
• letter-spacing: 글자 간격.
• word-spacing: 단어 간격.

---

7. 애니메이션과 전환

전환 (Transitions)

• 요소의 상태 변화를 부드럽게 만듦.

.box {
  transition: all 0.3s ease;
}

애니메이션 (Animations)

• 여러 단계의 스타일 변화를 만들어 애니메이션 효과.

@keyframes example {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: example 2s infinite;
}

---

8. 기타 중요 속성

Overflow

• 컨텐츠가 요소 크기를 넘어갈 때 처리 방법.
• visible: 넘친 콘텐츠 표시 (기본값).
• hidden: 넘친 콘텐츠 숨김.
• scroll: 스크롤바 생성.
• auto: 필요할 때만 스크롤바 생성.

Z-index

• 요소 쌓임 순서 지정.
• 값이 높을수록 위에 배치.

Visibility

• 요소 숨기기 (영역은 차지함).
• visible: 보이게 함.
• hidden: 안 보이게 함.
• collapse: 테이블 행/열을 숨길 때 사용.

List-style

• 리스트 아이템 마커 스타일 지정.
• list-style-type: 마커 모양 지정.
• list-style-position: 마커 위치 지정.
• list-style-image: 마커 대신 사용할 이미지 지정.

---

9. 반응형 디자인

미디어 쿼리

• 화면 크기에 따라 스타일을 변경.

@media (max-width: 600px) {
  .box {
    background-color: lightblue;
  }
}

---