Topic

CSS

A collection of 183 posts

CSS 반투명 색상과 rgba(), opacity 투명도 적용 방법

CSS로 반투명 색상을 사용하는 방법과 rgba() 컬러 함수 사용 방법에 대해서 배웁니다.

CSS 텍스트영역(<textarea>) 크기 조절 차단하기

입력 폼 필드 중 텍스트영역(< textarea>)은 자동 크기 조절 속성이 있기 때문에 웹페이지에서 텍스트영역의 크기를 사용자가 조정할 수 있습니다. 기본 크기가 너무 작거나, 입력할 내용이 많아서 큰 텍스트 영역을 필요하면 마우스 드래그로 오른쪽 아래의 컨트롤을 당겨서 크기를 더 늘릴 수 있습니다. 텍스트영역(< textarea>) 의 크기 조절이 되지 않도록 막으려면

<sup> 태그(어깨문자)를 CSS로 구현하기

< sup> 태그는 "superscript" 의 약자로 한글로는 "어깨 문자" 라고 합니다. "X의 제곱" 과 같은 문자를 표현할 때 사용하며 태그로는 X² 로 표현합니다. "< sup>" 태그를 사용하면 간편하게 어깨 문자를 표현할 수 있지만, "< sup>" 태그를 사용할 수 없거나, CSS 클래스로 구현해야 하는 상황일 경우 다음과 같이 CSS 만으로 "< sup>" 태그를 대신할

<abbr>과 <dfn> 태그의 활용

HTML 태그들 중에서 가장 사용 빈도가 낮은 태그들입니다. < abbr> 태그는 abbreviation(축약어)의 약자로 만든 태그입니다. < dfn> 태그는 definition(정의)의 약자로 만든 태그입니다. 축약어, 또는 약자에 대한 설명을 덧붙여서 마우스 호버시 설명이 툴팁으로 표시되도록 하는 태그입니다. < abbr>과 < dfn> 은 다음과 같이 사용합니다.

CSS 는 HTML 문서의 스타일을 기술하는

HTML 데이터셋(Dataset, data-*) 속성의 이해

HTML5 에서 새로 확장된 속성입니다. HTML에 추가의 커스텀 속성을 표시하는데 표준화된 방법을 제공하기 위해 제안되었습니다. "data-*" 어트리뷰트로 표기하며, HTML5 표준 속성처럼 접근할 수 있습니다. HTML에 추가의 속성이나 데이터를 표기하는 표준이 없어 비표준적인 방법으로 데이터를 표기하던 라이브러리들이 표준적인 방법을 사용할 수 있도록 개선되었으며, 자바스크립트 또한 표준화된 DOM 메서드로 데이터셋 속성에 접근할

<br> , <br/>, <br /> 어떤게 맞는 것인가?

웹의 표준이 계속 바뀌면서 문제가 된 것이 구 태그 사용 방법에 대한 혼동입니다. 바뀐 지 오래되었지만, 오래된 HTML 문서들에 사용된 구 버전 사용 방법들을 따라 계속 사용하면서 불필요한 사용 방법을 계속 고수합니다. 달라진 표준에 대한 문서를 볼 기회가 없는 것도 한 가지 원인이기는 합니다. 가장 흔한 혼동이
혼동입니다. 결론부터 말하면

<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: