국비지원교육/[계룡건설] 빅데이터 기반 GreenTech SW개발자

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

알뜰한대학생 2025. 2. 17. 11:19

이 카테고리는 국비지원 과정으로 [계룡건설] 빅데이터 기반 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;
  }
}