본문 바로가기

HTML&CSS29

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.
ul li와 ol li의 차이 과 은 둘 다 목록을 생성하는 HTML 태그이지만, 각각의 용도와 표시 방식에 차이가 있습니다. 각 목록은 태그를 사용하여 항목을 정의합니다.차이점 (Unordered List - 순서 없는 목록):의미: 항목에 순서가 없을 때 사용하는 목록입니다.표시 방식: 기본적으로 항목 앞에 **불릿 포인트(●)**로 표시됩니다.사용 예시: 항목 순서가 중요하지 않은 목록을 나타낼 때 사용합니다. (Ordered List - 순서 있는 목록):의미: 항목에 순서가 있을 때 사용하는 목록입니다.표시 방식: 기본적으로 항목 앞에 **숫자(1., 2., 3.,)**로 표시됩니다.사용 예시: 항목 순서가 중요하거나 단계적인 순서가 있는 목록을 나타낼 때 사용합니다.예시순서 없는 목록 () 사과 바나나 체리" dat.. 2024. 10. 7.
dl dt dd의 정의와 예제 , , 는 정의 목록을 구성하는 HTML 요소입니다. 이 요소들은 의미를 명확하게 정의하고 설명하는 데 사용됩니다. 각각의 의미는 다음과 같습니다:: 정의 목록(Description List)을 나타냅니다.: 정의 항목의 용어(Term)를 나타냅니다.: 정의 항목의 설명(Description)을 나타냅니다.정의 목록(DL)의 구성 태그는 전체 정의 목록을 감쌉니다. 태그는 목록에서 정의하려는 용어를 나타냅니다. 태그는 그 용어에 대한 설명을 제공합니다.예시 HTML HyperText Markup Language의 약자로, 웹 페이지를 구성하는 마크업 언어입니다. CSS Cascading Style Sheets의 약자로, HTML 요소의 스타일을 정의하는 .. 2024. 10. 7.
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.

티스토리툴바