웹 퍼블리싱3

• 

  [CSS] scroll-behavior로 부드러운 스크롤 구현하는 법 1. scroll-behavior: smooth – 단 1줄로 부드러운 스크롤 완성하기사용자 경험을 높이기 위해 많이 사용되는 효과 중 하나가 부드러운 스크롤(smooth scroll)입니다.과거에는 JavaScript나 jQuery를 통해 구현해야 했지만, 이제는 CSS 한 줄만으로도 가능합니다.2. 기본 문법html { scroll-behavior: smooth;} 이 속성 하나만으로 같은 페이지 내의 앵커(anchor) 링크 클릭 시 부드럽게 이동하게 됩니다.3. 예제: 내비게이션에서 섹션으로 스크롤3-1. HTML 코드섹션 2로 이동 여기가 섹션 2입니다3-2. CSS 코드html { scroll-behavior: smooth;}이제 를 클릭하면, 페이지가 자연스럽게 section2로 스르륵.. CSS 2025. 5. 19.

• 

  [CSS] aspect-ratio 속성으로 반응형 박스 비율 고정하는 법 반응형 웹페이지를 만들다 보면, 정해진 가로세로 비율을 유지한 채 박스나 이미지 크기를 자동 조절해야 하는 경우가 많습니다. 과거에는 padding-top 트릭이나 position: absolute를 이용해 우회적으로 해결했지만, CSS의 aspect-ratio 속성을 사용하면 이 과정을 훨씬 더 간단하게 만들 수 있습니다. 기본 사용법.box { width: 100%; aspect-ratio: 16 / 9; background-color: #3498db;} 이렇게 작성하면, .box는 항상 가로 16: 세로 9의 비율을 유지합니다. width가 늘어나면 height도 자동 조정됩니다. 모바일에서도 완벽하게 작동하게 됩니다. 다양한 예제1. 정사각형 만들기.square { width: 100px.. CSS 2025. 5. 18.

• 

  [웹 퍼블리셔 51일차] 나를 되돌아볼 수 있는 시간이다! 이제 입사한지 50일이 조금 넘었습니다. 첫 프로젝트는 아쉽게 보내게 되었지만, 이러한 시간을 부족했던 공부를 할 수 있게 된 것으로 위안(?)을 삼게 되었습니다. 같은 회사 직원분들, 그리고 학원 동기들은 프로젝트를 진행하고, 완료 하면서 스펙을 쌓는 그러한 부분에서 처음에는 조바심을 가지게 되었지만, 한편으로는 부족한 공부를 하고, 필요한 부분이 어떤건지 몸으로 느끼게 된 프로젝트 투입이었습니다. 웹 퍼블리셔로서 많은 기술들(?)을 가지고 있으면 좋은 것은 사실입니다. 하지만, 생각보다. 하지만 클라이언트가 요구하는 부분은 천차만별이고, 설득이나 다음 플랜을 제시하는 방법들도 많이 배울 수가 있었습니다. 제 경우에는 설득도, 다음 플랜도 진행할 수 없는 부분이었기에 조금은 아쉬웠지만… 다음 프로젝트가.. 웹 퍼블리셔 일기 2021. 5. 27.