인프런 커뮤니티 질문&답변

민혜님의 프로필 이미지
민혜

작성한 질문수

GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

header영역_GNB메뉴 : Splitting.js를 이용한 네비게이션 마우스오버 효과

이 코드를 모르겠어요

작성

·

293

·

수정됨

0

이 코드를 처음 보는데 이게 왜 여기에 넣어지는지 모르겠어요.

content: attr(data-char);

*혹시 이 선생님 수업 영상 중에 기초가 될 수 있는 강의가 있을까요. 처음 보는 코드가 많이 보여서 공부를 해보고 싶습니다.

 

답변 1

1

J.영님의 프로필 이미지
J.영
지식공유자

안녕하세요? 민혜님~~
질문하신 구문은 ...강의영상 (7분18초 구간) 개발자도구 화면을 보시면...
splitting.js를 적용으로 인해 각각 낱 글자를 <span>로 감싸고 그 안에 data-char="A" 로 감싸져 있는 것을 보실 수 있으시죠?

한마디로 attr()메서드를 이용해서 'data-char'의 속성 값 'A'을 가져오게 합니다.

여기서~
attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드이며,
'data-*'는 html요소에 추가 정보를 저장하는 속성인데요...
여기서는 attr()메소드로 'A'값을 가져오게 하는거지요~

 

그리고...

포트폴리오 제작은 물론, 웹사이트, 웹페이지 제작에 있어 가장 중요한 것은 레이아웃제작입니다.
먼저 레이아웃제작에 대한 실력을 탄탄하게 키우시고~~
이에 대한 동적요소 구현을 위해..적용되는 javaScript 용어를 알아가시길 추천드립니다.
물론 javaScript 기초부터 탄탄하게 학습한 후에 제작하면 더 없이 좋겠지만..
그러기위해서는 학습의 시간이 너무 많이 소요되니까요..

제 강의 중..와이스튜디오 > 뮤자인 > 대방 or 크루얼라모드 순으로 공부하신다면..
기초부터 실무까지 탄탄한 레이아웃제작은 물론 실무에 필요한 인터렉션 요소 구현에 많은 도움이 되리라 생각됩니다.

화이팅 하세요!~

J.young 드림


민혜님의 프로필 이미지
민혜
질문자

감사합니다

민혜님의 프로필 이미지
민혜

작성한 질문수

질문하기