• 함수를 변수에 담아 필요할 때만 사용 ex) 콜백, 이벤트 핸들러
• 다른 함수의 인수로 함수 전달, 동적으로 함수가 결정될때 ex) map, filter

함수표현문

• 전체에 반복적으로 쓰는 유틸, 초기화 함수
• 읽는 순서와 무관하게 호출되어야 할 때

일반적으로 return을 명시하지 않더라도 모든 함수는 return 값으로 undefined를 반환한다. 그럼 그 이외 어떤 경우 return을 명시해 활용할 수 있을까?

1. 값을 반환하는 경우

function sum(a, b) {
  return a + b; // 결과값 반환
}
let result = sum(3, 5);

2. 함수의 종료

function divide(a, b) {
  if (b === 0) {
    return; // 0으로 나눌 때 함수 즉시 종료
  }
  return a / b;
}

하지만, 평소에 해놓은 공부가 면접 뿐만 아니라 한 사람의 기초 체력처럼 기초 지식이 되기 때문에 오늘부터 꾸준하게 해보려고 한다.

개인 공부는 새로 알게 된 부분만 적고, 실무에 적용하거나 개인 프로젝트에 응용한 기술 위주로 블로그를 채워갈 생각이다.

러닝처럼 길게 보고 빠르게 달리기보다 천천히 꾸준하게 달리자🙂

우선 위에 영상과 같이 만들기 위해서는

HTML

HTML에서 배경 부모를 만들고 안에 배경을 몰아 넣어주었다.

CSS

.bg {
    position: absolute; // positon:absolute로 한 곳에 모아두기
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0% 0 0% 0); // 초기 clip-path 설정

    @for $i from 1 through 14 {
        &:nth-child(#{$i}) {
            z-index: -#{$i}; // 초기 z-index 역순으로 하여 첫 이미지가 위로
            @include bg('파일명');
        }
    }
}

• positon:absolute: 배경 한 곳에 모아두기
• clip-path: inset(0): 첫 이미지 보이게 설정
• z-index: - 숫자로 역순으로 배치하여 첫 이미지가 위로 올라오게 설정

JS

우선 전체적으로 mouseenter 이벤트가 필요했고, 각 item에 이벤트가 필요하여 반복문을 돌려주었다.

이벤트

$bgItem.each((idx, item) => {
    $(item).on('mouseenter', function() {
        ``` 생략 ```
    });
});

Up & Down 감지

애니메이션을 낮은 순서에서 높은 순서의 아이템으로 이동 시, 높은 순서에서 낮은 순서로 이동 시를 다르게 표현하기 위해서 인덱스의 높낮이를 감지할 필요가 있었다.

그래서 변수를 설정하여 이전 인덱스와 현재 인덱스를 비교하고 저장하는 방법이 필요했다.

let activeIdx = 0;  // 현재 활성화된 index를 저장하는 변수

// 이벤트 콜백 함수 내
const dir = idx > activeIdx ? 'up' : 'down'; // 현재 idx가 기존 activeIdx보다 크면 'up', 아니면 'down'

activeIdx = idx; // 현재 활성화된 인덱스를 갱신

애니메이션

애니메이션은 clip-path로 이미지를 크롭시키는 방향으로 진행하였다.

const except = `.sc-work__bg-area .bg:not(:nth-child(${idx + 1}))`;
const target = `.sc-work__bg-area .bg:nth-child(${idx + 1})`;

현재 이벤트를 받는 대상과 아닌 대상을 구분할 필요가 있었고, GSAP은 CSS 선택자를 활용할 수 있기 때문에 :nth-child와 :not을 사용하여 구분지었다.

const bgAnimation = gsap.timeline({ overwrite: 'auto' })
.to(except, { 
    clipPath: () => dir === 'up' ? 'inset(100% 0 0% 0)' : 'inset(0% 0 100% 0)', 
    onComplete: () => {
        gsap.set(target, { zIndex: ++count })
    }
})
.fromTo(target, { 
    clipPath: () => dir === 'up' ? 'inset(0% 0 100% 0)' : 'inset(100% 0 0% 0)',  
}, {
    clipPath: 'inset(0% 0 0% 0)' 
}, '<');

clip-path(top right bottom left); 중 올라갈 때

• except : top: 0 -> 100%
• target : bottom: 100% -> 0% || top: 100% -> 0%

내려올 때는 반대로 설정하여 애니메이션을 완성했다.

그리고 이벤트가 자주 많이 일어날때 이전 애니메이션이 끝나기 전에 실행될 수 있으므로

overwrite: auto로 설정하여 이벤트 중복 방지 설정까지 해줬다.

