<aside> 💡

포트폴리오 header 부분 잡기(9.23)

</aside>

HTML MarkUp및 CSS 퍼블리싱 기초

  1. 문자 인코딩: @charset "utf-8"; 선언을 통해 다양한 언어의 문자 표현을 보장하며, 반응형 웹 디자인에서 한글 폰트 렌더링 안정성을 확보한다. 이는 텍스트 표시 오류를 예방하고, 다국어 지원을 위한 필수 요소이다.
  2. 웹 폰트 최적화: Google Fonts API를 활용하여 필요한 폰트만 선택적으로 불러와 로컬 파일 사용을 최소화합니다. 이를 통해 초기 로딩 시간을 단축하고, 웹페이지 성능을 최적화한다.
  3. 사용 폰트: Public Sans, Noto Sans KR, Cormorant Infant와 같은 웹 폰트를 적절히 결합하여 가독성과 디자인 감각을 살린다. 이러한 폰트는 각각 현대적이고, 세련된 외관을 제공하며, 다양한 텍스트 콘텐츠에 적합하다.

Splitting.js를 이용한 고급 텍스트 애니메이션

  1. 기능: Splitting.js는 텍스트를 개별 문자, 단어 또는 줄로 분리하여 DOM을 조작할 수 있게 한다. 이를 통해 각 요소에 독립적인 스타일이나 애니메이션을 적용할 수 있다. 텍스트 애니메이션이나 인터랙티브한 웹 경험을 제공하는 데 유용하다.
  2. 구현 예시:
<span class="char" data-char="m" --char-index="0">m</span>
<span class="char" data-char="i" --char-index="1">i</span>
<span class="char" data-char="n" --char-index="2">n</span>

CSS 고급 기법

  1. attr() 함수: CSS에서 HTML 속성 값을 동적으로 참조할 수 있는 함수로, 요소의 data-* 속성이나 다른 속성 값을 스타일에서 활용할 수 있다. 예를 들어, 요소의 콘텐츠나 스타일을 HTML의 속성 값에 따라 동적으로 변경할 수 있다.
  2. data- 속성*: 사용자 정의 데이터를 DOM 요소에 저장할 수 있는 HTML5 속성이다. data-* 속성은 JavaScript나 CSS에서 쉽게 접근 가능하며, 요소별로 고유한 데이터를 부여할 수 있어 다양한 동적 스타일링 및 상호작용을 구현할 수 있다.
  3. 활용: attr() 함수와 data-* 속성을 결합하여, CSS에서 요소의 동적 데이터에 접근하고 이를 스타일링할 수 있다. 예를 들어, Splitting.js와 같은 라이브러리로 분리된 문자 각각에 대해 data-* 속성을 이용해 고유한 애니메이션 효과를 적용할 수 있다.

<aside> 💡

이벤트 처리(9.27)

</aside>

jQuery와 js이벤트 처리

// 스크롤 이벤트 처리
$(function() {
    let prevScrollTop = 0;
    const header = $('header');

    $(window).on('scroll', function() {
        const nowScrollTop = $(this).scrollTop();

        // 스크롤 방향에 따라 헤더 클래스 토글
        if (nowScrollTop > prevScrollTop) {
            header.addClass('active');
        } else {
            header.removeClass('active');
        }

        prevScrollTop = nowScrollTop;
    });
});

학습 내용: