프론트엔드 개발 요약

최근 몇 달 동안 프론트엔드 개발에 집중했지만 여전히 학습 곡線이峻峭합니다. 이 기회를 통해 얻은 지식과 시행착오를 나누고자 합니다. 이 기고문에서는 JavaScript, jQuery, AJAX 및 CSS와 관련된 핵심 주제를 탐구합니다.

우선, AJAX에 대해 알아보겠습니다. AJAX는 웹페이지를 다시 로드하지 않고도 서버와 데이터를 교환할 수 있는 기술입니다. 아래 예제에서는 사용자 입력을 기반으로 데이터를 전송하는 방법을 보여줍니다:

var requestData = "type=" + selectedType + "&category=" + currentCategory;
$.ajax({
    type: "POST",
    url: "/api/data",
    data: requestData,
    dataType: "json",
    beforeSend: function() {
        $("#content").html('![로딩 중](/img/loader.gif)');
    },
    success: function(response) {
        if (response && response.length > 0) {
            updateContent(response);
        } else {
            $("#content").text("해당 카테고리에 데이터가 없습니다.");
        }
    },
    complete: function() {
        setTimeout(function() {
            refreshLayout();
            setRequestStatus('complete');
        }, 300);
    }
});

다음은 CSS와 관련된 유용한 속성들입니다:

단일 행 표시:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

지정된 수의 행 표시:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

마우스 액션:

.link { color: #007bff; }
.link:hover { color: #0056b3; }

.list-group .link:hover { font-weight: bold; }

자식 선택자:

.item:first-child { border-top: 2px solid #eee; }
.item:nth-child(2) { border-left: 2px solid #eee; }
.item:last-child { margin-bottom: 0; }

이미지 정중앙 배치:

<style>
.container {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
</style>
<div class="container">
    ![센터 이미지](image.jpg)
</div>

JavaScript와 jQuery의 핵심 기능 중에서 유용한 예제들입니다:

페이지 로드 시 실행:

$(document).ready(function() {
    initApplication();
});

화면 크기 관련 속성:

$(window).resize(function() {
    adjustLayout();
});

스크롤 이벤트:

$(window).scroll(function() {
    const scrollPosition = $(window).scrollTop();
    if (scrollPosition >= 500) {
        $('#sticky-bar').addClass('fixed-top');
    } else {
        $('#sticky-bar').removeClass('fixed-top');
    }
});

이상의 내용을 통해 프론트엔드 개발의 기초적이고 중요한 주제들을 살펴보았습니다. 앞으로도 지속적으로 학습과 피드백을 통해 실력을 향상시킬 예정입니다.

태그: 프론트엔드-개발 AJAX 자바스크립트 jQuery CSS

6월 23일 17:14에 게시됨

괴물 클럽

프론트엔드 개발 요약

인기 태그