웹퍼블리싱 공부

검색엔진(구글, 네이버 등)은 웹사이트를 크롤링(Crawling) → 색인(Indexing) → 검색결과 노출(Ranking) 과정으로 분석

애니메이션이 정방향(0% → 100%)으로 갔다가, 역방향(100% → 0%)으로 반대로 실행되는 방식즉, 한 번 재생될 때는 정상적으로 진행되고, 다음 재생될 때는 반대로 진행됨.

가정 => 다른 요소에서 스와이퍼에 active 클래스가 주어졌을 때만 스와이프 기능을 막고 싶다면,클래스를 감지하는 observer와 allowTouchMove: true / false로 관리하면 된다.여기서 swiper 자체의 observer: true와 obser

글자를 여러 번 랜덤하게 변경하려면, setTimeout보다 setInterval이 더 적합Math.random() \* 300 → 0~300ms 사이의 랜덤한 딜레이를 설정해서, 각 글자가 다른 속도로 변경되게 만듦.setInterval()은 자동으로 멈추지 않기 때

기존에는 skill-swiper-wrapper가 하나여서 swiper-slide와 desc-wrapper의 index를 맞춰서 동작했음.하지만 UX적으로 디자인을 먼저 보고 싶은 사람과, 코딩적인 스킬을 먼저 보고싶은 사람을 위해 이 구조 전에 버튼으로 원하는 걸 바로

포폴 만드는데, 버튼 누르면 가로 스크롤 되는 기능을 만드려고 하다가,처음에 짠 코드가 기능이 내 예상과는 다르게 흘러갔었다.일단 처음에 짠 코드 구조세로스크롤이 아닌 가로스크롤이고 << 이 방향으로 가는거니까 offsetLeft를 썼다.그래서 left값을

포폴 만드는 중, 외국 사이트 레퍼런스를 하면서 em을 채용하고, 꽤 재밌는 애니메이션이 들어간 버튼을 발견. 그래서 구조를 보는데, 문득 여기서 em을 쓴 이유가 궁금해서 생각을 좀 해보았다.코드는 이렇다em은 부모 요소의 font-size를 기준으로 크기를 결정하는

포폴에 들어갈 이메일 폼을 알아보던 중 Formspree라는 무료 api를 발견, 이를 적용해본다.문제는, 내가 data나 JSON쪽은 지금 이걸 알아보면서 처음 배운거라, 하나 하나 찾아가면서 짜집기 + 주석 정리를 해 보았다.나중을 위해 기록.하나 하나 파헤쳐보자.

포폴이 우주 배경이라, 밤하늘에 별을 만들어야 했다.물론 내가 발상하진 않았고, 이 역시 찾은 것,내거로 만들기 위해, 헤체 분석 들어간다.코드 찾은 곳은 codepenhttps://codepen.io/harshpreet_singh/details/PoMxGaX

theSection.scrollIntoView({ behavior: 'smooth' }); '레이아웃 요소'에 'vh'값을 박아 넣은 상황 ( 가령, 섹션마다 100vh를 가지는 경우 ) 에, 모바일, 터치 스크린 환경에 대응하는 건 이번 포트폴리오 최대 난제임.

오늘 웹 퍼블리셔 면접 보고 왔음거두절미 하고 내가 느낀 걸 써내려 간다. 앞으로 공부해야 할 방향, 놓친 부분, 자만하지 말 것 1\. form 태그와 input 태그의 사용법을 정확히 익혀라 2\. 시멘틱 태그의 사용법을 정확히 익혀라, 퍼블리싱의 기초다 (

안녕하세요! 오늘은 웹 실무에서 정말 중요한 속성 중 하나인aria-label에 대해서 정리해보려고 해요.aria-label은 한마디로,스크린 리더(화면 낭독기) 같은 보조 기술을 사용하는 분들을 위해요소에 ‘설명’을 달아주는 속성이에요.\--우리가 웹사이트를 만들 때

안녕하세요!오늘은 많은 분들이 놓치기 쉬운img 태그의 width와 height 속성에 대해 이야기해보려고 해요.굳이 안 넣어도 잘 나오는데, 굳이 써야 할까요?결론부터 말하자면, “반드시 써야 합니다.”왜일까요?잘 나와요. 문제 없어 보이죠?그런데 이미지가 로드되기

안녕하세요! 오늘은 Swiper(스와이퍼)에서 자주 사용하는 autoplay 설정 중조금 헷갈릴 수 있는 옵션 하나를 소개해볼게요.바로 disableOnInteraction 입니다우선, autoplay란?Swiper의 autoplay는 슬라이드가 자동으로 넘어가도록 만

안녕하세요!오늘은 실무에서 자주 쓰이는 "PHP 버튼 컴포넌트"에 대해 이야기해보려고 해요.처음 PHP를 접한 퍼블리셔라면, 이런 코드가 다소 낯설 수 있지만,막상 써보면 퍼블리싱 업무를 더 빠르고 깔끔하게 만들어주는 아주 유용한 방식이랍니다.\--버튼 하나, 매번 새

문제 상황list.html(상품 리스트 페이지)에서는 각 상품의 별점({$point}, {$point_count} 등)이 정상적으로 안 들어옴.product_review 모듈이 리스트에선 작동하지 않거나, 일부 값만 들어와서 마크업 완성이 안 됨.우리가 선택한 해결 방

안녕하세요!오늘은 웹 퍼블리셔가 꼭 알아야 할 실무에서 효율을 높여주는 도구, iframe에 대해 이야기해볼게요.단순히 외부 콘텐츠를 불러오는 것에서 끝나지 않습니다.iframe은 상황에 따라 실무 효율을 크게 높일 수 있는 도구가 될 수 있어요.iframe이란?ifr

안녕하세요!오늘은 접근성을 고려한 마크업 중 role="presentation" 속성에 대해 소개해보려고 해요.퍼블리싱을 하다 보면, 보조기기(스크린리더 등)에 의미 없이 읽히는 요소들을 마주치게 됩니다.이럴 때 적절히 role="presentation" 속성을 활용하

안녕하세요!오늘은 URL에 파라미터를 넣을 때, urlencode()를 사용하는 이유와 그 효과에 대해 이야기해보려고 해요.퍼블리싱하면서 종종 이런 링크를 마크업하게 되죠:겉보기엔 잘 작동하지만, 사실 이런 방식은 문제의 씨앗이 될 수 있어요.이렇게 직접 넣으면 어떤

안녕하세요!오늘은 우리가 자주 쓰는 target="\_blank" 속성과 함께 알아두면 좋은rel="noopener"의 역할과 그 이유에 대해 이야기해보려고 해요.새 창으로 링크를 열기 위해 target="\_blank"를 쓰는 건 퍼블리싱에서 정말 흔한 일이죠.근데