SVG 파일을 HTML 내에 삽입하는 방법 5가지

SVG 파일을 HTML 내에 삽입하는 방법 5가지

SVG(Scalable Vector Graphics)는 웹 페이지에서 벡터 이미지를 표현할 수 있습니다. HTML 문서에 SVG를 삽입하는 방법은 다양하며, 각 방법은 상황마다 적합한 방식이 있습니다. 아래에서는 SVG를 HTML에 삽입하는 여러 가지 방법과 그 장단점을 설명하겠습니다.1. 인라인 SVG인라인 SVG는 SVG 코드를 HTML 문서 안에 직접 삽입하는 방식입니다. 이 방법은 추가 HTTP 요청을 줄이고 CSS 및 JavaScript를 사용해 SVG를 쉽게 스타일링하거나 조작할 수 있다는 장점이 있습니다. 하지만 재사용성이 낮아 사용빈도가 적습니다. 장점:CSS와 JavaScript로 스타일링 및 애니메이션 가능HTTP 요청 감소로 로딩 시간 단축단점:HTML 파일 크기 증가재사용성이 ..

  • topic HTML&CSS
  • · 2025. 4. 14.
  • textsms
CSS 가상 클래스와 transition으로 버튼에 생명 불어넣기: 인터랙션 디자인 핵심

CSS 가상 클래스와 transition으로 버튼에 생명 불어넣기: 인터랙션 디자인 핵심

웹 디자인은 단순한 ‘보기 좋은 디자인’을 넘어, 사용자와의 직관적 소통을 중시하는 방향으로 나아가고 있습니다. 이 중 버튼은 가장 기본적이면서도 강력한 인터랙션 도구로, CSS 가상 클래스(:hover, :active, :focus)를 활용하면 정적 디자인에 동적인 반응성을 부여할 수 있습니다.예를 들어, :hover로 마우스 오버 시 미세한 색상 변화를 주거나, :active로 클릭 순간의 물리적 피드백을 모방하면 사용자는 ‘기대한 대로 반응하는 인터페이스’를 경험하게 됩니다.  :focus는 키보드 사용자를 위한 접근성 핵심 요소로, 시각적 초점을 명확히 해 주는 역할을 합니다. 과거에는 웹디자인은 PC에서 보는 것이 전부였기 때문에 마우스 오버 시 디자인에 변화를 주는 것만 고려했습니다. 하지만 ..

  • topic HTML&CSS
  • · 2025. 3. 30.
  • textsms
CSS position: sticky로 헤더 고정하는 <table> 만드는 방법

CSS position: sticky로 헤더 고정하는 <table> 만드는 방법

표의 내용이 길어질 때, 엑셀에서 "틀 고정" 기능을 사용하듯 열 또는 행을 고정시키고 싶을 때가 있습니다. 이와 같은 기능을 자바스크립트 없이 CSS만으로 구현이 가능합니다. position: sticky를 이용해서 코드 작성하는 방법을 알려드리겠습니다. position: sticky가 작동하기 위한 전제 조건먼저 sticky가 작동하려면 몇 가지 전제 조건이 필요합니다.부모 요소에 overflow가 있으면 안 됩니다.top, bottom, left, right 속성 중 한 두 가지를 반드시 가지고 있어야 합니다. 부모 요소의 높이(height) 또는 너비(width)가 있어야 합니다. sticky 속성을 갖는 요소는 자신의 부모 요소 안에서만 적용됩니다. 즉, 부모 요소의 범위를 벗어나면 sticky..

  • topic HTML&CSS
  • · 2025. 3. 28.
  • textsms
CSS Grid로 완성하는 Bento UI: 핵심 속성 마스터하기

CSS Grid로 완성하는 Bento UI: 핵심 속성 마스터하기

벤토 그리드(Bento Grid)는 오래전부터 디자이너에게 익숙한 레이아웃입니다. 그동안에도 자주 상용되었던 그리드이지만, 2024년 애플의 소개 페이지에 이 레이아웃이 사용되고 난 후 더욱 핫해졌습니다. 이 디자인은 일본의 도시락(벤또)에서 영감을 받아 만들어졌으며, 각 요소를 독립적인 '도시락의 한 칸'으로  취급합니다. 각 요소를 모듈화 하여 조립하고, 콘텐츠에 특성에 따라 크기와 배치를 달리할 수 있습니다. 아래 그림은 bento grids(https://bentogrids.com/)에서 찾은 벤또 그리드 디자인의 한 사례입니다. 과거 grid에 대한 속성이 없을 때는 무척 귀찮은 방법으로 구현이 가능했지만 지금은 display: grid; 속성을 사용해 간단히 구현이 가능합니다.  display..

  • topic HTML&CSS
  • · 2025. 3. 27.
  • textsms
flexbox 레이아웃에서 flex-basis와 width의 차이

flexbox 레이아웃에서 flex-basis와 width의 차이

개요flex-basis는 flex 요소의 기본 크기를 설정하는 속성입니다. width와 비슷하다고 느껴지지만 flex에 특화된 성질을 가지고 있습니다. 잘 활용한다면 코드를 간결하게 작성할 수 있습니다. 반응형 웹사이트의 코드를 작성할 때 flex-direction 속성을 빈번히 사용하게 됩니다. 스크린의 너비가 넓을 때는 flex 아이템을 가로로 배열하고, 모바일처럼 스크린의 너비가 좁은 경우 flex 아이템을 세로로 배열하는 구조가 그 예입니다. flex-basis 속성은 flex 아이템의 크기를 유동적으로 배치하고, flex-direction과 flex-grow, flex-shrink 속성과 함께 사용했을 때 그 빛을 발합니다.  flex-basis의 기본 성질flex 아이템의 기본 크기를 설정합니..

  • topic HTML&CSS
  • · 2025. 3. 22.
  • textsms
[flexbox] 레이아웃을 잡을 때 사용하는 flex 속성

[flexbox] 레이아웃을 잡을 때 사용하는 flex 속성

Flexbox는 W3C에서 2009년 7월 첫 번째 초안을 발표했습니다. 이후 여러 차례 개정되어 2012년에 우리가 알고 있는 문법으로 업데이트되었습니다. 2015년 마지막 초안이 발표되었고, 이후로도 계속 업데이트했습니다. 무려 10년도 더 된 속성이지만 브라우저 호환성을 위해 오랜 기간 동안 사용하지 못했던 속성입니다. flexbox 개념이 도입되기 전까지 레이아웃을 잡기 위해서는 position과 float 속성을 사용해야만 했습니다. 그 속성도 정적인 레이아웃을 만들기에는 무난하게 사용이 가능하지만 사용이 제한적이고 비효율적인 코드를 작성해야 하는 단점이 있었습니다. 모바일이 활성화되면서부터는 개선된 코드가 절실히 필요했습니다.  Flexbox 기본 개념저의 블로그의 메뉴 디자인입니다. 가로로 ..

  • topic HTML&CSS
  • · 2024. 10. 7.
  • textsms