최종 코드

$workItem.each((idx, item) => {
    let activeIdx = -1; // 처음에는 어떤 항목도 활성화되지 않음
    let isFirstHover = true; // 처음 hover인지 확인하는 변수

    $(item).on('mouseenter', function() {
        const dir = idx > activeIdx ? 'up' : 'down';
        const except = `.sc-work__bg-area .bg:not(:nth-child(${idx + 1}))`;
        const target = `.sc-work__bg-area .bg:nth-child(${idx + 1})`;

        if (isFirstHover) {
            // 처음 hover하는 경우 애니메이션 없이 바로 보이게 설정
            gsap.set(target, { clipPath: 'inset(0% 0 0% 0)', zIndex: ++count });
            isFirstHover = false; // 첫 hover 처리가 끝났음을 표시
        } else {
            // 기존 동작 (애니메이션 실행)
            gsap.timeline({ overwrite: 'auto' })
                .to(except, { 
                    clipPath: () => dir === 'up' ? 'inset(100% 0 0% 0)' : 'inset(0% 0 100% 0)', 
                    onComplete: () => {
                        gsap.set(target, { zIndex: ++count });
                    }
                })
                .fromTo(target, { 
                    clipPath: () => dir === 'up' ? 'inset(0% 0 100% 0)' : 'inset(100% 0 0% 0)',  
                }, {
                    clipPath: 'inset(0% 0 0% 0)' 
                }, '<');
        }

        activeIdx = idx;
    });
});

HTML

<!-- 네비게이션 영역 -->
<nav class="snb">
    <ol class="snb__list">
        <li class="snb__item snb__item--active">
            <a href="#" role="button" class="snb__link"><span class="snb__txt">2024</span></a>
        </li>
        <li class="snb__item">
            <a href="#" role="button" class="snb__link"><span class="snb__txt">2023</span></a>
        </li>
        <li class="snb__item">
            <a href="#" role="button" class="snb__link"><span class="snb__txt">2022</span></a>
        </li>
    </ol>
</nav>

<!-- 네비게이션 컨텐츠 영역 -->
<li id="year2024" class="sc-work__item">  <!-- 위치 찾기용 ID -->
    <a href="#" target="_blank" class="work-card">
        <div class="work-card__title-area">
            <strong class="work-card__title">lamiche</strong>
            <p class="work-card__desc">swiper를 사용하여 제작한 신규 홈페이지입니다.</p>
        </div>
    </a>
    <a href="#" class="sc-work__tag--review tag--review">code reivew</a>
</li>

... 생략 ...

HTML은 일반 네비게이션과 컨텐츠 영역처럼 잡고, 컨텐츠 리스트 중 특정 컨텐츠의 위치로 이동해야해서 구분하기 편하게 ID를 부여하였다.

스크립트

스크립트는 크게 스크롤 이벤트, 클릭 이벤트 두 가지가 필요하였다.

1. 변수

let flag = false; // 클릭하여 이동하는 동안 스크롤 이벤트 막기 위한 flag 변수 설정

const $workNavItem = $('.snb__item');
const $workItem = $('.sc-work__item[id]');

let workNavPadding = Math.abs($('.sc-work__right').offset().top - $('.sc-work__list').offset().top); 

// 타겟 offset top 값 배열로 저장
let workItemPosY = $workItem.map((idx, item) => {
    return ($(item).offset().top - workNavPadding).toFixed(0);
}).get();

2. 스크롤 이벤트

$(window).on('scroll', () => {
    if (flag) return; // 클릭 애니메이션 중 작동 X
    let wTop = $(window).scrollTop().toFixed(0);

    // 성능을 위해서 each문 대신 for문 사용 
    for (let i = 0; i < workItemPosY.length; i++) {
        if (wTop >= workItemPosY[i] - 1) { // 스크롤이 타겟 offset().top 보다 높으면
            $workNavItem.eq(i).addClass("snb__item--active").siblings().removeClass('snb__item--active');
        }
    }
})

스크롤 이벤트는 workItemPosY에 담긴 값보다 스크롤이 높을 시 클래스를 부여하였다. 오차가 있어서 toFixed()를 사용했고, 아직 - 1을 해야 해당 요소로 이동했을 때 네비게이션에 active가 맞게 작동하는데 이유는 더 고민해봐야겠다...

3. 클릭 이벤트

$workNavItem.on('click', function(e) {
    flag = true;
    e.preventDefault();

    let navIdx = $(this).index();

    if ($workItem.length) {
        $(this).addClass('snb__item--active').siblings().removeClass('snb__item--active');
        $('html, body').animate({ scrollTop: workItemPosY[navIdx] }, 300, function() {
            flag = false; // 애니메이션 종료 시 flag false로 변환
        });
    } else {
        flag = false;
    }
});

