728x90

배경

backgound-color

: 배경색 지정

backgound-clip

: 배경색의 적용 범위 조절

  • border-box: 가장 외곽인 테두리까지 적용. 기본값
  • padding-box: 테두리를 뺀 패딩 범위까지 적용
  • content-box: 콘텐츠 부분에만 적용

border-box / padding-box / content-box

backgound-image

: 배경 이미지 삽입

background-image: url('이미지 파일 경로');
    div {
      width: 350px;
      height: 350px;
      border: 1px solid #000;
      background-image: url('./img/profile.jfif');
    }

backgound-size

: 배경 이미지 크기 조절

backgound-repeat

: 배경 이미지 반복 방법 설정

    div {
      width: 350px;
      height: 350px;
      border: 1px solid #000;
      background-image: url('./img/profile.jfif');
      background-size: 350px;
      background-repeat: no-repeat;
    }

    div {
      width: 350px;
      height: 350px;
      border: 1px solid #000;
      background-image: url('./img/profile.jfif');
      background-size: 300px;
      background-repeat: repeat-y;
    }

backgound-position

: 배경 이미지 위치 조절

    div {
      width: 350px;
      height: 350px;
      border: 1px solid #000;
      background-image: url('./img/profile.jfif');
      background-size: 300px;
      background-repeat: repeat-y;
      background-position: center;
    }

backgound-origin

: 배경 이미지 적용 범위 조절

    • border-box: 가장 외곽인 테두리까지 적용. 기본값
    • padding-box: 테두리를 뺀 패딩 범위까지 적용
    • content-box: 콘텐츠 부분에만 적용

border-box / padding-box / content-box

728x90

텍스트

color

: 글자색 지정

표현 방법)

  1. 16진수: #000000 ~ #ffffff
  2. hsl(a): 색상, 채도, 명도(, 불투명도)
  3. rgb(a): 빨강, 초록, 파랑(, 불투명도)
  4. 영문법: red, yellow, black, ...
  <style>
    p#one {
      color: rgb(0%, 50%, 0%);
    }
    p#two {
      color: rgba(0%, 50%, 0%, 1);
    }
    p#three {
      color: hsla(300, 50%, 50%, 0.3);
    }
    p#four {
      color: #00ff00;
    }
  </style>
</head>
<body>
  <p id="one">글자 색상 지정하기</p>
  <p id="two">글자 색상 지정하기</p>
  <p id="three">글자 색상 지정하기</p>
  <p id="four">글자 색상 지정하기</p>
</body>

font-family

: 글꼴 지정. 한 개 이상의 글꼴을 지정할 수 있으며 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용

font-size

: 글자 크기 지정

rem: 루트 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
em: 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위

font-weight

: 글자 두께 지정

line-height

: 줄 간격 조절 지정

text-align

: 텍스트 정렬

text-decoration

: 텍스트 줄 긋기

  <style>
    * {
      font-family: monospace, Arial;
    }
    body {
      font-size: 32px;
    }
    #first {
      font-size: 3rem;
      font-weight: 900;
      line-height: 16px;
      text-align: center;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p id="first">텍스트 스타일 꾸미기</p>
  <p>텍스트 스타일 꾸미기</p>
</body>

 

728x90

'HTML, CSS' 카테고리의 다른 글

[CSS] 연결 선택자, 속성 선택자, 가상 클래스, 가상 요소  (0) 2025.04.15
CSS 레이아웃 관련 속성  (0) 2025.04.15
CSS 박스 모델  (0) 2025.04.14
CSS 기본 - 사용법, 선택자, 상속  (0) 2025.04.14
HTML 기초  (0) 2025.04.02

티스토리툴바