그냥, 일단 써내려가자

안녕하세요 :) 무택입니다🧔 오늘은 간단하지만 인풋대비 좋은 아웃풋을 낼 수 있는 기능을 가져왔습니다. 홈페이지에서는 잘 사용하지 않지만 원페이지로 되어있는 있고 페이지의 길이가 긴 경우에 사용하기 좋은 기능입니다. 바로 scroll-behavior 설정입니다. See the Pen [CSS]a태그 클릭시 섹션 부드럽게 넘어가기(scroll-behavior) by TytanLee (@TytanLee) on CodePen. 위처럼 html에 'scroll-behavior: smooth;' 값을 주면 페이지 전체에 a태그 클릭 시 부드럽게 이동하는 효과를 적용할 수 있습니다. 서치 하다 보니 옛날에는 js라이브러리를 이용해서 구현했던 것 같은데 지금은 위 기능으로도 충분히 좋은 ux를 적용할 수 있으니 시대..

안녕하세요 :) 무택입니다🧔 오늘 기록할 내용은 웹페이지 nav에 활용하면 좋은 효과입니다. nav에 투명도를 주고 블러효과를 입혀서 아래레이어가 보이는 구성으로 웹페이지에 개방감을 줄 수 있는 장점이 있습니다. See the Pen nav filter effect by TytanLee (@TytanLee) on CodePen.

아래 방법을 사용하면 간편하게 디자인 가이드를 수정할 수 있습니다. 처음 퍼블리싱을 접하시는 분들은 각각의 텍스트, 라인 등에 똑같은 스타일을 다 각각 스타일을 지정하는 작업을 할 수 있지만 아래처럼 변수로 스타일을 만들어놓으면 같은 형식의 디자인같은 경우 한 번에 색상 및 폰트 크기 등을 간편하게 변경하고 적용할 수 있습니다. 1.HTML 첫 번째 타이틀 첫 번째 서브 타이틀 예시용 텍스트 문단입니다. 두 번째 타이틀 두 번째 서브 타이틀 예시용 텍스트 문단입니다. 세 번째 타이틀 세 번째 서브 타이틀 예시용 텍스트 문단입니다. 2.CSS *{ pdding: 0; margin: 0; } /* 전체 설정 가이드화 */ :root{ --color-black: #131313; --color-gray: #55..