aPOST

<details>와 <summary> 태그로 아코디언 UI 만들기

작은 영역 안에 선택적으로 필요한 상세 내용을 펼쳐서 표시하는 배치 방식 중에 아코디언 UI가 있습니다. 아코디언처럼 접었다 폈다 하는 구조로 UI가 구성되어있고, 초기 상태에서는 주요 키워드(제목)만 표시되다가 키워드(제목)를 클릭하거나 선택하면 펼쳐지면서 해당 키워드에 해당하는 상세 내용이 보이는 구조입니다. 아코디언 UI 기능을 제공하는 라이브러리는 여러 가지가 있습니다.

CSS없이 반응형 웹 이미지를 구현하는 <picture> 태그 기초

웹에서 이미지를 표현하는 기본 태그는 태그입니다. 태그는 반응형 이미지를 위한 속성을 일부 지원합니다. 다만, 완전하지는 않기 때문에 반응형 웹을 제대로 지원하기 위해서는 CSS와 미디어쿼리 지원이 필수적으로 필요합니다. 조금 더 고급스럽게 동적 이미지 제어를 하려면 자바스크립트의 도움이 일부 필요하기도 합니다. 태그 이후 새롭게 표준으로 정해진 이미지 태그인

CSS 플렉스박스(Flexbox) - 1. 기초

CSS 플랙스 박스는 레이아웃을 만들 수 있는 다양한 방법들 중 가장 유연하고 쉬운 방법중 하나입니다. 인터넷 익스플로러 미지원으로 국내에서는 사용 빈도가 높지 않았지만, 인터넷 익스플로러 퇴출과 함께 가장 강력한 레이아웃 제작 방식이 될 것입니다. 플렉스박스는 이름 그대로 유연한 박스 모델을 제공하며, 특히 정렬 기능이 탁월하기 때문에 여러가지 속성 값을 조합해

CSS 작성에 도움이 되는 CSS 툴 웹서비스 5가지

1. PurifyCSS Online PurifyCSS는 사용하지 않는 CSS를 제거해주는 자바스크립트 라이브러리입니다. 사용하지 않는 CSS를 제거해주는 여러 가지 툴이 있고 프런트엔드 프레임워크를 지원하는 대표적인 툴로 PurgeCSS가 있습니다. 다만 PurgeCSS는 온라인에서 간편하게 사용할 수 있는 수단을 제공하고 있지는 않습니다. 온라인으로 사용할 수 있는 사용하지 않는 CSS를 제거해주는 툴로 PurifyCSS Online 서비스가 있습니다. https:

CSS 커서를 적용하는 다양한 방법들. 비트맵 이미지와 이모지 아이콘으로 마우스 커서 만들기.

CSS 커서 속성 CSS에서 사용할 수 있는 기본 커서의 종류는 30가지가 넘습니다. 그중에서 실제로 CSS에서 사용하는 것은 몇 가지 되지 않으며, 대표적인 커서는 다음과 같습니다. CSS 속성 값 커서 모양 설명 default 기본 커서를 표시합니다. 대부분 화살표 모양입니다. 운영체제, 또는 사용자 설정에 따라 다를 수 있습니다. auto 커서가 위치한 컨텐츠,

CSS를 작성할 때 지켜야 하는 7가지 기본 원칙

1. 상대 크기 단위를 사용해라. CSS에서 픽셀 단위 크기를 사용하는 것은 더 이상 권장되지 않습니다. 레티나 디스플레이와 4K 이상의 화면이 서서히 자리를 잡아가고, 모바일 화면과 반응형 웹 지원이 필수가 되면서 다양한 ppi(Pixel Per Inch)를 가지는 기기 지원이 CSS 작성의 필수 요소가 되어가고 있습니다. 픽셀 단위인 px 표시보다는 상대

유튜브 노래 MP3로 다운로드 받아서 듣기. 4K YouTube to MP3 다운로드 앱 사용기.

유튜브에서 재생 목록으로 모아서 듣는 노래들을 USB로 다운로드하여서 차에서 들으려고 MP3로 다운로드해주는 몇 가지 앱을 써보다 알게 된 앱입이다. "4K YouTube Download" 앱으로 익히 잘 알려진 제작사라서 크게 고민은 없었고, 사용법 간편하고, 다운로드도 확실하게 잘 되었습니다. 제약이 있는 무료 버전 몇 번 써보다, 뒤에 설명하겠지만, 번들팩으로 유료 버전을 구입하면서 같이

티스토리스킨

티스토리 반응형 스킨 034 - 반응형 그린라인 v3 스킨 배포합니다.

-------------------------------------------------------------------- 2021-09-02. 목차 기능 사용시 공감 버튼과 충돌하는 현상 패치 (스킨을 다시 다운로드 받아 script.js 파일만 재업로드) -------------------------------------------------------------------- 구버전 스킨인 34. 반응형 그린라인 스킨의 신버전입니다. 초록창 회사 블로그랑 비슷한 느낌을 살린 2단 반응형 스킨입니다. 테두리선 색상, 두께와 각 영역별 배경색을 지정할 수 있어 다채로운 모양의 디자인을 만들 수 있습니다.

CSS만으로 별점 선택 기능 만들기. 형제 선택자(Sibling Selector) "~"를 활용한 별점 선택 기능 만들기.

1. 별점 선택 기본 구조 만들기 별점 기능을 구현하기 위한 별 이미지는 투명 배경 이미지인 PNG나 벡터 이미지인 SVG로 많이 만듭니다. 최근에는 다양한 기본 이모지가 사용 가능해지면서 이모지를 이용해서 별점 기능을 만들 수 있어서 별도의 리소스 제작을 하지 않고 만들 수 있는 이모지를 활용해서 만들어 보겠습니다. 이모지는 기본 시스템 글꼴로

자바스크립트

간결한 자바스크립트 코드를 만드는 9가지 최신 방법

1. 함수 파라미터에 기본값을 표시하기 함수를 정의할 때 파라메터의 기본값을 명시하는 습관을 들입니다. 파라미터 기본값은 파라미터가 넘어왔는지를 확인하는 조건 체크를 하지 않아도 되기 때문에 더 간결하고 짧은 코드를 작성하는데 도움이 됩니다. function myFunc1(param1){ console.log(`param1=${param1}`); } function myFunc2(param1 = '기본값'){ console.log(`param1=${param1}`); } myFunc1(); // undefined myFunc2(); // '기본값'