본문 바로가기

CSS25

CSS로 하트 모양 만들기 CSS만으로 하트를 만드는 방법은 사각형이나 원형과 같은 기본 도형을 조합하는 방식으로 구현할 수 있습니다. 주로 ::before, ::after 가상 요소와 border-radius를 사용하여 하트 모양을 구성합니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스/* 하트 모양 */.heart { position: relative; width: 100px; height: 100px; background-color: red; transform: rotate(-45deg); margin: 50px;}/* 하트의 왼쪽 원형 부분 */.heart::before,.heart::after { content: ''; position: absol.. 2024. 10. 10.
CSS로 로그인 아이콘 만들기 CSS로 로그인 아이콘을 만드는 방법은 여러 가지가 있습니다. 여기서는 로그인 아이콘을 CSS와 HTML만으로 만들며, 아이콘 모양과 함께 텍스트를 포함한 간단한 버튼 스타일의 아이콘을 구현하겠습니다. border-radius, box-shadow, font-awesome 같은 아이콘 폰트를 활용해 만들 수 있지만, 폰트 없이도 간단한 모양을 CSS로 그릴 수 있습니다.HTML & CSS로 로그인 아이콘 만들기 (순수 CSS 버전) " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스.login-icon { position: relative; display: inline-block; width: 50px; height: 50px; border-rad.. 2024. 10. 10.
CSS로 select 스타일 입히기 요소는 기본적으로 브라우저마다 다르게 스타일링되기 때문에, CSS로 직접 스타일을 적용해 select 박스의 외관을 커스터마이징할 수 있습니다. 하지만 요소는 완벽하게 커스터마이징하기 어려운 부분이 있습니다. 기본적인 스타일 변경은 가능하나, 완벽히 통제하려면 JavaScript와 함께 커스텀 UI를 만들어야 합니다.그래도 CSS로 할 수 있는 몇 가지 방법을 소개합니다.기본적인 select 스타일링 예시 사과 바나나 체리 포도 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 사과 바나나 체리 포도 .. 2024. 10. 8.
CSS로 팝업만들기(+JavaScript) button 태그를 이용해 클릭 시 팝업을 띄우는 간단한 팝업 창을 CSS와 HTML만으로 만들 수 있습니다. CSS로만 팝업을 구현하려면 visibility와 opacity 속성을 활용하여 팝업을 보였다가 숨기는 방식으로 구성할 수 있습니다. 팝업 열기 팝업 창 이것은 간단한 CSS 팝업입니다. 닫기 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스팝업 열기 팝업 창 이것은 간단한 CSS 팝업입니다. 닫기 .popup-overlay { position: fixed; top: 0; left: .. 2024. 10. 8.
table 홀수, 짝수 행과 열 구분하기 CSS를 사용하여 table의 홀수 행(odd row)과 짝수 행(even row), 그리고 홀수 열(odd column)과 짝수 열(even column)에 스타일을 적용하는 예제를 보여드리겠습니다. nth-child() 선택자를 활용하면 쉽게 스타일을 적용할 수 있습니다.1. 홀수/짝수 행 스타일 적용먼저 홀수와 짝수 행에 스타일을 적용하는 예제입니다. Header 1 Header 2 Header 3 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 4, Cell 1 Row 4, Cell 2 Row 4, .. 2024. 10. 4.
CSS로 라디오버튼 스타일 만들기 CSS로 기본 HTML 라디오 버튼의 스타일을 사용자 정의할 수 있지만, 기본적으로 브라우저에서 제공하는 라디오 버튼은 제한된 스타일링만 가능합니다. 이를 해결하기 위해, 라디오 버튼을 숨기고 대신 CSS와 HTML을 사용하여 커스텀 라디오 버튼을 만들 수 있습니다.아래는 라디오 버튼을 커스터마이징하는 방법의 예입니다. 이 예시에서는 기본 라디오 버튼을 숨기고, 라벨과 ::before 가상 요소를 사용하여 커스텀 라디오 버튼을 디자인합니다. Option 1 Option 2 Option 3" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Option 1 Option 2 Option 3 /* 라디오 버튼 숨기기 */ input[type="ra.. 2024. 10. 3.
background에 대한 개념과 속성 CSS의 background 속성은 요소의 배경을 설정하는 데 사용되며, 색상, 이미지, 반복, 위치 등을 지정할 수 있습니다. background 속성은 여러 개의 세부 속성을 축약하여 사용할 수 있으며, 복잡한 배경을 효과적으로 관리할 수 있는 도구입니다. 주요 속성들:1. background-color배경의 색상을 지정하는 속성입니다.background-color: green;2. background-image배경 이미지(요소 뒤에 나타나는 이미지)를 지정하는 속성입니다.background-image: url('example.jpg');3. background-repeat배경 이미지의 반복 방식을 설정하는 속성입니다.기본값: repeat (이미지가 수평과 수직으로 반복)옵션:no-repeat: 이미.. 2024. 10. 3.
CSS를 활용한 a태그 버튼 예제 1 CSS 애니메이션을 활용하여 태그로 만든 버튼에 다양한 애니메이션 효과를 추가할 수 있습니다. 아래는 버튼에 마우스를 올렸을 때 색상이 변하고, 크기가 살짝 커지는 애니메이션 효과를 적용한 예제입니다. Hover Me!" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Hover Me!.container { text-align: center;}/* 애니메이션 버튼 스타일 */.animated-button { background-color: #4CAF50; /* 기본 배경색 */ color: white; padding: 15px 30px; text-align: center; text-decoration: none; font-size.. 2024. 10. 3.
CSS로 스크롤바 스타일 만들기 CSS로 스크롤바를 스타일링할 수 있습니다. 스크롤바 스타일링은 웹킷 기반 브라우저(Chrome, Safari 등)와 Firefox에서 조금 다르게 처리됩니다. 여기서는 각각의 브라우저에서 스크롤바를 스타일링하는 방법을 설명하겠습니다. 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... " data-ke-type="html">.. 2024. 10. 2.

티스토리툴바