[jQuery] 아이콘 클릭 시 해당 아이콘 사라지고 div 노출 시키기 & fontawesome 사용.

음...

 

아이콘은 fontawesome에서 구했습니다. 음.. 누르면 사라지게하고 다른 요소가 나타나게하는 건 간단합니다.

 

 

# HTML

<div id="chatColumns" class="chat-columns">
        
        <!-- 채팅 icon -->
        <i id="chatWindow" class="fas fa-comments fa-5x chat-columns__icon"></i>

        <div id="chatDiv" class="chat-columns__div">
            <div id="chatCloseDiv" class="chat-columns__div__close-columns__div">
                <!-- 채팅 닫기 버튼 -->
                <i id="chatClose" class="fas fa-times fa-lg chat-columns__close-columns__div__icon"></i>
            </div>
            <div id="chattingBox" class="chat-columns__div__chatting-box">
                <div id="chattingDiv" class="chat-columns__div__chatting-box__div">
                    < !-- 채팅 li를 넣을 ul -- >
                    <ul id="chattingUl" class="chat-columns__div__chatting-box__div__ul">                
                    </ul>
                </div>
                <div id="chatContentDiv">
                    <!-- 채팅 input -->
                    <input id="chatContentInput" class="chat-columns__div__chat-content__input" type="text" name="chatting"/>     
                    <!-- 채팅 send -->
                    <button id="send" class="send-btn">send</button>
                </div>
           </div>
</div>

 

제가 짠 HTML 코드는 이렇습니다. 

 

JS 파일로 따로 다뤄서 jQuery로 진행했습니다.

 

# jQuery

 

const $chatDiv = $('#chatDiv');
const $chatWindow = $('#chatWindow');
const $chatClose = $('#chatClose');

$chatDiv.hide(); // 미리 사라지게 함.

$(document).ready(function(){
    $chatWindow.click(function(){
        $chatDiv.toggle(); // hide()상태이면 show(). show() 상태이면 hide().
        $chatWindow.hide();
    });

    // x 창 클릭시
    $chatClose.click(function(){
        $chatDiv.hide();
        $chatWindow.show();  // toggle() 사용하지 않고 진행함. 예시.
    });
});

 

이렇게 하면 나타나고 사라집니다. css 부분은 chatting의 div 영역에 width, height를 지정하고 색상을 입히면 명백히 보입니다.

 

---

 

 

그리고 마지막으로 <i> 태그 부분에서 쓴 fontawesome에 대해서 다루겠습니다.

 

1. html 파일 하단에 아래 코드를 복붙합니다.

 
    <script src="https://kit.fontawesome.com/f1d6ea217b.js" crossorigin="anonymous"></script>

 

2. fontAwesome 사이트에서 원하는 icon을 검색합니다. (ex) glass, menu, music, play.. 등등)

 

 

3. 폴더다운 또는 복붙 선택하여 진행합니다. 저는 코드를 복붙 해서 씁니다. 그런 편이 용량도 차지 안 하고 적용이 편하기 때문입니다.

 

노란색 형광펜으로 그은 부분이 복사할 수 있는 영역이다.

 

 

4. Html 파일에 붙여 넣기 합니다. 그럼 끝!

 

 

* 참고로 class에 fa-sm, fa-lg, fa-2x, fa-3x 식으로 추가해서 크기 지정이 가능합니다. 그리고 css로 아이콘 색상 변경도 가능합니다.