CSS 기본 개념

• HTML/CSS 에서 명명법, 스타일링 등 코드작성시 해당 요소의 정확한 목적부터 확인 후 진행한다.
• 사용 목적에 따라 크게 3가지로 (Styling, Positioning, Event binding) 구분할 수 있다.
  1. 스타일링: 해당 요소의 폰트, 배경, 그림자 등 디자인 요소
  2. 포지셔닝: 페이지 전체 또는 특정 섹션 등 레이아웃, 포지션, 여백 등 위치 요소
  3. 이벤트용: Javascript에서 사용을 목적으로 하는 selector
• CSS 정의시 스타일링과 포지셔닝에 대한 구분을 잘 해야만 코드의 재사용이 가능하다.

CSS 명명법 (BEM)

• CSS 명명법으로 BEM 을 도입한다.
• BEM이란 [Block] [Element] [Modifier] 의 머릿글로 CSS를 조금 더 구조적으로 작성할 수 있다.

Indent

• HTML, CSS 는 Space 2칸으로 한다. (법으로 정해져있음)
  Google HTML Google CSS W3C HTML

이벤트 처리용 접두어 "js-"

• 스크립트로 특정 기능 구현을 목적으로 id 또는 class 이름을 부여하는 경우 반드시 접두어 "js-" 사용
• 사용 목적에 따라 CSS 용과 JAVASCRIPT 용을 구분

변수명과 함수명

• 변수명은 snake_case, 함수명은 camelCase 사용

var 말고 let

• 변수선언시 무조건 let 사용.
  일반적인 상황(휘발성/재사용)일때는 무조건 let 사용
  var 사용시 자동으로 메모리해제되지 않음
• 그 외 적절한 자료형 선언

.heading

• 제목 특성상 line-height 는 100% 로 고정된다.
• header 와 heading 을 목적에 맞춰 정확하게 사용한다.
  header : 헤더영역
  heading : 머릿글(제목)
• 사용방법은 다음과 같다.
  1. custom-data: 마크업과 관계없이 정의된 level 기준
  2. Markup only: 별도 level 정의없이 Markup 기준
• 사용시 level 지정(CSS 적용) 우선순위는 다음과 같다.
  1. Custom-data
  2. Markup
• custom-data가 1순위이고, custom-data가 없는 경우에만 markup을 참조한다.

• Markup 기준 + custom-data 생략 - 마크업 기준으로 출력
  
  [ 32px / --gray900 ]

  h1 머릿글 입니다.

  
  [ 24px / --gray900 ]

  h2 머릿글 입니다.

  
  [ 20px / --gray900 ]

  h3 머릿글 입니다.

  
  [ 16px / --gray900 ]

  h4 머릿글 입니다.

  
  [ 14px / --gray900 ]

  h5 머릿글 입니다.

  
  [ 12px / --gray900 ]

  h6 머릿글 입니다.

  
  
  
• Markup 고정 + custom-data 변경 - custom-data 기준으로 출력
  
  [ 32px / --gray900 ]

  h1 level_1 머릿글 입니다.

  
  [ 24px / --gray900 ]

  h1 level_2 머릿글 입니다.

  
  [ 20px / --gray900 ]

  h1 level_3 머릿글 입니다.

  
  [ 16px / --gray900 ]

  h1 level_4 머릿글 입니다.

  
  [ 14px / --gray900 ]

  h1 level_5 머릿글 입니다.

  
  [ 12px / --gray900 ]

  h1 level_6 머릿글 입니다.

  
  
  
• Markup 변경 + custom-data 고정 - custom-data 기준으로 출력
  
  [ 32px/gray900 ]

  h1 level_1 머릿글 입니다.

  
  [ 32px/gray900 ]

  h2 level_1 머릿글 입니다.

  
  [ 32px/gray900 ]

  h3 level_1 머릿글 입니다.

  
  [ 32px/gray900 ]

  h4 level_1 머릿글 입니다.

  
  [ 32px/gray900 ]

  h5 level_1 머릿글 입니다.

  
  [ 32px/gray900 ]

  h6 level_1 머릿글 입니다.

  
  
  

.text

• data-text 속성 추가 지정 [색상] + [크기] + [속성]
• 색상
  null | primary | secondary | dark | gray | yellow | red | green | blue | purple
• 크기 - 10, 12, 14, 16, 20
  xsmall(10px) | small(12px) | medium(14px) | large(16px) | xlarge(20px)
• 속성 - Fixed width
  [ mono (Fixed width ilIL) ]
• 속성 - weight
  [ thin(200) | bold(700) ]
• 속성 - style
  [ i (italic) ]
• 속성 - decoration
  [ u (underline) | s (strike) ]
• 속성 - transform
  [
    ucfirst _ capitalize > 첫글자를 대문자로 변환
    upper → 대문자로 변환
    lower → 소문자로 변환
  ]
• 속성 - white-space
  [ nowrap ]
• 속성 - width 지정시, 지정한 width 를 넘어가는 문자열은 ... 처리를 합니다.
  [ ellipsis ]
