개발이야기/HTML&CSS10

• 

  [HTML&CSS] HTML contenteditable 속성 사용법, 예제 (HTML 요소 편집) HTML의 contenteditable 속성은 사용자가 웹 페이지의 요소를 직접 편집할 수 있도록 해주는 속성입니다. 아래 예제코드는 contenteditable 속성을 사용하여 div 내용을 편집하고 이벤트 처리를 통해 변경된 텍스트를 출력하고 있습니다. 1. 사용법 여기에 내용을 직접 입력하세요. 위의 코드에서 요소에 contenteditable 속성을 추가하면 해당 요소가 편집 가능한 상태가 됩니다. 사용자는 해당 요소를 클릭하여 내용을 수정할 수 있습니다. 블로그 게시물, 웹 문서, 댓글 등 다양한 웹 콘텐츠를 편집할 때 유용하게 사용될 수 있습니다. 에디터와 비슷한 환경에서 웹 페이지의 내용을 편집할 수 있어서 작성 및 편집 과정이 보다 편리해집니다. 2. 예제 이 부분을 클릭하고 텍스.. 개발이야기/HTML&CSS 2024. 5. 16.

• 

  [HTML&CSS] CSS 우선 순위 변경하기 (!important) 사용법, 예제 아래 소스코드는 !important 사용해서 다른 스타일 규칙보다 우선 순위를 가지는 것을 확인하는 예제 코드입니다. 사용법 property: value !important; //예제 p { color: red !important; } 모든 요소의 텍스트 색상은 빨간색이 될 것입니다. 비록 다른 스타일 규칙에서 텍스트 색상을 정의하려고 하더라도 !important를 사용한 규칙이 다른 규칙보다 우선 순위를 가지므로 무시됩니다. 예제코드 This is a red text. This is a normal text. This div has an important background color. This div has a normal background color. This div has important st.. 개발이야기/HTML&CSS 2023. 10. 13.

• 

  [HTML&CSS] :not(), :has() 가상 클래스 선택자 사용하기 (예제, 설명) 아래 소스코드는 :not()과 :has() 선택자를 사용하여 HTML 요소를 선택하고 다양한 스타일을 적용하는 예제입니다. 설명 1. :not() 선택자 ㅇ :not() 선택자는 괄호 안에 지정된 조건을 만족하지 않는 요소를 선택합니다. 이 선택자는 특정 요소나 클래스를 제외하고 스타일을 적용하고 싶을 때 유용합니다. 2. :has() 선택자 ㅇ :has() 선택자는 괄호 안에 지정된 조건을 만족하는 자식 요소를 포함하는 부모 요소를 선택합니다. 이것은 부모와 관련된 스타일링이나 자식의 존재 여부에 따라 스타일을 적용하고 싶을 때 유용합니다. p:not(.highlight) { color: red; } ㅇ .highlight 클래스를 가진 요소를 제외한 모든 요소의 글꼴 색상을 빨간색으로 변경합니다. d.. 개발이야기/HTML&CSS 2023. 10. 5.

• 

  [HTML&CSS] abbr, cite 태그 사용해서 약어와 줄임말, 인용과 출처 표시하기 아래 소스코드는 와 태그의 title 속성을 활용해서 줄임말과 인용된 추가 정보를 제공하고 있습니다. 간단한 소스코드이니 확인하시고 응용하시면 됩니다. 태그 설명 1. 태그 ㅇ 약어 또는 줄임말을 정의하고 해당 약어의 전체 의미를 제공하는 데 사용됩니다. ㅇ 옵션(title) : 약어나 줄임말의 전체 설명을 포함하며, 마우스를 해당 약어 위로 올렸을 때 툴팁으로 표시됩니다. 이것은 주로 약어의 실제 의미를 제공하는 데 사용됩니다. 2. 태그 ㅇ 인용된 작품의 제목을 나타내는 데 사용되는 HTML 태그입니다. 이 태그는 주로 웹 페이지에서 책, 영화, 음악 앨범, 논문 등과 같은 작품의 제목을 강조하고 시맨틱 웹(Semantic Web)에서 작품에 대한 정보를 제공하는 데 활용됩니다. ㅇ 옵션(title).. 개발이야기/HTML&CSS 2023. 9. 25.

