======================================================================
■ CSS (Cascading Style Sheets) 핵심 가이드라인 및 요약 정리 ■
■ 작성자 : KYH
■ 작성일자 : 2026.06.03
■ 특이사항 :
----------------------------------------------------------------------
수정자 : 
수정일자 :
변경사항 :
----------------------------------------------------------------------
수정자 : 
수정일자 :
변경사항 :
----------------------------------------------------------------------
수정자 : 
수정일자 :
변경사항 :
======================================================================

1. CSS의 기본 개념
----------------------------------------------------------------------
- HTML(spa에선 xml 포함)이 웹사이트의 '뼈대와 장기(구조)'라면, CSS는 '피부와 옷(디자인)'입니다.
- 레이아웃, 색상, 폰트 등을 제어하여 사용자에게 아름다운 화면을 제공합니다.
- UI5와 같은 프레임워크에서도 화면의 세부 스타일(여백, 정렬 등)을 미세 조정할 때 필수적으로 사용됩니다.


2. 기본 문법 구조
----------------------------------------------------------------------
선택자 {
    속성: 값;
    속성: 값;
}

* 예시:
h1 {
    color: blue;
    font-size: 20px;
}

※ 주의: 
- 속성과 값 사이에는 콜론(:)을 붙입니다.
- 하나의 선언이 끝나면 반드시 세미콜론(;)을 붙여야 다음 줄이 인식됩니다. (누락 시 에러 발생!)


3. HTML에 CSS를 적용하는 3가지 방법
----------------------------------------------------------------------
① 외부 스타일시트 (External) -> [★가장 추천 / UI5에서 쓰는 방식]
   - 별도의 .css 파일을 만들고 HTML의 <head> 태그 안에 <link>로 연결하거나, 
     UI5의 manifest.json에 "uri"로 등록하여 사용합니다.
   - 예: <link rel="stylesheet" href="css/style.css">

② 내부 스타일시트 (Internal) [ui5에선 불가]
   - HTML 파일의 <head> 태그 안에 <style> 태그를 열어 작성합니다.
   - 단발성 페이지 테스트용으로 주로 씁니다.

③ 인라인 스타일 (Inline) [ui5에선 지원해주는 속성이 따로 존재]
   - HTML 태그 내부에 style 속성으로 직접 적습니다.
   - 예: <p style="color: red;">글자색 변경</p>
   - 유지보수가 매우 힘들어지므로 꼭 필요한 경우가 아니면 지양합니다.


4. 자주 쓰는 핵심 선택자 (Selectors)
----------------------------------------------------------------------
- 전체 선택자 ( * ) : 페이지의 모든 요소를 선택 (보통 기본 여백 초기화용)
- 클래스 선택자 ( .클래스명 ) : 특정 클래스명을 가진 요소에 적용 (중복 사용 가능)
- [ui5에선 절대 금지] 태그 선택자 ( 태그명 ) : 해당 HTML 태그 전체에 적용 (ex: div, p, button) 
- [ui5에선 절대 금지] ID 선택자 ( #ID명 ) : 페이지 내에서 유일한 고유 ID를 가진 요소에 적용 (중복 불가)

> Tip: UI5에서는 컨트롤에 .addStyleClass("myClassName")로 클래스를 부여한 뒤,
> CSS 파일에서 `.myClassName { ... }` 형태로 스타일을 커스텀하는 것이 정석입니다.


5. CSS 박스 모델 (Box Model)
----------------------------------------------------------------------
모든 HTML 요소는 사각형의 상자(Box) 모양으로 둘러싸여 있습니다. 
안쪽부터 바깥쪽 순서는 다음과 같습니다.

[ Content (알맹이 내용) ]
   ↓
[ Padding (안쪽 여백: 내용과 테두리 사이의 거리) ]
   ↓
[ Border (테두리 선) ]
   ↓
[ Margin (바깥쪽 여백: 옆에 있는 다른 요소와의 거리) ]

* 마진 병합 현상 주의: 위아래 요소의 Margin은 서로 더해지지 않고, 더 큰 값으로 겹쳐집니다.


6. 레이아웃의 치트키: Flexbox (Flexible Box)
----------------------------------------------------------------------
정렬과 레이아웃을 잡을 때 과거의 float나 inline-block 방식을 대체하는 현대적인 기술입니다.
부모 상자에 `display: flex;`를 선언하면 자식 상자들이 똑똑하게 정렬됩니다.

- display: flex;                     <- 부모에게 선언하여 Flex 시작
- flex-direction: row | column;      <- 정렬 방향 (가로 정렬 | 세로 정렬)
- justify-content: center | space-between;  <- 메인 방향 정렬 (가운데 | 양끝 정렬)
- align-items: center;               <- 반대 방향 정렬 (세로축 기준 가운데 정렬)

* tip. ui5에선 Felxbox, VBox, HBox 등의 태그를 지원해주어 쉽게 구현이 가능합니다.


7. 유지보수를 위한 CSS 작성 가이드라인 (Best Practice)
----------------------------------------------------------------------
- 하나의 대형 CSS 파일에 모든 페이지 스타일을 때려 박지 마세요.
  (현재 프로젝트 전략처럼 EnterpriseStyle.css, MarketingStyle.css와 같이 
   페이지/모듈별로 파일을 분리하는 것이 유지보수에 압도적으로 유리합니다.)
- 클래스 이름만 보고도 어떤 영역인지 알 수 있게 명명하세요. (ex: .main-header, .sidebar-btn)
- 대형 홈페이지 작업 시, 브라우저마다 기본으로 적용된 여백이 미세하게 다르므로 
  제일 상단에 전체 선택자(*)를 이용해 margin과 padding을 0으로 초기화하고 시작하는 것이 좋습니다.

======================================================================