[CSS] 스타일가이드에서 블록 단위 표현

웹 페이지의 스타일가이드를 만들려고 하는데, 블럭 단위로 만들어서, 필요한 부분에 레고 블록 처럼 끼워 넣어 사용하고 싶어. 그러려면 이름이 중복이 되지 말아야 할텐데, 예를 들어보자면 표도 있고, 이미지도 있고, 텍스트도 있고, 본문도 있고, 제목도 있고, 인용도 있으면서 그리고 각각에 유형들도 몇가지 있다고 치면 어떤 규칙을 가지는게 좋을까? 설명해주고, 예를 들어줘

 

스타일 가이드를 블록 단위로 만들어서 레고 블록처럼 재사용하려는 접근은 훌륭한 생각입니다. 이를 위해 각 블록에 고유한 이름을 부여하는 명명 규칙이 중요합니다. 다음은 명명 규칙을 제안하고, 이러한 규칙을 통해 스타일 가이드를 구성하는 방법을 설명하겠습니다.

명명 규칙

1. 접두어 사용:
   • 각 블록 유형에 접두어를 사용하여 블록의 목적을 명확히 합니다.
   • 예: tbl(table), img(image), txt(text), hdr(header), qte(quote)
2. 블록 기능 구분:
   • 블록의 기능이나 역할에 따라 이름을 세분화합니다.
   • 예: tbl-primary, img-thumbnail, txt-body, hdr-title, qte-inline
3. 일관성 유지:
   • 명명 규칙은 일관성을 유지해야 합니다. 예를 들어, 접두어와 기능 구분을 항상 같은 순서로 사용합니다.
   • 예: tbl-secondary, img-feature, txt-caption, hdr-subtitle, qte-block
4. 숫자나 알파벳으로 세부 유형 구분:
   • 유사한 블록의 세부 유형을 구분하기 위해 숫자나 알파벳을 추가합니다.
   • 예: tbl-primary-1, tbl-primary-2, img-thumbnail-a, img-thumbnail-b

예시

표 (Tables)

• tbl-primary: 메인 표 스타일
• tbl-secondary: 보조 표 스타일
• tbl-striped: 줄무늬 표 스타일
• tbl-bordered: 테두리가 있는 표 스타일

이미지 (Images)

• img-thumbnail: 썸네일 이미지 스타일
• img-feature: 주요 이미지 스타일
• img-avatar: 아바타 이미지 스타일
• img-fullwidth: 전체 너비 이미지 스타일

텍스트 (Text)

• txt-body: 본문 텍스트 스타일
• txt-caption: 캡션 텍스트 스타일
• txt-highlight: 강조된 텍스트 스타일
• txt-muted: 희미한 텍스트 스타일

제목 (Headers)

• hdr-title: 메인 제목 스타일
• hdr-subtitle: 부제목 스타일
• hdr-section: 섹션 제목 스타일
• hdr-caption: 캡션 제목 스타일

인용 (Quotes)

• qte-inline: 인라인 인용 스타일
• qte-block: 블록 인용 스타일
• qte-highlight: 강조된 인용 스타일
• qte-muted: 희미한 인용 스타일

명명 규칙 적용 예시

<!-- 표 예시 -->
<table class="tbl-primary">
  <!-- 표 내용 -->
</table>

<table class="tbl-bordered tbl-striped">
  <!-- 표 내용 -->
</table>

<!-- 이미지 예시 -->
<img src="thumbnail.jpg" class="img-thumbnail" alt="썸네일">
<img src="feature.jpg" class="img-feature" alt="주요 이미지">

<!-- 텍스트 예시 -->
<p class="txt-body">본문 텍스트 예시입니다.</p>
<p class="txt-highlight">이 텍스트는 강조됩니다.</p>

<!-- 제목 예시 -->
<h1 class="hdr-title">메인 제목</h1>
<h2 class="hdr-subtitle">부제목</h2>

<!-- 인용 예시 -->
<blockquote class="qte-block">이것은 블록 인용입니다.</blockquote>
<blockquote class="qte-inline">이것은 인라인 인용입니다.</blockquote>

 

추가 고려 사항

