[Toy Projects] 'Color, me' project (9)

이번엔 무슨 웹인지 모르겠다는 의견이 있어서 보완하게 됐다.

 

설명을 좀 더 구체적으로 할 수 있도록 ‘도움말’ 기능을 추가 구현했다.

페이지를 들어가면 자동으로 도움말 모달이 표시되고, 도움말 버튼을 누르면 언제든지 표시될 수 있도록 했다.

우선 모달창 부분 html이다.

<div id="modal-back">
    <div id="modal">
        <div id="modal-top">
            <p id="modal-title">Color, me</p>
            <p id="modal-cancel" onclick="closeModal();">×</p>
        </div>
        <div id="modal-content">
            <p>Color, me는 나만의 색 조합을 저장할 수 있는 사이트입니다.</p>
            <p>색은 최소 1개부터 최대 6개까지 추가가 가능합니다.</p>
            <p>조합은 최대 30개까지 저장이 가능합니다.</p>
            <p>웹사이트의 특성상 저장된 조합은 다른 웹과의 공유가 불가능합니다.</p>
            <p>ex) 크롬에 저장된 조합은 익스플로러에서 볼 수 없습니다.</p>
        </div>
    </div>
</div>

여기서 id가 modal-back인 div의 역할은 모달창이 화면에 전시되었을 때, 모달창을 제외한 다른 영역은 흐림 처리를 주기 위함이다.

 

추가로 도움말 버튼은

<div id="title">
    <span>Color, me</span>
    <svg onclick="openModal();" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>

사이트 이름 옆에 물음표 버튼을 넣었다.

 

 

css까지 추가해서 꽤 그럴듯한(?) 모달창을 만들었다.

body{
    width: 100%;
    height: 100%;
}
#modal-back{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0000009e;
    z-index: 2;
    overflow: hidden;
}
#modal{
    position: absolute;
    width: 500px;
    min-height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
}

#modal-top{
    padding: 15px 20px;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    align-items: baseline;
}
#modal-cancel{
    font-size: 30px;
}
#modal-cancel:hover{
    cursor: pointer;
}

#modal-content{
    padding: 15px 20px;
}
#modal-content p{
    margin: 10px 0;
}

 

모달창

 

물론 전에 설정한 반응형에 맞도록 구현했다.

// @media (max-width : 689px) 내의 코드
body{
    text-align: center;
}
#modal{
    text-align: start;
    font-size: 12px;
    width: 80%;
}

 

js로는 도움말 버튼을 클릭하면 openModal(), 모달창 닫기 버튼을 클릭하면 closeModal() 함수가 호출될 수 있도록 함수들을 구현했다.

// 모달창 닫기
function closeModal(){
    document.getElementById("modal-back").style.display = 'none';
}
// 모달창 열기
function openModal(){
    document.getElementById("modal-back").style.display = 'block';
}

 

이렇게 하면 사이트를 더 알기 쉽지 않을까라는 생각을 한다.

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)