div 태그 내 이미지 적용하기 (동적 CSS 생성)

MAD에 DrawFlow라는 OpenSource Library를 이용하여 구현한 아키텍처 그리기 기능이 있습니다

이 화면에서는 AWS에서 제공하는 서비스들의 아이콘을 이용하여 클라우드 내에서 서비스들이 어떻게 구성되는지를

표현할 수 있습니다

 

AWS 제공 서비스 아이콘을 통해 아키텍처를 구성할 수 있습니다.

 

이 화면에서 각 서비스들의 아이콘을 화면에 배치할 수 있는데 하나의 문제가 발생했었습니다

화면에 배치하는 요소들을 Node로 표현하는데 Node 위에 이미지 태그가 쌓여있는 형태로 인해 아이콘을 별도로 확대를 해야 위치를 이동할 수 있는 치명적인 문제였습니다.

 

 

 

우선 문제 해결 전의 소스를 확인하겠습니다.

 

• 수정 전 코드

/* 상위 코드 생략 */
if (folder[0] == 'category_icons') {
    element = `
            <div>
                <div style="vertical-align: middle; display: flex;">
                    <img src="../../../../mad/img/aws_icon/{서비스 아이콘 위치}" id="{아이디}" style="width: 60%; -webkit-user-drag: none; margin: auto"/>
                </div>
            </div>
    `;
}

 

노드를 canvas 위에 올려둘 때 스크립트 메서드인 addNode()를 통해 추가하게 되는데 이 때 마우스 드래그를 통해 노드를 움직이게 할 수 있도록 구조화 하여 빈 노드를 생성하게 되고, 위 코드에 입력된 내용을 append하여 화면에 표현하도록 Library에서 제공해 주고 있는 것을 확인하였습니다.

 

해당 라이브러리 스크립트에서 mouse over를 감지하고 드래그 이벤트를 처리할 수 있도록 객체화 ID로 잡은 클래스가drawflow_content_node인데 해당 div 태그 위에 img 또는 다른 태그를 놓을 경우 mouse over 이벤트는 잡히지만 이미지 자체가 드래그되어 비 정상적으로 노드가 생성되어버리는 버그가 나타났습니다
(img태그에 draggable 속성을 false로 하니 드래그 자체가 안되는 버그도...)

 

AWS 서비스 아이콘은 SVG 이미지로 구성되어있었고, img 태그 이외에 표현할 수 있는 방법을 찾던 중 css의 background-img 속성으로 표현할 수 있는 방안을 찾았고, 다수의 이미지를 하나의 코드로 표현할 수 있는 동적으로 스타일을 적용하는 방법을 찾아야 했습니다.

 

여러 자료들을 토대로 node를 생성하기 전 style 태그를 생성, 생성된 node에서 해당 클래스를 참조하여 이미지를 보여줄 수 있도록 처리하는 방법을 찾았고, 적용하니 원하는 결과가 나올 수 있었습니다.

 

• 적용 코드

/* 상위 코드 생략 */
var sheet = document.createElement('style'); // 스타일 요소를 생성
var sheet_str = ""; // 스타일 스트링을 append할 builder용 변수 생성
var body = document.body || document.getElementsByTagName('body')[0]; // 태그명이 body인 요소를 검색
sheet_str = '.{클래스명} {~~~ background-image: url("./image/이미지파일 위치")}'
sheet.type = 'text/css'; // 스타일 요소의 타입을 string/css로 명시
sheet.appendChild(document.createTextNode(sheet_str)); // 텍스트로 작성한 스타일 정보를 통해 노드 생성 후 자식요소로 추가
body.appendChild(sheet); // 생성한 스타일 요소를 body 태그에 자식노드로 추가

 

• 개발자 모드를 통해 적용된 코드 확인

화면에 노드를 배치하면 body내 style 태그가 동적으로 적용되는 것을 확인할 수 있습니다.

 

• 적용 후 HTML

<!-- 노드 생성 시 아래와 같은 형태로 미리 구조화되어 노드가 추가되어지는 것을 확인 -->
<div id="node-1" class="drawflow-node Amazon_Athena" style="top: 152px; left: 623px;">
	<div class="inputs">
		<div class="input input_1">
		</div>
	</div>
	<div class="drawflow_content_node">
		<div class="amazon-athena" style="vertical-align: middle; display: flex; position: relative"></div>
        <!-- div태그에 적용되어있는 amazon-athena 클래스가 위 이미지에 보이는 클래스를 참조하여 이미지를 표현 -->
	</div>
	<div class="outputs">
		<div class="output output_1">
		</div>
	</div>
</div>

 

개발자모드로 Elements탭을 통해 확인하면 addNode() 메서드 실행 시 body 태그 내에 style 태그가 동적으로 생성되고, 화면에서 node를 생성할 때 해당 클래스를 통해 이미지가 정상적으로 로드됨을 확인하고, drawflow_content_node 클래스를 통해 적용된 드래그 이벤트도 정상적으로 동작되는 것을 확인할 수 있었습니다

 

 

html 요소를 적용할 때 stack구조로 쌓이며 화면에 표현되는 것은 알고 있었지만 이로인해 스크립트에서 정의한 이벤트 동작이 블로킹 되는 것을 알 수 있었고, 해당 이슈를 처리하며 미리 정의된 CSS를 사용하는 것이 아닌 동적으로 생성한 CSS를 통하여 화면을 구성하는 것도 확인할 수 있었습니다.

 

이상으로 동적 CSS를 통한 div내 background-image 적용방법 소개를 마치겠습니다