← 이전 주차
퀴즈 풀기 →
다음 주차 →

배경색 · rgb / rgba

CSS3에서는 색상을 rgb()와 rgba() 함수로 지정할 수 있습니다.

표기법형식설명
키워드 yellow, hotpink CSS 미리 정의된 색상 이름
16진수 #ff0000 R·G·B 각 2자리 16진수
rgb() rgb(255, 0, 0) R·G·B 각 0~255 정수
rgba() rgba(255, 0, 0, 0.5) R·G·B + 투명도(alpha) 0~1 
body {
  background-color: rgb(255, 255, 0);    /* 노란색 */
  /* 또는: background-color: yellow; */
}

#button {
  background-color: rgba(0, 0, 255, 0.5);  /* 반투명 파란색 */
}

#button:hover {
  background-color: rgba(0, 0, 255, 0.7);  /* hover 시 더 진하게 */
}
alpha 값: 0 = 완전 투명, 1 = 완전 불투명
0.5는 50% 투명 — 배경이 비쳐 보임

border 심화

border 단축 표기

border: 두께 스타일 색상;

/* 예시 */
border: 5px solid #00FFFF;   /* 전체 테두리 */
border-top: 1px solid red;    /* 위쪽만 */
border-bottom: 1px solid red; /* 아래쪽만 */
border-left: 3px solid blue;  /* 왼쪽만 */
border-right: 3px solid blue; /* 오른쪽만 */

border 스타일 종류

스타일 값모양
solid실선 ─────
double이중선 ═════
dotted점선 · · · · ·
dashed파선 - - - - -
 
#border1 { border: solid 1px #ff0000; }         /* 빨간 실선 */
#border2 { border: double 5px #00ff00; }        /* 초록 이중선 */
#border3 {
  border-top: dotted 1px #0000ff;               /* 위 점선 */
  border-bottom: dashed 1px #0000ff;            /* 아래 파선 */
}
#border4 {
  border-left: solid 3px #ff00ff;               /* 좌우만 */
  border-right: solid 3px #ff00ff;
}

padding vs margin

속성위치특징
padding 테두리 안쪽 여백 배경색이 padding 영역까지 채워짐
margin 테두리 바깥쪽 여백 다른 요소와의 거리. 배경색 없음.

padding — 테두리 안 여백

p {
  border: 5px solid #00FFFF;
  padding: 10px 20px 30px 40px;
  /*       위  오른 아래 왼  */
}

margin — 테두리 바깥 여백

p {
  border: 5px solid #00FFFF;
  padding: 10px;
  margin: 20px 40px 60px 80px;
  /*      위  오른 아래  왼 */
}
4값 단축 표기 암기법 — 시계방향:
위(top) → 오른쪽(right) → 아래(bottom) → 왼쪽(left)
padding: 10px 20px 30px 40px → 위10 / 오른20 / 아래30 / 왼40

box-sizing

width와 height가 어느 영역을 기준으로 크기를 계산하는지 결정합니다.

값크기 기준특징
content-box 콘텐츠 영역 기준 기본값. padding·border가 추가되면 전체 크기가 커짐
border-box 테두리 기준 padding·border 포함해서 width 크기 유지. 레이아웃 계산이 쉬움

content-box (기본값)

.one {
  border: 10px solid red;
  width: 300px;
  height: 100px;
  box-sizing: content-box;
}
/* 실제 차지 너비:
   300(content) + 20(border) = 320px */

border-box

.two {
  border: 10px solid blue;
  width: 300px;
  height: 100px;
  padding: 50px;
  box-sizing: border-box;
}
/* 실제 차지 너비: 300px 고정
   content = 300 - 20(border) - 100(padding) */
실무 팁: * { box-sizing: border-box; }를 전체에 적용하면 padding/border가 추가돼도 레이아웃이 틀어지지 않아 편리합니다.

블록 vs 인라인

구분 대표 태그 너비 줄바꿈 width/height margin 위아래
블록(block) div, h1~h6, p, ul, ol, li, table, form 가로 전체 발생 지정 가능 적용됨
인라인(inline) span, a, img, input, b, strong, i, small 내용 너비 없음 무시됨 무시됨
인라인블록 img, button 내용 너비 없음 지정 가능 적용됨
인라인 요소 주의점: display: inline이면 width, height, margin-top, margin-bottom을 지정해도 적용되지 않음.
크기 조절이 필요하면 display: inline-block으로 변경.

display로 형식 변경

/* 인라인 → 블록으로 변경 */
a { display: block; width: 200px; }

/* 블록 → 인라인으로 변경 (수평 메뉴) */
li { display: inline; }

/* 인라인처럼 나란히, 블록처럼 크기 지정 */
span { display: inline-block; width: 100px; height: 50px; }

퀴즈로 복습하기

7주차 퀴즈 풀기 →