GoldenKey GoldenKey

웹 디자인의 세계는 끊임없이 발전하고 있으며, CSS(계단식 스타일 시트)는 개발자와 디자이너가 최소한의 노력으로 사용자 경험을 향상시킬 수 있는 강력한 기능을 계속해서 제공하고 있습니다. 이러한 발전 중에서도, 단 한 줄의 CSS 업그레이드는 그 간결함과 영향력으로 눈에 띕니다. 이 블로그 포스트에서는 최신 단일 줄 CSS 업그레이드를 코드 예시와 함께 탐색하여, 이러한 작은 변경 사항이 웹 프로젝트에 어떻게 큰 개선을 가져올 수 있는지 보여드리겠습니다. 1. text-underline-offset text-underline-offset 속성은 텍스트 밑줄의 위치를 조정하는 간단한 방법을 제공합니다. 이는 특히 링크의 가독성과 미적 매력을 향상시키는 데 유용합니다. a { text-underline-o..

Mobile CLS를 0.1초 미만으로 낮추기 위해 고군분투를 하고 있다. 이런 지표는 Page Speed Insights가 실행하는 합성 테스트 간에는 주요 차이점이 있다. 예로 구글 크롬에서 작업하는 Addy Osmani의 CLS에 대한 설명에서 언급되어 있는 것처럼 CLS는 실제 웹에서 페이지가 언로드될 때가지 측정된다. 이런 이유로 페이지가 특정 화면 크기에서 제대로 작동하지 않거나(Lighthouse/PSI는 기본적으로 하나의 모바일 화면 크기만 테스트하므로) 실제 환경에서 지연 로딩이 제대로 작동하지 않아 레이아웃을 유발하는 것과 같은 것이 있는 경우 페이지에 대한 CLS가 높을 수 있다. 너무 느리게 로드될 때 나온다. 특정 브라우저, 연결 속도 등일 수도 있다. 성능 보고서에 페이지와 근본..

웹페이지에 아이콘을 넣는 방법은 여러가지가 있는데, 주로 Font Awesome 이라는 라이브러리를 사용하기도 한다. 폰트 어썸이 아닌 Icomoon 을 사용해 직접 아이콘을 만들어서 넣어보는 것을 해보고자 한다. 아이콘을 만들어서 넣기 위해서는 SVG 확장자의 이미지 파일이 필요하다. SVG 확장자 아이콘 만들기 아이콘을 만들기 위해서는 Adobe Illustration이 필요하다. 아이콘을 만드는 방법을 진행하고자 하면 아래 포스팅을 보고 생성해서 오면 된다. 원하는 이미지를 아이콘 SVG파일로 만드는 방법 (Illustration) Adobe Illustration으로 원하는 아이콘을 가져와서 SVG 파일로 만드는 방법에 대해서 알아보려고 한다. SVG 파일은 그림파일을 웹에서 원래그대로 보여질 수..

CSS에 overflow는 요소내 컨텐츠가 커서 요소내 모두 보여죽 어려울때 그것을 어떻게 보여줄지를 지정한다. 기본적 컨텐츠 포함 요소의 크기가 고정되있지 않다면 모두 포함할 수 있도록 요소의 크기가 커진다. 크기가 고정되있으면 지정된 값에 따라 보여진다. overflow에 사용할 수 있는 값 4가지 1. visible 기본 값, 넘칠 경우 컨텐츠가 상자 밖으로 보여짐 2. hidden 넘치는 부분은 잘려서 보여지지 않음 3. scroll 스크롤바가 추가되어 스크롤할 수 있음 4. auto 컨텐츠 량에 따라 스크롤바를 추가할지 자동 결정 즉 auto;overflow: hidden; 의 의미는 컨텐츠 량에 따라 스크롤바를 추가할지 자동 결정하고, 넘친 컨텐츠는 잘려지고 보여지지 않음을 의미하게 된다.

개요 백그라운드 컬러로 배경의 색을 정한다. 그 색으로 border와 padding을 포함한 영역을 칠한다. margin 영역은 칠하지 않는다. ▷ 기본값 : transparent ▷ 상속 : No ▷ 애니메이션 : yes ▷ 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit ▷ transparent 배경색이 없다. ▷ color 색을 정한다 ▷ initial 기본값으로 설정한다 ▷ inherit 부모 요소의 속성값을 받는다 예제 gold.goose gold.goose gold.goose 브라우저별 ▷ Chrome : 1.0+ ▷ Firefox : 1.0+ ▷ Internet Explorer : 4.0+ ▷ Oper..