클릭하여 이동하는 애니메이션은 Jquery animate로 만들었다. 처음에 html, body를 선택자로 잡아야하는 이유가 궁금했는데, JS에선 window를 잡아서 사용하지만, Jquery 사용 시 html, body를 사용해야 스크롤 이동이 가능하다고 한다.

이때 HTML에서 하드코딩하지 않고 CSS로 목록의 갯수를 세어 붙여주는 기능을 발견했다!

counter-increment

순서를 붙이기 위해 몇 가지 단계를 거쳐야한다. 그 중 첫 번째는 증가할 목록에 이름 붙이기.

.counter-item {
  counter-increment: section; /* 'section' 카운터를 1 증가 */
}

counter()

카운터의 값을 가져오는 함수. content 속성에서 사용한다. counter-increment에 적은 값을 적어주면 완료.

.counter-item::before {
  content: counter(section);
}

counter-reset

카운터를 초기화하는 속성. 특정 값으로 초기화 할 수도 있다.

.counter-container {
  counter-reset: section 5; /* 카운터 초기값을 5로 설정 */
}

응용

.counter-item::before {
  content: counter(num);
}

.counter-item:nth-child(-n+9)::before { /* 9이하 값에 0 붙이기 */
  content: "0" counter(num);
}

우선, css로

transform: translateX(-100%);

를 주고 같은 %단위를 사용하니

xPercent: 0

으로 만들 생각이었다.

하지만 결과는 제자리에서 움직이지 않았다. 이유가 뭘까하고 개발자도구를 살펴보니 분명 %단위를 입력했는데 들어간 값은 px...

신기하게 같은 이름의 클래스 중 반만 되고 반만 안되는 거였다.

첫번째 시도

• x: '0%'

  gsap.to($textTranslateX, { x: '0%'})

  이렇게 하니 잘 작동했지만, gsap 강의를 들었을 때 x는 기본적으로 px로 계산하기 때문에 % 사용을 추천하지 않는다고 했다. gsap공식문서에서도 기술적인 혼란을 야기할 수 있기 때문에 % 단위는 xPercent 사용을 권고했다.

(참고) https://gsap.com/resources/mistakes/

그리고 gsap 커뮤니티에서 다른 사람들의 질문들을 보다가 가능하면 초기값 세팅을 gsap으로 세팅하길 바란다는 답변을 보고 그렇게 변경하기로 했다.

최종 코드

초기값
gsap.set(target, { xPercent: idx => idx === 0 || idx === 3 ? -100 : 100 })

애니메이션
gsap.to(target, { xPercent: 0})

원래도 이렇게 작업을 많이 했지만 글리치 현상을 겪기 싫어서 다른 스타일로 해보려다가 결국 원래 하던대로 하는 게 맞았다... ( 글리치도 autoAlpha로 처리하기로! )

form 태그 속성 및 사용 방법

method 전송 방식

주의! <form> 태그 내부에는 다른 <form> 태그를 중첩할 수 없으며, 한 페이지 내에서 동일한 name 속성값을 가진 폼을 중복 사용해서는 안 됩니다.

<fieldset> & <legend>

<fieldset>

<fieldset> 태그는 관련된 입력 요소들을 그룹화할 때 사용합니다. 시각적으로 구분을 제공해 폼의 구성을 명확히 할 수 있습니다.

<legend>

<legend> 태그는 <fieldset> 내에서 그룹의 제목을 정의합니다. <fieldset> 내에 반드시 포함되어야 하며, 폼의 특정 섹션을 설명합니다.

<form>
  <fieldset>
    <legend>Login</legend>
    ID: <input type="text" /> <br>
    Password: <input type="password" />
  </fieldset>

  <br>

  <fieldset>
    <legend>Sign Up</legend>
    Email: <input type="email" /> <br>
    Password: <input type="password" />
  </fieldset>
</form>

<button>

button 태그의 기본 타입은 button이며, 폼 요소 내부에서 기본 타입은 submit입니다. 그리고 폼 전송 버튼으로 작동합니다.

inline과 inline-block 요소의 특성

1. inline 요소

   • inline 요소는 텍스트의 한 부분처럼 취급됩니다. 따라서 한 줄에 연속해서 배치되며, 줄을 넘어가지 않는 한 옆에 다른 inline 요소가 바로 붙습니다.
   • 예시: <a>, <span>, <em>, <strong> 등이 있습니다.