• 

  [HTML&CSS] details, summary 태그로 아코디언 메뉴 만들기 (접기/펼치기) 아래 소스코드는 와 태그를 함께 사용하여 아코디언 메뉴(접기/펼치기)를 구현하였습니다. 태그 펼치기/접기 가능한 세부 정보를 나타내는 데 사용됩니다. 펼쳐진 정보(내용)와 그 정보를 요약하는 제목(요약)을 함께 표시하는 데 사용됩니다. open 속성 : open 속성을 추가하면 페이지를 로드할 때 세부 정보가 열린 상태로 표시됩니다. 태그 요소 내에서 세부 정보를 요약하는 제목을 나타냅니다. 사용자가 세부 정보를 열거나 접을 때 클릭할 수 있는 버튼 또는 텍스트로 표시됩니다. 요소는 요소 내에서 하나만 사용됩니다. 사용자가 클릭하면 세부 정보를 제어하는 토글 동작을 활성화합니다. 제목 이 부분은 보통 내용에 대한 간단한 설명입니다. 추가 정보 보기 여기에는 추가 정보가 들어갑니다. 이 부분은 사용자가 클.. 개발이야기/HTML&CSS 2023. 9. 8.

• 

  [HTML&CSS] datalist 태그 사용해서 자동완성 구현하기 요소는 HTML5의 폼 요소 중 하나로, 사용자가 입력 필드에 값을 입력할 때 자동 완성 제안을 제공하는 데 사용됩니다. 요소와 함께 사용되며, 사용자에게 선택할 수 있는 옵션 목록을 제시하고 선택할 수 있습니다. 요소의 list 속성을 사용하여 요소를 참조하며, 입력 필드와 연결된 옵션 목록이 자동으로 표시됩니다. 키보드를 사용하여 옵션 목록을 탐색하고 선택할 수 있으며, 마우스를 사용하여도 선택할 수 있습니다. 도시를 선택하세요: 개발이야기/HTML&CSS 2023. 9. 8.

• [HTML&CSS] img 태그 이미지 없을 때 대체 이미지 띄우기, 안 보이게 하기 (onerror) 아래 코드는 img 태그의 onerror 속성을 사용하여 오류 발생 시 대체 이미지를 표시하는 코드입니다. 저는 함수를 통해서 이미지 로딩 오류가 발생했을 때 실행되면서 이미지 경로를 변경하고, alt 속성까지 변경하였습니다. 대체 이미지가 필요 없으시면 오류 발생 시 이미지 요소를 숨기는 코드를 작성하시면 됩니다. 개발이야기/HTML&CSS 2023. 9. 8.

• 

  [HTML&CSS] 텍스트, 이미지 깜빡이는 애니메이션 효과 주기 아래 소스 코드는 CSS를 사용하여 텍스트와 이미지에 깜빡이는 애니메이션 효과를 적용하는 예시입니다. 안녕하세요. 반갑습니다. 개발이야기/HTML&CSS 2023. 7. 31.

• 

  [HTML&CSS] 색상 선택하기 (color picker) 사용법, 예제 color picker는 사용자가 웹 페이지에서 원하는 색상을 선택할 수 있게 해주는 기능을 제공합니다. 이를 통해 사용자는 색상 코드를 직접 입력하지 않고도 원하는 색상을 쉽게 선택할 수 있습니다. HTML color picker는 일반적으로 태그를 사용하여 구현합니다. 1. 특징과 사용법 기본 색상 표시: 컬러 피커를 열었을 때 기본으로 표시되는 색상은 브라우저마다 다를 수 있지만, 일반적으로 현재 시스템에서 사용 중인 색상 또는 기본 색상 팔레트가 표시됩니다. 색상 선택: 사용자는 마우스로 컬러 피커 내에서 원하는 색상을 클릭하고, 드래그하여 색상을 선택할 수 있습니다. 색상 값 입력: 사용자는 컬러 피커 옆에 나타난 색상 코드(주로 HEX 값)를 직접 입력하여 원하는 색상을 선택할 수도 있습니다... 개발이야기/HTML&CSS 2023. 7. 19.

• 

  [HTML&CSS] 웹 페이지 가로모드 체크하기 (CSS 미디어 쿼리) CSS 미디어 쿼리를 사용하여, 디바이스가 세로 방향으로 방향을 바꾸었을 때, '가로모드로 변환해 주세요'라는 메시지를 삽입하는 스타일 코드입니다. orientation이 protrait인 경우 body에 "left", "top", "right", "bottom" 속성을 0으로 설정하여 뷰포트 전체를 차지하도록 하고, "background" 속성을 #000으로 설정하여 배경색을 검은색으로 설정합니다. 메시지는 수평/수직 가운데 정렬했고, "z-index"를 통해서 우선적으로 표시될 수 있도록 하였습니다. 간단한 소스 코드이니 바로 사용 가능 합니다. 가로 모드 입니다. 개발이야기/HTML&CSS 2023. 4. 14.