내부 요소 (i_)

내부 요소(i_)는 블록(Block)에 종속된 구성 요소를 의미합니다. 내부 요소는 블록의 구조를 세분화하기 위한 용도로만 사용됩니다.

내부 요소의 정의

내부 요소는 다음 조건을 만족합니다.

항상 특정 블록에 종속됩니다.
단독으로 의미를 가지지 않습니다.
블록의 내부 구조를 구성하는 역할을 합니다.

내부 요소는 블록 없이는 존재할 수 없습니다.

i_가 컴포넌트 내부를 뜻하는 이유와 p_·l_ 등 다른 접두사와의 구분은 접두사 기준표를 최종 기준으로 사용합니다. 이 문서는 i_를 CSS에서 어떻게 다룰지에 대한 실무 판단만 다룹니다.

내부 요소 사용 원칙

내부 요소는 다음 원칙을 따릅니다.

항상 블록 클래스와 함께 사용합니다.
단독 선택자 사용을 허용하지 않습니다.
블록의 책임을 대신하지 않습니다.
구조 표현을 목적으로 사용합니다.

내부 요소는 스타일 재사용보다 구조 명확성을 우선합니다.

선택자는 블록 밑으로 (단독 금지)

내부 요소 선택자는 가장 가까운 블록 밑에 스코프합니다. 컴포넌트뿐 아니라 페이지(page_)·레이아웃(layout_)도 동일하며, 중간 내부 요소는 선택자에 넣지 않아 2단계를 유지합니다.

.layout_header .l_avatar { }   /* O — layout 블록 밑으로 */
.page_main .p_label { }        /* O — page 블록 밑으로, 중간 내부 요소 스킵 */

.l_avatar { }                  /* X — 블록 없이 단독 */
.p_section .p_label { }        /* X — 중간 내부 요소를 스코프로 사용 (블록이 아님) */

내부 요소 설계 기준

내부 요소를 설계할 때는 다음을 고려합니다.

이 요소가 블록 내부에 종속되는가
다른 블록에서 재사용될 필요가 있는가
블록의 책임을 침범하지 않는가
수정자(m_)로 표현하는 것이 더 적절하지 않은가

내부 요소는 스타일 재사용이 아니라 블록 구조를 드러내기 위한 선택입니다.

내부 요소 규칙의 목적

내부 요소 규칙은 블록의 구조를 명확히 유지하고, UI 전체의 가독성과 유지보수성을 높이기 위한 기준입니다.

내부 요소가 명확할수록 블록의 역할과 구조가 코드 수준에서 분명해집니다.