본문으로 건너뛰기
Advertisement

CSS3 기초 및 스타일링

CSS(Cascading Style Sheets)는 HTML 요소에 디자인을 적용하는 언어입니다.

1. CSS 적용 방법​

  1. 인라인 스타일 (Inline Style): 태그 내에 직접 작성 (비권장)

    <h1 style="color: blue;">제목</h1>

  2. 내부 스타일 시트 (Internal Style Sheet): <head> 안의 <style> 태그

  3. 외부 스타일 시트 (External Style Sheet): 별도의 .css 파일 (권장)

    <link rel="stylesheet" href="style.css">

2. 선택자 (Selectors)​

특정 요소를 선택하여 스타일을 입힙니다.

  • 전체 선택자: * { ... }
  • 태그 선택자: h1 { ... }
  • 클래스 선택자: .className { ... }
  • 아이디 선택자: #idName { ... }

3. 박스 모델 (Box Model)​

모든 HTML 요소는 사각형의 박스로 간주됩니다.

  • Content: 텍스트나 이미지가 들어있는 실제 영역
  • Padding: 테두리와 콘텐츠 사이의 안쪽 여백
  • Border: 테두리
  • Margin: 테두리 밖의 바깥쪽 여백
.box {
    width: 300px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

4. 색상 및 텍스트 스타일​

  • color: 글자 색상
  • background-color: 배경 색상
  • font-size: 글자 크기
  • font-weight: 글자 굵기
  • text-align: 텍스트 정렬 (left, center, right)

다음 장에서는 요소를 원하는 위치에 배치하는 레이아웃 기술을 배웁니다.

Advertisement
Advertisement