MOFA 퍼블리싱

2024-10-22 : html > Type_A_Sub.html

2024-10-23

1. MOFADB_메뉴구성도.xlsx 기준에 맞추어 화면아이디를 파일명으로 대체
2. CSS는 관리를 위해서 컴포넌트, Nesting화 하였음. (폐쇄망내 브라우저에서 문제가 생기면 Nesting 제거할것임)
3. 이미지는 uri로 전환하여 변수 처리 재사용함
4. 폰트 로컬 변경 CSS > pretendard-Regular.woff 파일 global.css에 선언함 폰트파일과 global.css를 개발중인 소스 경로에 업데이트 해야함.
5. 기본적으로 css에서 변수 활용하여 개발중 css를 건드리지 않고 프론트엔드에서 기본 간격은 자체적으로 할 수 있게 하였습니다. 예) 엘리멘트 태그의 style에서 "--width:320px", "--gap:17px" 등등이 이에 해당합니다.

<div row style="--gap:17px">
    <label class="button switch">
        <input type="checkbox" checked>
        <div class="switch-label">
            <span>통합 검색</span>
            <span>지능형 검색</span>
        </div>
    </label>
    <form class="header-search" style="--width:320px">
        <input type="search" placeholder="검색어를 입력하세요." />
        <button type="submit"></button>
    </form>
</div>

6. div attribute를 추가하여 row, col을 쓸 수 있습니다. 이는 "flex-direction: row", "flex-direction: column"에 해당합니다.

 <div class="user-info" row middle style="--gap:16px">
    <div col style="--gap:2px">
        <p>홍길동</p>
        <span>외교정보기획국</span>
    </div>
    <div class="logout"></div>
</div>

2024-10-25

1. 사용자 > 정보검색 > 지능형검색 > F_0036.html
2. 사용자 > 정보조회 > modal > F_0018.html
3. 관리자 > 권한관리 > 외교정보기획국 > 목록 > A_0004.html