• 프리셋 - 자주 사용하는 조합
  accent(large(16px)+dark) | normal(medium(14px)) | desc(small(12px)+gray)

.icon

• <i> 태그 사용 권장
• 태그 내부에 약속된 문자열 입력 (목록 위 링크 참고)
• normal: Material Icons Rounded
• outline: Material Icons Outlined
• symbol: Material Symbols Rounded
• fill: Material Symbols Rounded + fill

.badge

• data-badge 속성 추가 지정
• [ primary | dark | gray | red | yellow | green | blue | purple ] + [ rounded ] + [ soft ] + [ large ]

.grid

• 관리자 레이아웃에 맞춰 구성된 속성입니다.
• grid 를 활용해 컬럼만 조절합니다.
• (한번에 columns + rows 까지 제어하면 경우의 수가 많아지고 사용법이 너무복잡해짐)
• rows로 구분할땐 grid__column를 사용하면 됩니다.
• 현재(2022/07/06) 레이아웃의 구성요소는 아래와 같습니다.
• NAV  - navigator: 235px
  SIDE - aside: 405px
  MAIN - content: flexible

• No	속성	비고
  -.	main	grid 사용할 필요 없음
  1.	columns_nav-main	nav + main
  2.	columns_side-main	side + main
  3.	columns_nav-main-side	nav + main + side
  4.	columns_nav-side-main	nav + side + main

.grid__column

• grid 에서 설정한 column의 rows를 감싸게 됩니다.
• flex - column 으로 구성되어 있고 grid 와 동일한 gap 이 적용됩니다.

.section

• 현재 블럭의 [ 흰색배경 + 라운드박스 ] 를 부여하는 속성입니다.
• 일반적으로 컨텐츠 블럭에 적용하며, section 태그에 .section 속성을 지정합니다.

.section[data-section="layout"]

• .section 객체에 data-section="layout" 속성을 추가하고 아래 DOM구조를 사용합니다.
• section 을 활용한 DOM구조입니다.

.dl

• data-dl 속성 추가 지정
• [ column2 | column3 ] + [ horiz ]

.table

• thead 요소가 없을 경우
• .table > caption 태그는 타이틀로 출력
• .table data-table 속성 추가 지정 [ sub | detail | small ] + [ text-align_center | text-align_left ] + [ number_first ]
• .table-scroll > .table data-table 속성 추가 지정 [ fixed_first | fixed_last ] + [ horiz ]

.table

• tbody 내부에 공백을 포함한 어떠한 자식 요소도 가지지 않는다면 "목록이 없습니다." 출력

• Table 사용시 thead, tfoot, tbody 순서대로 주의하여 작성합니다.
  .table > thead > tr > th[scope="row"] → 세로열의 머릿말이란 뜻입니다.
  .table > tbody > tr > th[scope="col"] → 가로행의 머릿말이란 뜻입니다.
  
• _price, _number
  td/th 에 class로 추가하게되면 테이블 값이 금액 또는 숫자인경우 추가합니다.
  추가시 우측정렬과 숫자만 고정폭으로 적용됩니다.
• th[data-suffix], td[data-suffix]
  해당 셀의 내용 뒤로 입력된 값을 작고 연한 텍스트로 추가합니다.

.list

• (3가지 모두 같은 속성)[ .list__aside / .list__buttons / .list__date ] 설정시 해당 리스트 우측으로 배치시킨다.

.tree

• (3가지 모두 같은 속성)[ .list__aside / .list__buttons / .list__date ] 설정시 해당 리스트 우측으로 배치시킨다.

.accordion

• (3가지 모두 같은 속성)[ .list__aside / .list__buttons / .list__date ] 설정시 해당 리스트 우측으로 배치시킨다.

modal.open()

• 미리 작성해둔 모달 태그의 visibility 속성 상태만 변경하는 방식
• 인자값 모달 태그 ID 전달

modal.append()

• 출력/닫기 때 마다 요소를 새로 생성/삭제하는 방식 (일부 인자 값을 통해 제어 가능)
• 인자값 다음 사용
• • title - 제목
  • content - 본문
  • html - 본문 HTML 태그 사용 여부
  • remove - 콜백 실행 후 모달 닫기 여부
  • header_close - 헤더 닫기 버튼 여부
  • footer_close - 푸터 닫기 버튼 여부
  • closeCallback - 닫기 버튼 콜백 함수
  • footer_confirm - 확인 버튼 여부
  • confirmCallback - 확인 버튼 콜백 함수

.input

• data-input 속성 추가 지정
• [ small | medium | large ] + [ success | warning | error ]

.input-dsc

• input 다음 태그에 사용하며 기본 숨김(투명)
• 앞의 input 태그 data-input 속성이 success, warning, error 일 경우 노출

.checkbox

• 체크박스

.toggle

• 토글

.radio

• 라디오

• 임시로 만들어봤으며, 필요하다면 CSS만 가져가 사용하는걸 추천합니다.
• 단일 요소로만 제작되었습니다.
  아래의 이미지/아이콘/인터렉티브한 효과들이 필요한 경우, 별도의 HTML 을 구성하는게 아니라 해당 class 만 추가해서 사용하기 위함입니다.