2. inline-block 요소

   • inline-block 요소는 inline 요소처럼 한 줄에 배치되지만, 자체적으로 높이와 너비를 가질 수 있다는 점에서 차이가 있습니다.
   • 블록처럼 영역을 가지면서도, 다른 inline 요소처럼 한 줄에 배치되는 특성을 가지고 있습니다.

공백이 발생하는 이유

HTML에서는 코드상에서 inline이나 inline-block 요소 사이에 공백(스페이스, 탭, 줄바꿈 등)이 있으면 이 공백이 화면에 그대로 반영됩니다. 이는 HTML 렌더링 엔진이 공백 문자들을 공백으로 인식하기 때문에 발생합니다. 즉, HTML 코드에서 다음과 같은 코드가 있을 때,

<div>
  <span style="display: inline-block;">Box 1</span>
  <span style="display: inline-block;">Box 2</span>
</div>

Box 1과 Box 2사이에 있는 공백이 그대로 렌더링됩니다. 그 결과 두 요소 사이에 간격이 생기게 됩니다.

공백 문제 해결 방법

1. 부모 요소에 font-size: 0; 적용하기

부모 요소에 font-size: 0; 스타일을 지정하면 공백이 사라집니다. 이 방식은 공백을 발생시키는 원인인 텍스트 사이즈를 0으로 만들어 공백이 화면에 표시되지 않도록 하는 원리입니다.

<div style="font-size: 0;">
  <span style="display: inline-block; width: 100px; height: 50px; background-color: red;"></span>
  <span style="display: inline-block; width: 100px; height: 50px; background-color: blue;"></span>
</div>

주의 font-size: 0;을 설정하면 자식 요소에 텍스트가 있을 경우 보이지 않기 때문에, 자식 요소들에 별도로 font-size를 지정해 주어야 합니다.

2. flex 레이아웃을 사용하기

부모 요소에 display: flex;를 적용하면 inline-block 요소를 사용할 때 발생하는 공백 문제를 쉽게 해결할 수 있습니다. flex 레이아웃에서는 요소들 사이에 불필요한 공백이 자동으로 제거되므로, 간격을 원하는 대로 설정할 수 있습니다.

<div style="display: flex;">
  <span style="width: 100px; height: 50px; background-color: red;"></span>
  <span style="width: 100px; height: 50px; background-color: blue;"></span>
</div>

flex 레이아웃을 적용하면 공백 문제뿐 아니라 요소 간 간격을 gap 속성으로 쉽게 제어할 수 있어 레이아웃 관리가 수월해집니다.

문제의 원인

Flexbox에서 flex: 1;은 다음의 단축 속성을 포함합니다:

flex: 1; /* === flex-grow: 1; flex-shrink: 1; flex-basis: 0; */

문제는 text-overflow: ellipsis;가 제대로 작동하려면 요소의 너비가 고정되어야 말줄임이 가능해집니다. flex: 1;은 요소의 너비를 유연하게 설정하여 너비가 고정되지 않으므로, 말줄임(ellipsis) 처리가 제대로 작동하지 않는다는 것입니다.

해결 방법: min-width: 0; 설정

Flexbox 요소에 min-width: 0;를 추가하면 됩니다.

.container {
  display: flex;
}

