본문 바로가기
플랫폼엘 정리or해석

css,JavaScript관련

by shulk 2024. 7. 18.

1. css에서 해당 태그 위치 위로 이동시키기

사진과 같이 원래는 셀렉태그 위에 줄선이 KR/EN에 가려져서 문제 였는데 이 셀렉태그를 감싼 div에서 

  margin-top이라는거를 사용해서 위치를 이동시킬 수 있었다!

  <div class="header-bar" style="position: relative;height: 50px; line-height: 60px; margin-top: 2px">
            <select id="sortSelect" class="sort-select" style="position: absolute; top: 10px; right: 20px; width: 100px; height: 30px;">
                <option value="01" <c:if test="${sortValue =='01' }">selected</c:if>>Newest</option>
                <option value="02" <c:if test="${sortValue =='02' }">selected</c:if>>Lowest Price</option>
                <option value="03" <c:if test="${sortValue =='03' }">selected</c:if>>Highest Price</option>
                <option value="04" <c:if test="${sortValue =='04' }">selected</c:if>>Name Order</option>
            </select>
  </div>

 

 

2. slect 태그와 비슷한 검색기능까지 있는 datalist태그 사용

먼저 html코드는 이거고

<input type="hidden" id="hidden_admin_idx" value="${vo.admin_idx}">
<div id="rentalTeamSelection" style="display: <c:if test="${vo.admin_role_type == '2'}">block</c:if>;">
	<div class='section-title font-bold'><strong class='font-bold'><span class='fa fa-dot-circle-o'></span>대관팀 선택</strong></div>
	<input list="rentalTeams" id="dropdown_search_type1" name="admin_idx" class="btn-xs btn-primary width-20per" placeholder="검색/선택">
	<datalist id="rentalTeams">
		<option data-value="">선택</option>
							
	</datalist>
</div>

밑에 등록 화면보면 유저의 인덱스까지 보여지게 된다. 이유는 datalist태그에서는 value값이 보여지는듯하다

datalist.append('<option value="' + team.idx + '">'  + team.email + '(' + team.name + ')</option>');

 

그래서 찾아보니 이렇게 data-value는 서버에 전달할값이고,value는 화면에 보여질 값을 말하는거다.

const showValue = team.email + '(' + team.name + ')';
datalist.append("<option data-value=" + team.idx + " value=" + showValue + "></option>");

근데 이제 유저가 선택한 option태그 값은 html코드보면 dropdown_search_type1에 대입되는데 이게 data-value값이 아닌 value의 값이 대입된다.

이제 서버에 보낼때는 ajax인가를 이용해서 보내는데  밑에 첫번째줄 코드보면 html에 대입된 dropdown_search_type1의 값을 가져오니 admin_idx_search_value에는 이메일(이름) 형식 데이터 담긴다(위에 data-value가 아닌 value값이 담긴다했으니)

그러고 두번째줄 코드보면 admin_idx_search_value에 해당하는 값에서 attr('data-value')를 통해 인덱스 값을 가져오는거다.

먼가 딕셔너리 느낌처럼 한다.

const admin_idx_search_value = $("#dropdown_search_type1").val();
program.admin_idx = $('#rentalTeams [value="' + admin_idx_search_value + '"]').attr('data-value');

 

이제 수정의 경우 코드를 보면 val()안에 selectedValue가 있어서 화면에 수정중인 유저가 선택되있도록 하고

서버에 값보내는건 위에 등록의 바로 위에 코드적용이라 이메일(이름)에 맞는 data-value값 선택되고 서버에 보내는 방식이다.

 

'input[list="rentalTeams"]'의 의미 GPT 답변 

"input[list="rentalTeams"]는 특정 datalist와 연결된 input 요소를 선택하기 위한 jQuery 선택자입니다. 이 선택자는 list 속성이 rentalTeams로 설정된 input 요소를 찾습니다."

const selectedTeam = data.find(team => team.idx === parseInt(adminIdx));
if (selectedTeam) {
    const selectedValue = selectedTeam.email + '(' + selectedTeam.name + ')';
    $('input[list="rentalTeams"]').val(selectedValue);
}

 

3. window 객체의 다양한 이벤트에 따라 함수 실행시키기

일단 문제는 옛날 사이트라 그런지 해당 사이트의 크기를 줄이거나 변경시켜도 동적으로 그 화면 크기에 맞춰서 변하지 않고 그냥 잘려 보인다. 

근데 그 사이트에 챗봇 아이콘을 오른쪽 밑에 배치시키고 위아래 스크롤 할때는 고정시키면서 따라오게 하고,화면을 줄일시에는 안따라오고 화면으로 가리게 할거다.

<div class="fixed-message-icon" id="chatIcon">
    <img alt="Message Icon" loading="lazy" width="50" height="50" decoding="async" src="${pageContext.request.contextPath}/resources/img/chatbot_icon.png" style="color: transparent;" onclick="openChat()">
</div>

<script>
    function openChat() {
        // 메시지 창을 여는 로직
        alert("Chat icon clicked!");
    }

    function setChatIconPosition() {
        const chatIcon = document.getElementById('chatIcon');
        const headerContainer = document.querySelector('.header .container');
        const wrapperRect = headerContainer.getBoundingClientRect();

        chatIcon.style.position = 'fixed';
        chatIcon.style.right = (window.innerWidth - wrapperRect.right ) + 'px';
        chatIcon.style.display = 'block'; // 위치 계산 후 나타나게 설정
    }

    // 페이지 로드 시 위치 설정
    window.addEventListener('load', setChatIconPosition);
    // 스크롤 및 리사이즈 시 위치 재설정
    window.addEventListener('resize', setChatIconPosition);
    window.addEventListener('scroll', setChatIconPosition);
</script>

 

 

이렇게 window.addEventListener()메소드를 이용하고 밑에는 GPT가 이 메소드에 대한 답변이다

  • window.addEventListener('load', setChatIconPosition);
    • 이벤트: load
    • 설명: 이 이벤트는 브라우저가 페이지의 모든 리소스(이미지, 스타일시트, 스크립트 등)를 완전히 로드한 후에 발생합니다.
    • 의미: 페이지가 완전히 로드된 후 setChatIconPosition 함수를 실행하여 chatIcon의 위치를 설정합니다.
  • window.addEventListener('resize', setChatIconPosition);
    • 이벤트: resize
    • 설명: 이 이벤트는 브라우저 창의 크기가 변경될 때마다 발생합니다.
    • 의미: 사용자가 브라우저 창의 크기를 변경할 때마다 setChatIconPosition 함수를 실행하여 chatIcon의 위치를 재조정합니다. 이는 브라우저 크기 변화에 따라 아이콘의 위치가 올바르게 유지되도록 하기 위함입니다.
  • window.addEventListener('scroll', setChatIconPosition);
    • 이벤트: scroll
    • 설명: 이 이벤트는 사용자가 페이지를 스크롤할 때마다 발생합니다.
    • 의미: 사용자가 페이지를 스크롤할 때마다 setChatIconPosition 함수를 실행하여 chatIcon의 위치를 재조정합니다. 이는 스크롤 위치에 따라 아이콘의 위치가 올바르게 유지되도록 하기 위함입니다.