이 코드를 모르겠어요

Question

이 코드를 처음 보는데 이게 왜 여기에 넣어지는지 모르겠어요. content: attr(data-char); *혹시 이 선생님 수업 영상 중에 기초가 될 수 있는 강의가 있을까요. 처음 보는 코드가 많이 보여서 공부를 해보고 싶습니다.

J.영 · Answer

안녕하세요? 민혜님~~ 질문하신 구문은 ...강의영상 (7분18초 구간) 개발자도구 화면을 보시면... splitting.js를 적용으로 인해 각각 낱 글자를 <span>로 감싸고 그 안에 data-char="A" 로 감싸져 있는 것을 보실 수 있으시죠? 한마디로 attr()메서드를 이용해서 'data-char'의 속성 값 'A'을 가져오게 합니다. 여기서~ attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드이며, 'data-*'는 html요소에 추가 정보를 저장하는 속성인데요... 여기서는 attr()메소드로 'A'값을 가져오게 하는거지요~   그리고... 포트폴리오 제작은 물론, 웹사이트, 웹페이지 제작에 있어 가장 중요한 것은 레이아웃제작입니다. 먼저 레이아웃제작에 대한 실력을 탄탄하게 키우시고~~ 이에 대한 동적요소 구현을 위해..적용되는 javaScript 용어를 알아가시길 추천드립니다. 물론 javaScript 기초부터 탄탄하게 학습한 후에 제작하면 더 없이 좋겠지만.. 그러기위해서는 학습의 시간이 너무 많이 소요되니까요.. 제 강의 중..와이스튜디오 > 뮤자인 > 대방 or 크루얼라모드 순으로 공부하신다면.. 기초부터 실무까지 탄탄한 레이아웃제작은 물론 실무에 필요한 인터렉션 요소 구현에 많은 도움이 되리라 생각됩니다. 화이팅 하세요!~ J.young 드림