9주차 학습 — DevFlash

텍스트 CSS 속성

글꼴·색상·크기 등 텍스트 관련 속성을 한눈에 정리합니다.

속성	예시 값	설명
`font-family`	`'맑은 고딕', '돋움', Sans-Serif`	글꼴 지정. 앞에서부터 차례로 적용, 없으면 다음 글꼴 사용.
`color`	`#FF0000`	글자 색상
`font-size`	`20px` / `1.25em`	글자 크기. px는 고정, em은 부모 기준 배율.
`font-weight`	`bold`	글자 굵기
`font-style`	`italic`	이탤릭체
`text-align`	`center`	텍스트 정렬 (left / center / right)
`text-decoration`	`underline` / `none`	밑줄 등 장식. `none`으로 링크 밑줄 제거.
`line-height`	`150%` / `1.8`	줄 간격. 글자 크기 대비 비율.

p {
  font-family: Arial, '맑은 고딕', Sans-Serif;
  color: purple;
  font-size: 1em;
  font-weight: bold;
  line-height: 180%;
  text-decoration: none;
}

text-shadow (글자 그림자)

text-shadow로 글자에 그림자 효과를 줄 수 있습니다. 값은 4개를 순서대로 지정합니다.

text-shadow: 5px 5px 2px #cccccc;
/*            1   2   3      4   */

순서	의미	예시
1	오른쪽 그림자 길이 (X축)	`5px`
2	아래쪽 그림자 길이 (Y축)	`5px`
3	흐린 정도 (blur)	`2px`
4	그림자 색상	`#cccccc`

h3 {
  color: purple;
  font-family: '맑은 고딕', '돋움';
  font-size: 36px;
  font-weight: bold;
  text-shadow: 5px 5px 2px #cccccc;
}

            X·Y 값이 클수록 그림자가 멀리 떨어지고, blur 값이 클수록 그림자가 퍼져 흐릿해집니다.
          

background 속성

속성	설명
`background-color`	배경색 지정
`background-image`	배경 이미지 지정 — `url('경로')`
`background-repeat`	반복 여부 — `no-repeat` / `repeat-x` / `repeat-y`
`background-position`	배경 이미지 위치 — `right top` / `center center` 등
`background-attachment`	스크롤 시 배경 고정(`fixed`) 또는 같이 이동(`scroll`)

개별 설정

body {
  background-image: url('./img/forest.jpg');
  background-repeat: repeat-x;
  background-color: #dddddd;
}

단축 표기 (한꺼번에)

body {
  background: #dddddd
    url('./img/forest.jpg')
    no-repeat right top;
}

            단축 표기 순서: 배경색 → 이미지 경로 → 반복 여부 → 위치
          

background-size

배경 이미지가 요소 영역 안에서 어떤 크기로 표시될지 결정합니다.

값	동작
`auto`	원래 이미지 크기 그대로 표시 (기본값)
`cover`	요소를 빈틈없이 다 덮도록 확대/축소. 비율 유지, 이미지 잘릴 수 있음.
`contain`	요소 안에 이미지 전체가 들어오도록 확대/축소. 비율 유지, 여백 생길 수 있음.
`50% 50%`	요소 너비·높이의 50%로 지정 (백분율)
`150px 120px`	너비 150px, 높이 120px로 고정 지정

/* background-repeat: no-repeat 와 함께 사용 */
.box1 { background-size: auto; }     /* 원래 크기 */
.box2 { background-size: cover; }    /* 요소 꽉 채움 */
.box3 { background-size: contain; }  /* 이미지 전체 보임 */
.box4 { background-size: 50% 50%; }  /* 백분율 */
.box5 { background-size: 150px 120px; } /* px 고정 */

opacity (투명도)

opacity는 요소 전체의 투명도를 지정합니다. rgba()의 alpha가 배경색에만 적용되는 것과 달리, opacity는 자식 요소를 포함한 요소 전체에 적용됩니다.

값	의미
`0`	완전 투명 (보이지 않음)
`0.3`	30% 불투명 (많이 투명)
`0.8`	80% 불투명 (약간 투명)
`1`	완전 불투명 (기본값)

img { opacity: 0.3; }          /* 기본 상태: 흐리게 */
img:hover { opacity: 0.8; }    /* 마우스 올리면 또렷하게 */

            opacity vs rgba alpha:

            opacity: 0.5 → 요소 + 자식 + 텍스트 모두 투명해짐

            rgba(0,0,0,0.5) → 배경색만 투명, 텍스트는 그대로

그라데이션 글자

linear-gradient를 배경 이미지로 지정한 뒤 background-clip: text로 글자 모양으로 잘라내는 기법입니다.

linear-gradient 형식

background-image: linear-gradient(방향, 시작색 0%, 끝색 100%);

/* 예시 */
background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
background-image: linear-gradient(135deg, #e6ba5d 0%, #9ac78a 100%);

방향 값	그라데이션 방향
`to top`	아래 → 위
`to right`	왼쪽 → 오른쪽
`to bottom`	위 → 아래 (기본)
`135deg`	135도 대각선 방향

글자에 그라데이션 적용하는 방법

header h1 span {
  background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
  -webkit-background-clip: text;   /* Chrome / Safari */
  -moz-background-clip: text;      /* Firefox (구버전) */
  background-clip: text;           /* 표준 */
  color: transparent;              /* 글자색 투명 → 배경이 비침 */
}

            핵심 원리:

            1. background-image에 그라데이션 지정

            2. background-clip: text로 배경을 글자 모양으로 자르기

            3. color: transparent로 글자 자체를 투명하게 → 배경(그라데이션)이 글자처럼 보임

퀴즈로 복습하기

9주차 퀴즈 풀기 →