CSS 필수 속성

정현승·2024년 10월 17일
CSS

텍스트 관련 속성

color

텍스트의 색상을 설정합니다.

  • 색상 이름: red, blue, green 등
  • HEX 코드: #ff5733, #000000 등
  • RGB: rgb(255, 0, 0) (빨강)
  • RGBA: rgba(255, 0, 0, 0.5) (반투명 빨강)
p {
    color: #ff5733;  /* 주황색 */
}

font-family

사용할 글꼴을 지정합니다.

  • 글꼴 이름: 'Arial', 'Times New Roman', 'Georgia'
  • 기본 글꼴 패밀리: serif, sans-serif, monospace, cursive, fantasy
    설정한 글꼴이 사용 불가할 경우, 마지막의 기본 글꼴을 사용합니다.
h1 {
    font-family: 'Georgia', 'Times New Roman', serif;  /* 대체 글꼴 지정 */
}

font-size

텍스트의 크기를 설정합니다.

  • 절대 단위: px
  • 상대 단위: em, rem, %
h2 {
    font-size: 1.5rem;  /* 루트 em 단위 사용 */
}

font-weight

텍스트의 두께를 설정합니다.

  • 키워드: normal (400), bold (700), bolder, lighter
  • 숫자: 100, 200, 300, 400, 500, 600, 700, 800, 900
strong {
    font-weight: 600;  /* 중간 두께 */
}

font-style

텍스트의 스타일을 정의합니다.

  • normal: 일반 스타일
  • italic: 이탤릭체
  • oblique: 비스듬한 이탤릭체
em {
    font-style: italic;  /* 이탤릭체로 설정 */
}

text-align

텍스트의 정렬 방식을 설정합니다.

  • left: 왼쪽 정렬
  • right: 오른쪽 정렬
  • center: 가운데 정렬
  • justify: 양쪽 정렬
p {
    text-align: justify;  /* 양쪽 정렬 */
}

text-decoration

텍스트에 장식을 추가합니다.

  • none: 장식 없음
  • underline: 밑줄
  • overline: 윗줄
  • line-through: 취소선
  • blink: 깜박임 (브라우저 지원에 따라 다름)
a {
    text-decoration: underline;  /* 링크에 밑줄 */
}

line-height

텍스트의 줄 간격을 설정합니다.

  • 숫자: 1.5 (상대적 비율)
  • 절대 단위: px, em, %
p {
    line-height: 1.6;  /* 줄 간격을 1.6배로 설정 */
}

letter-spacing

문자 간의 간격을 설정합니다.

  • 절대 단위: px, em, rem
h1 {
    letter-spacing: 2px;  /* 문자 간격을 2픽셀로 설정 */
}

word-spacing

단어 간의 간격을 설정합니다.

  • 절대 단위: px, em, rem
p {
    word-spacing: 4px;  /* 단어 간격을 4픽셀로 설정 */
}

박스 모델 관련 속성

박스 모델(Box Model)은 HTML 요소가 웹 페이지에서 어떻게 렌더링되는지를 정의하는 중요한 개념입니다. 모든 HTML 요소는 박스 형태로 구성되어 있습니다.

Content

요소의 실제 내용이 표시되는 영역입니다. 텍스트, 이미지, 비디오 등 다양한 콘텐츠가 이 영역에 포함됩니다.

  • width: 요소의 너비를 설정합니다.
  • height: 요소의 높이를 설정합니다.
      ```css
  div {
      width: 300px;   /* 너비 300픽셀 */
      height: 200px;  /* 높이 200픽셀 */
  }
  ```

Padding

콘텐츠와 요소의 경계 사이의 공간을 설정합니다. 이 공간은 배경색이나 배경 이미지와 함께 표시됩니다.

  • padding: 모든 방향의 패딩을 설정합니다. 예: padding: 10px;
  • padding-top, padding-right, padding-bottom, padding-left: 각 방향의 패딩을 개별적으로 설정합니다.
      ```css
  div {
      padding: 20px;  /* 모든 방향에 20픽셀 패딩 */
  }
  ```

Border

요소의 경계선으로, 요소와 그 외부 요소 사이를 구분합니다. 경계선의 스타일, 두께, 색상을 설정할 수 있습니다.

  • border: 모든 방향의 경계를 설정합니다. 예: border: 1px solid black;
  • border-width: 경계의 두께를 설정합니다.
  • border-style: 경계의 스타일을 설정합니다 (예: solid, dashed, dotted).
  • border-color: 경계의 색상을 설정합니다.
      ```css
  div {
      border: 2px dashed red;  /* 두께 2픽셀, 대쉬 스타일, 빨간색 */
  }
  ```

Margin

요소와 주변 요소 사이의 공간을 설정합니다. 이 공간은 배경색이나 배경 이미지와 함께 표시되지 않습니다.

  • margin: 모든 방향의 마진을 설정합니다. 예: margin: 15px;
  • margin-top, margin-right, margin-bottom, margin-left: 각 방향의 마진을 개별적으로 설정합니다.
      ```css
  div {
      margin: 10px;  /* 모든 방향에 10픽셀 마진 */
  }
  ```
  
  마진 겹침 현상
  CSS에서 두 개 이상의 블록 요소가 인접해 있을 때, 서로의 마진(margin)이 겹치면서 발생하는 현상입니다.

Box-Sizing

