JEONGGON

블로그

목 차

Semantic

〈

CSS Semantic

2023.02.22.

Semantic

Semantic

1. Semantic Web

웹 데이터를 의미론적으로 표현하고 연결하는 개념
컴퓨터가 데이터의 내용과 문맥을 더 효율적으로 이해하고 지능적으로 활용하도록 함
보여지는 것을 넘어 요소가 가진 목적과 역할에 집중함

2. Semantics in CSS

2-1. OOCSS

Object-Oriented CSS(객체 지향 CSS)의 약자

- OOCSS 예시


<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-description">This is a card description.</p>
  <button class="btn bg-blue">Learn More</button>
  <button class="btn bg-red">Learn More</button>
</div>

/*기본 Card 구조*/
.card {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 16px;
    width: 50%;
}

/*Card 제목*/
.card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

/*Card 설명*/
.card-description {
    font-size: 16px;
    margin-bottom: 16px;
}

/*기본 버튼 구조*/
.btn {
    display: inline-block;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 400;
    color: #212529;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/*파란 배경*/
.bg-blue {
    background-color: #007bff;
    color: #fff;
}

/*빨간 배경*/
.bg-red {
    background-color: #cb2323;
    color: #fff;
}

OOCSS 예시 결과

2-2. BEM

Block Element Modifier의 약자로 블록, 요소, 수정자를 사용해 클래스 이름을 구조화하는 방법론

- BEM 구성

Block

문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너
재사용 가능한 독립적 블록, 가장 바깥쪽 상위 요소
재사용을 위해 margin, padding을 적용하지 않음

.block {
}

Element

block이 포함하고 있는 한 조각
block을 구성하는 종속적인 하위 요소

.block__element {
}

Modifier

block 또는 element의 속성

.block__modifier {
}

- BEM 예시


<div class="card">
  <h2 class="card__title">제목</h2>
  <ul class="card__list">
    <li class="card__list-item--none">항목1</li>
    <li class="card__list-item--none">항목2</li>
  </ul>
  <button class="card__button card__button--red">버튼</button>
</div>

/*Block*/
.card {
    display: flex;
    flex-direction: column;
}

/*Element*/
.card__title {
    font-size: 2rem;
}

.card__list {
    margin: 0;
}

.card__button {
    font-size: 1rem;
    padding: 1rem;
    cursor: pointer;
}

/*Modifier*/
.card__list-item--none {
    list-style: none;
}

.card__button--red {
    background-color: crimson;
}