2024-10-22 10:11:32 +00:00
|
|
|
MOFA
|
2024-10-22 10:13:12 +00:00
|
|
|
퍼블리싱
|
|
|
|
|
|
2024-10-27 15:17:31 +00:00
|
|
|
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" 등등이 이에 해당합니다.
|
|
|
|
|
```html
|
|
|
|
|
<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"에 해당합니다.
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<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
|