요소의 너비와 높이를 계산하는 방식을 설정합니다. 기본적으로는 content-box 방식이 사용되지만, border-box를 사용하면 패딩과 경계선의 두께를 포함한 총 너비와 높이를 설정할 수 있습니다.

  • box-sizing: content-box 또는 border-box 값을 사용합니다.
      ```css
  div {
      box-sizing: border-box;  /* 패딩과 경계를 포함한 총 너비 및 높이 계산 */
      width: 300px;            /* 전체 너비가 300픽셀이 되도록 설정 */
      padding: 20px;           /* 20픽셀 패딩 */
      border: 5px solid black; /* 5픽셀 경계 */
  }
  ```

박스 모델의 성격과 display 속성

HTML의 모든 태그는 박스 모델을 가지고 있습니다. 그런데 이를 자세히 들여다보면 박스 모델도 블록, 인라인, 인라인 블록이라는 서로 다른 성격이 존재합니다.

● 블록 성격

블록 성격은 hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 말합니다. 그래서 hn, p, div 태그를 여러 번 사용하면 무조건 줄 바꿈됩니다.

● 인라인 성격

인라인 성격은 a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말합니다. 그래서 a, span, strong 태그를 여러 번 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치됩니다.

● 인라인 블록 성격

인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말합니다. 그래서 img 태그를 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치됩니다.

display 속성

display 속성은 HTML 요소가 웹 페이지에서 어떻게 표시될지를 결정하는 CSS 속성입니다. 이 속성은 요소의 박스 모델을 조정하고, 요소의 레이아웃 방식에 큰 영향을 미칩니다.

주요 display 값

  1. block

    • 정의: 블록 요소로, 새로운 줄에서 시작하며, 너비는 부모 요소의 전체 너비를 차지합니다.
    • 예시: <div>, <h1>, <p>, <section>
    .block {
    display: block;
}

  2. inline

    • 정의: 인라인 요소로, 새로운 줄을 만들지 않고, 콘텐츠에 따라 너비가 결정됩니다.
    • 예시: <span>, <a>, <strong>, <em>
    .inline {
    display: inline;
}

  3. inline-block

    • 정의: 인라인 요소처럼 새로운 줄을 만들지 않지만, 블록 요소처럼 너비와 높이를 설정할 수 있습니다.
    • 예시: 레이아웃을 위해 사용되는 경우가 많습니다.
    .inline-block {
    display: inline-block;
    width: 100px;   /* 너비 설정 가능 */
    height: 50px;   /* 높이 설정 가능 */
}

  4. none

    • 정의: 요소가 화면에서 보이지 않도록 합니다. 해당 요소는 페이지에서 완전히 제거된 것처럼 작동합니다.
    .hidden {
    display: none;
}

  5. flex

    • 정의: Flexbox 레이아웃 모델을 사용하여 요소들을 일렬로 정렬합니다. 유연한 레이아웃을 생성할 수 있습니다.
    • 예시: <div style="display: flex;">와 같이 사용합니다.
    .flex-container {
    display: flex;
}

  6. grid

    • 정의: CSS Grid 레이아웃을 사용하여 요소들을 격자 형태로 배치합니다. 복잡한 레이아웃을 쉽게 만들 수 있습니다.
    • 예시: <div style="display: grid;">와 같이 사용합니다.
    .grid-container {
    display: grid;
}

배경 이미지

배경 이미지는 웹 디자인에서 중요한 요소 중 하나로, 요소에 시각적인 매력을 추가하고 사용자 경험을 개선하는 데 도움을 줍니다.

background-image

요소의 배경으로 사용할 이미지를 설정합니다.

  • 사용할 수 있는 값:
    • URL: url('image.jpg')
    • 여러 이미지: url('image1.jpg'), url('image2.png')
div {
    background-image: url('background.jpg'); /* 배경 이미지 설정 */
}

background-repeat

배경 이미지의 반복 방식을 설정합니다.

  • 사용할 수 있는 값:
    • repeat: 이미지를 가로 및 세로로 반복 (기본값)
    • repeat-x: 이미지를 가로로만 반복
    • repeat-y: 이미지를 세로로만 반복
    • no-repeat: 이미지를 반복하지 않음
    • space: 이미지를 반복하고 남은 공간을 공백으로 나눔
    • round: 이미지를 반복하고, 이미지 크기를 조정하여 남은 공간을 채움
div {
    background-image: url('pattern.png');
    background-repeat: no-repeat; /* 이미지를 반복하지 않음 */
}

background-position

배경 이미지의 위치를 설정합니다.

  • 사용할 수 있는 값:
    • 위치 키워드: top, right, bottom, left, center
    • 절대 위치: px, % 단위 사용 가능 (예: 50% 50%, 10px 20px)
div {
    background-image: url('image.jpg');
    background-position: center; /* 중앙 정렬 */
}

background-size

배경 이미지의 크기를 설정합니다.

  • 사용할 수 있는 값:
    • auto: 기본 크기 유지 (기본값)
    • cover: 요소의 배경을 완전히 덮도록 이미지 크기 조정
    • contain: 이미지의 비율을 유지하며 요소 안에 맞게 조정
    • 절대 크기: px, % 단위 사용 가능 (예: 100px 100px, 50%)
div {
    background-image: url('image.jpg');
    background-size: cover; /* 요소를 완전히 덮도록 조정 */
}

background

여러 배경 관련 속성을 한 줄로 설정할 수 있습니다.

  • 사용할 수 있는 값:
    • background-image, background-repeat, background-position, background-size, background-color 등
div {
    background: url('image.jpg') no-repeat center/cover fixed; /* 모든 속성 한 줄로 설정 */
}
profile
정현승
이전 포스트

CSS 필수 개념

다음 포스트

CSS 필수 속성 2

0개의 댓글