🎁 유용한 Prefix, Subfix, Suffix
공통으로 사용되는 영역
| 분류 | Naming | 부가설명 |
|---|---|---|
| 첫 페이지 | index | 홈페이지 첫 페이지 명칭 |
| 전체 영역 | wrap | 페이지를 감싸는 전체영역 |
| 머리글 | header | 머리글 영역 |
| 본문 | content | 본문 영역 |
| 바닥글 | footer | 바닥글 영역 |
분류별 prefix
| 분류 | prefix | 부가설명 |
|---|---|---|
| 타이틀 | title, tlt | 일반적인 타이틀 |
| 영역 | section, sec | 제목 태그(Heading Tag)를 지닌 영역 구분(선택적 사용, 중첩사용 지양) |
| wrap | 일반 영역의 묶음(선택적 사용, 중첩사용 지양) | |
| inner, inn | 부모 wrapper가 존재하며 자식 묶음이 단독으로 필요한 경우 | |
| 내비게이션 | gnb | 서비스 전체 내비게이션 Global Navigation Bar |
| lnb | 지역 내비게이션(gnb 영역) Local Navigation Bar | |
| snb | 사이드 내비게이션 Side Navigation Bar | |
| 탭 | tab | |
| 테이블 | table, tbl | |
| 목록 | list | 일반 목록(ul,ol,리스트 형식의 dl) |
| item | 목록의 하나하나(li,dd 등) | |
| 폼 | tf | textfield(input 타입 text/textarea) |
| inp | input타입 radio,checkbox,file 등 | |
| opt | selectbox | |
| label,lab | ||
| fld | fieldset | |
| 버튼 | btn | |
| 박스 | box | |
| 아이콘 | ico | |
| 선 | line방향 | ex)lineUp,lineDashDown,lineDotLeft |
| 배경 | bg | |
| 썸네일 | thumb | |
| 페이징 | paging | |
| 배너 | bnr,banner | |
| 텍스트 | txt | 일반 텍스트 |
| num | ||
| copyright,copy | ||
| time | 날짜 및 시간 | |
| 강조 | emph | |
| 링크 | link | 일반링크 |
| linkMore | 더 보기 링크 | |
| 순서 | fst,mid,lst | first,middle,last |
| 팝업 | popup | |
| 레이어 | layer | |
| 광고 | ad | |
| 스페셜 | spe | 검색 스페셜 용도 |
| 위젯 | widget소재명 | |
| 상세내용 | desc | description |
| 댓글 | cmt | comment |
분류별 suffix
| 분류 | suffix | 부가설명 |
|---|---|---|
| 상태변화 | on,off,over,hit,focus | |
| 위치 | top,mid,bot,left,right | |
| 순서 | fst,lst | |
| 이전/다음 | prev,next | |
| 대체 텍스트 | ir_pm | image 대체텍스트 용도(text-indent) |
| ir_ws | image 대체텍스트 용도(z-index) | |
| screen_out | 숨김 텍스트 용도(absolute) | |
| screen_hide | 숨김 텍스트 용도(visibility) |
💡 나의 과제 : 현재 작업하고 있는 html class, id이름 수정하기
📚 참고: kingji8life.tistory.com
노 포기 킾고잉