본문 바로가기

전체 글48

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.
display: flex;의 개념과 속성 display: flex는 CSS에서 요소의 배치와 정렬을 제어하는 데 사용되는 매우 유용한 레이아웃 방식입니다. 플렉스 박스(Flexbox)는 특히 여러 요소의 크기를 동적으로 조절하고 정렬하기 위한 강력한 도구로, 다양한 화면 크기와 디바이스에 맞는 반응형 레이아웃을 손쉽게 구현할 수 있습니다. 기본 개념:Flex Container: display: flex가 적용된 요소를 "플렉스 컨테이너"라고 합니다. 이 컨테이너 안의 자식 요소들이 플렉스 항목으로 배치됩니다.Flex Items: 플렉스 컨테이너 안의 직접적인 자식 요소들을 "플렉스 아이템"이라고 합니다. 이 아이템들은 유연하게 배치되고 정렬됩니다.주요 속성들:1. Flex Container 속성flex-direction: 플렉스 아이템들이 배치.. 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.

티스토리툴바