.flex-item {
  flex: 1;
  min-width: 0; /* 말줄임 처리를 위해 필수 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• min-width: 0을 설정하여 마치 너비를 설정한 것과 같은 효과를 낼 수 있습니다.

DOCTYPE은 브라우저에게 이 HTML 문서가 어떤 표준을 따르는지 알려주는 역할을 합니다.

HTML5에서는 <!DOCTYPE html> 형태로 간단하게 지정할 수 있습니다.

쿼크 모드는 오래된 브라우저와의 호환성을 위해 남아있는 모드로, HTML4 이전의 레거시 문서에 맞춘 해석 방식입니다. 이를 사용하면 현재 CSS 표준과 다른 방식으로 스타일을 렌더링하기 때문에, 의도한 대로 페이지가 보이지 않을 가능성이 큽니다.

width / height, 테이블 레이아웃, 마진 상쇄, 이미지 요소 크기 차이, 글꼴 크기 및 줄 간격 문제 등 여러가지 문제가 발생할 수 있습니다.

제가 처음 찾아보게 된 계기는 로컬과 서버 간 줄 간격 문제 때문이었습니다. 서버에 반영된 코드에 선언이 빠져서 로컬에서 의도한대로 반영이 되지 않았습니다.

<strong> 태그

• 텍스트의 중요성을 강조하는 데 사용됩니다.
• 브라우저에서는 굵은 글씨로 표시됩니다.
• 의미적으로 중요한 정보를 전달할 때 적합합니다.
• 스크린 리더기에서는 텍스트를 더욱 강조하여 읽도록 합니다.

<em> 태그

• 텍스트의 어조나 뉘앙스를 강조하는 데 사용됩니다.
• 브라우저에서는 일반적으로 이탤릭체로 렌더링됩니다.
• 문장 속에서 감정적이거나 강조된 어조를 표현할 때 유용합니다.
• 스크린 리더기는 어조를 변화하여 텍스트를 읽어 의미를 부각시킵니다.

요약 비교

결론

<strong>과 <em> 태그는 시각적 효과보다는 문맥의 의미를 전달하는 데 초점이 맞춰져 있으므로, 문서의 의미와 용도에 따라 적절히 사용하는 것이 중요합니다.

1. 절대경로란?

절대경로는 파일 시스템의 최상위 디렉토리부터 파일이나 폴더까지의 전체 경로를 지정합니다. 이 경로는 위치가 고정적이며, 항상 특정 파일에 대한 정확한 위치를 알려줍니다.

예시

• 로컬 환경
  만약 파일이 C:\project\images\logo.png에 있다면, 이 경로가 절대경로입니다. 이 경로는 항상 동일하게 해당 파일을 가리킵니다.

• 서버 환경
  서버에서 프로젝트가 /var/www/html/project에 있다고 가정하면, logo.png 파일의 절대경로는 /var/www/html/project/images/logo.png가 됩니다. 서버에서 일반적으로 /로 시작하는 경로는 절대경로로 취급됩니다.

2. 상대경로란?

상대경로는 현재 작업 중인 디렉토리를 기준으로 파일이나 폴더 위치를 지정합니다. 파일이나 폴더가 프로젝트 내부에서 이동하거나 환경이 달라져도 쉽게 적응할 수 있는 유연한 경로 방식입니다.

예시

• 로컬 환경
  현재 디렉토리가 C:\project라면, images 폴더 내 logo.png 파일에 접근할 때 .\images\logo.png로 지정할 수 있습니다. 여기서 .는 현재 디렉토리를 의미합니다.

• 서버 환경
  서버에서 현재 파일이 /var/www/html/project에 있을 때, images/logo.png로 상대경로를 사용하여 접근할 수 있습니다. 웹 경로에서는 ./를 생략해도 무방합니다.

3. 절대경로와 상대경로의 사용 시기

절대경로가 유리한 경우

• 파일의 위치가 고정적이어서 시스템 전체에서 공통으로 참조해야 할 때
• 외부에서 링크를 통해 절대적인 경로가 필요한 경우

상대경로가 유리한 경우

• 프로젝트 내부 파일의 위치가 자주 변경될 때
• 다양한 환경에서 동일한 코드를 적용해야 할 때
• 경로 변경의 유지보수성을 높이고 싶을 때

절대경로와 상대경로 비교 정리

Tip: 웹사이트에서 img/logo.png처럼 상대경로를 사용하면 로컬과 서버 모두에서 동일한 방식으로 작동하므로, 이식성이 높아집니다.

실제 작업하면서 section 태그를 많이 사용하면서 두 태그의 차이에 대해서 깊이 생각해보지 않았던 것 같습니다.

그래서 이번 기회에 두 태그의 차이를 알아보려고 합니다.

1. section 태그

웹 페이지에서 주제를 구분하는 논리적 구역을 정의하기 위한 태그입니다.

• 페이지 내에서 관련 있는 콘텐츠를 그룹화하는 역할을 합니다. section태그 안의 컨텐츠는 특정 주제와 관련된 콘텐츠로, 페이지의 다른 구역과 연결된 맥락을 가집니다.

• 예: 소개, 서비스 설명, 팀 프로필, 연락처 정보 등으로 구획을 나누는 페이지의 특정 영역.

2. article 태그

독립적이고 재사용 가능한 콘텐츠를 나타내기 위한 태그로, 다른 문서나 페이지에서도 이해될 수 있는 내용이 들어갑니다.

• article에 포함된 콘텐츠는 페이지의 맥락에 종속되지 않고, 독립적으로 의미가 통할 수 있는 콘텐츠입니다. 블로그 글, 뉴스 기사, 제품 리뷰 등이 대표적입니다.
• 예: 블로그 포스트, 뉴스 기사, 사용 설명서 등 독립적인 정보가 담긴 콘텐츠.

차이점

section 현재 페이지에서만 의미가 있는 구획. 논리적인 주제별 그룹을 나누는 데 적합. article 독립적이고 재사용 가능한 콘텐츠. 다른 문서나 페이지에서도 온전히 이해될 수 있는 내용.