함수 표현식과 함수 선언문
함수표현식 함수를 변수에 담아 필요할 때만 사용 ex) 콜백, 이벤트 핸들러 다른 함수의 인수로 함수 전달, 동적으로 함수가 결정될때 ex) map, filter 함수표현문 전체에 반복적으로 쓰는 유틸, 초기화 함수 읽는 순서와 무관하게 호출되어야 할 때
return
코드를 작성하다 보면 다양한 함수를 만들게 된다. 자료형과 함수를 공부하면서 습관적으로 쓰던 return에 대해서 명확하게 어떤 경우에 사용하는지 정의하고 싶었다.일반적으로 return을 명시하지 않더라도 모든 함수는 return 값으로 undefined를 반환한다.그
한 입 크기로 잘라먹는 리액트(React.js) 시작
재직 중에 퇴근 후 공부를 꾸준하게 하기란 참 쉽지 않은 것 같다.체력 이슈도 있고, 예상치 못한 스케줄이 생겨 루틴이 깨지다보면 흐름이 깨지기 일수였다.하지만, 평소에 해놓은 공부가 면접 뿐만 아니라 한 사람의 기초 체력처럼 기초 지식이 되기 때문에 오늘부터 꾸준하게
GSAP을 활용한 clip-path 애니메이션
오늘은 GSAP을 사용하여 clip-path 애니메이션을 만들어보았습니다.우선 위에 영상과 같이 만들기 위해서는HTML에서 배경 부모를 만들고 안에 배경을 몰아 넣어주었다.positon:absolute: 배경 한 곳에 모아두기clip-path: inset(0): 첫 이
스크롤스파이 만들기
오늘은 스크롤스파이를 Jquery를 사용해서 만들어보았다.HTML은 일반 네비게이션과 컨텐츠 영역처럼 잡고, 컨텐츠 리스트 중 특정 컨텐츠의 위치로 이동해야해서 구분하기 편하게 ID를 부여하였다.스크립트는 크게 스크롤 이벤트, 클릭 이벤트 두 가지가 필요하였다.스크롤
CSS counter()
순서가 있는 목록을 만들 때 제목 앞에 숫자를 붙여야하는 상황이 많다.이때 HTML에서 하드코딩하지 않고 CSS로 목록의 갯수를 세어 붙여주는 기능을 발견했다!순서를 붙이기 위해 몇 가지 단계를 거쳐야한다. 그 중 첫 번째는 증가할 목록에 이름 붙이기.카운터의 값을 가
gsap xPercent 오류
어느 날 gsap으로 인터렉션을 만들던 중, css로 초기값 세팅을 하고 xPercent로 요소를 움직이려고 코드를 작성했다.우선, css로 를 주고 같은 % 단위를 사용하니으로 만들 생각이었다.하지만 결과는 제자리에서 움직이지 않았다. 이유가 뭘까하고 개발자도구를 살
HTML5 form 요소
HTML form 태그는 사용자로부터 데이터를 입력받아 서버로 전송할 때 사용합니다.주의! <form> 태그 내부에는 다른 <form> 태그를 중첩할 수 없으며, 한 페이지 내에서 동일한 name 속성값을 가진 폼을 중복 사용해서는 안 됩니다.<fiel
HTML에서 `inline`과 `inline-block` 요소 사이에 공백이 생기는 이유와 해결 방법
inline 요소는 컨텐츠의 너비만큼 크기를 가져서 줄바꿈이 일어나지 않기 때문에 가로 배열이 됩니다. 하지만, margin, padding을 0으로 설정해도 두 요소 사이 공백이 존재하는 경우가 있습니다.inline 요소inline 요소는 텍스트의 한 부분처럼 취급
Flexbox와 `text-overflow: ellipsis` 문제 해결 방법
CSS에서 Flexbox 레이아웃을 사용할 때, 텍스트가 요소의 너비를 초과하는 경우 text-overflow: ellipsis;로 말줄임 처리를 하는 경우가 많습니다.Flexbox에서 flex: 1;은 다음의 단축 속성을 포함합니다:문제는 text-overflow:
DOCTYPE 선언 이해하기
DOCTYPE은 브라우저에게 이 HTML 문서가 어떤 표준을 따르는지 알려주는 역할을 합니다. HTML5에서는 <!DOCTYPE html> 형태로 간단하게 지정할 수 있습니다. 쿼크 모드는 오래된 브라우저와의 호환성을 위해 남아있는 모드로, HTML4 이전의 레거
<strong>과 <em> 태그의 차이점
HTML에서 <strong>과 <em> 태그는 각각 중요성과 어조를 표현하기 위해 사용됩니다. 두 태그는 시각적인 강조를 위한 것이 아니라 의미론적 역할에 중점을 둡니다.텍스트의 중요성을 강조하는 데 사용됩니다.브라우저에서는 굵은 글씨로 표시됩니다.의미적으로
절대경로와 상대경로의 차이점 이해하기
파일 시스템에서 특정 파일이나 디렉토리를 참조할 때 사용하는 절대경로와 상대경로는 개발에 필수적인 개념입니다. 로컬 환경과 서버 환경을 예시로 들며 절대경로와 상대경로의 차이를 쉽게 설명해보겠습니다.절대경로는 파일 시스템의 최상위 디렉토리부터 파일이나 폴더까지의 전체
<section> 태그와 <article> 태그 차이점
퍼블리싱을 공부하면서 시맨틱 태그가 중요하다는 말을 많이 듣고 공부하면서 다른 태그들은 이해가 되었지만 section과 article의 차이는 와닿지 않았습니다. 실제 작업하면서 section 태그를 많이 사용하면서 두 태그의 차이에 대해서 깊이 생각해보지 않았던