1. 유지보수:
   • 블록 명명 규칙은 유지보수와 확장을 고려해야 합니다. 새로운 블록이 추가될 때 일관성을 유지할 수 있어야 합니다.
2. 문서화:
   • 스타일 가이드를 문서화하여 팀원들이 명명 규칙을 쉽게 이해하고 따를 수 있도록 합니다.
3. 모듈화:
   • 각 블록을 모듈화하여 필요에 따라 쉽게 재사용할 수 있도록 합니다.

이러한 명명 규칙을 통해 스타일 가이드를 구성하면 일관성을 유지하면서도 쉽게 재사용 가능한 블록을 만들 수 있습니다. 추가로 궁금한 점이 있거나 더 자세한 예시가 필요하다면 말씀해 주세요.

 

---

예를 들어 div.info-diggle 이라는 클래스 가 있다면, 그 안에 배경이미지에 대한 속성이 들어있고, img 를 포함하고, 오른쪽 끝에는 ♡ 가 있어. 그 밑에는 제목 텍스트가 있고 그 밑에는 설명 텍스트가 있어. 이렇게 세트로 구성되어있는 것들은 어떻게 할까?

 

이와 같은 세트로 구성된 블록의 경우에도 명명 규칙을 사용하여 일관되게 스타일을 정의할 수 있습니다. 블록을 구성하는 개별 요소들도 명확하게 구분할 수 있도록 각 요소에 대해 하위 클래스를 정의합니다.

다음은 div.info-diggle 블록에 대한 스타일과 명명 규칙의 예입니다.

구조 및 명명 규칙

1. 블록: info-diggle (주 블록)
2. 배경 이미지: info-diggle-bg
3. 이미지: info-diggle-img
4. 하트 아이콘: info-diggle-heart
5. 제목 텍스트: info-diggle-title
6. 설명 텍스트: info-diggle-description

HTML 구조 예시

<div class="info-diggle">
    <div class="info-diggle-bg">
        <img src="image.jpg" class="info-diggle-img" alt="이미지">
        <span class="info-diggle-heart">♡</span>
    </div>
    <h2 class="info-diggle-title">제목 텍스트</h2>
    <p class="info-diggle-description">설명 텍스트</p>
</div>

 

CSS 스타일 예시

/* 주 블록 스타일 */
.info-diggle {
    /* 블록에 대한 기본 스타일 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* 배경 이미지 스타일 */
.info-diggle-bg {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 이미지 스타일 */
.info-diggle-img {
    max-width: 80%;
    border-radius: 8px;
}

/* 하트 아이콘 스타일 */
.info-diggle-heart {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 24px;
    color: red;
}

/* 제목 텍스트 스타일 */
.info-diggle-title {
    margin: 16px 0 8px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* 설명 텍스트 스타일 */
.info-diggle-description {
    font-size: 16px;
    color: #666;
    text-align: center;
}

 

설명

• 주 블록 (info-diggle): 블록 자체에 대한 기본 스타일을 정의합니다. 배경색, 패딩, 테두리 등을 설정합니다.
• 배경 이미지 (info-diggle-bg): 블록의 배경 이미지를 설정하고, 이 안에 포함된 이미지와 하트 아이콘의 위치를 조정합니다.
• 이미지 (info-diggle-img): 블록 내 이미지에 대한 스타일을 설정합니다. 최대 너비를 설정하고, 필요 시 테두리 반경을 적용합니다.
• 하트 아이콘 (info-diggle-heart): 아이콘의 위치와 크기를 설정합니다.
• 제목 텍스트 (info-diggle-title): 제목 텍스트에 대한 스타일을 설정합니다. 마진, 글꼴 크기, 굵기 등을 설정합니다.
• 설명 텍스트 (info-diggle-description): 설명 텍스트에 대한 스타일을 설정합니다. 글꼴 크기, 색상 등을 설정하고, 텍스트 정렬을 중앙으로 맞춥니다.

이와 같은 방식으로 세트로 구성된 블록의 각 요소에 대해 명확한 명명 규칙과 스타일을 적용하면, 유지보수와 재사용이 용이해집니다. 추가로 궁금한 점이 있거나 다른 블록에 대한 예시가 필요하다면 말씀해 주세요.