본문 바로가기
728x90
반응형

Coding/HTML & CSS72

[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (x자 모양) #1 [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (x자 모양) #1 이번 시리즈는 다양한 모양의 햄버거버튼을 만드는 방법입니다 !! 예제코드 결과 2024. 2. 26.
[Html & CSS] 헤더 항상 위에 고정 시키는 방법 !! (header sticky 주는 방법) [Html & CSS] 헤더 항상 위에 고정 시키는 방법 !! (header sticky 주는 방법) 헤더에 위치한 메뉴바가 스크롤 내려도 항상 고정 되게 하는 방법입니다 ㅎ 예제코드 My Sticky Header Scroll down to see the sticky effect. This header will stick to the top of the page when you reach its scroll position. Scroll back up to remove the sticky effect. More content to show the scroll effect... Scroll down to see the sticky effect. This header will stick to the top .. 2024. 2. 23.
[Html & CSS] 백그라운드(background-color) 투명하게 만드는 방법 !! [Html & CSS] 백그라운드(background-color) 투명하게 만드는 방법 !! 아래와 같이 주시면 백그라운드가 투명하게 됩니다 :) background-color:transparent; 2024. 1. 2.
[Html & CSS] 초간단 자동으로 움직이는 사진 슬라이드 예시 코드 !! [Html & CSS] 초간단 자동으로 움직이는 사진 슬라이드 예시 코드 !! 안녕하세요. 자동으로 사진이 움직이는 슬라이드 예시 입니다 ㅎ 참고하셔서 사용하시면 됩니다 :) 예제코드 결과값 2023. 11. 15.
[Html & CSS] a href 새창, 현재창 에서 오픈 하는 방법 !!(+ 설명) [Html & CSS] a href 새창, 현재창 에서 오픈 하는 방법 !!(+ 설명) HTML에서 태그(anchor 태그)를 사용하여 링크를 만들 때, 링크가 어떻게 열릴지 지정할 수 있습니다. 새 창이나 탭에서 링크를 열려면 target 속성을 _blank로 설정하고, 현재 창에서 링크를 열려면 target 속성을 _self로 설정하거나 target 속성을 생략합니다. 예시코드 Visit Example.com Visit Example.com Visit Example.com Visit Example.com target 속성은 다음과 같은 여러 값을 가질 수 있습니다: _blank: 링크를 새 창이나 탭에서 엽니다. _self: 링크를 현재 창이나 탭에서 엽니다. 이것은 기본값이므로, target 속성을.. 2023. 11. 11.
[Html & CSS] span 태그에 onclick 온클릭 이벤트 넣는 방법 !! [Html & CSS] span 태그에 onclick 온클릭 이벤트 넣는 방법 !! 간단한 코드라 아래 예제보시고 필요하게 사용하시면 될 것 같네요 ㅎ 예제코드 span 태그입니다 2023. 11. 8.
[HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시) [HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시) "visibility: hidden" 과 "display: none" 은 HTML 요소를 화면에서 숨기는 데 사용되는 CSS 속성이지만, 둘 사이에는 중요한 차이점이 있습니다. visibility: hidden 요소가 보이지 않게 되지만, 레이아웃에서 여전히 공간을 차지합니다. 즉, 요소는 보이지 않지만, 페이지 레이아웃에 영향을 미칩니다. "visibility: hidden"은 다른 visibility 값(예: visible 또는 collapse)으로 쉽게 전환할 수 있어, 요소를 보이거나 숨길 때 레이아웃이 변경되지 않기를 원할 때 유용합니다. display: .. 2023. 11. 7.
[Html & CSS] input에 검색 시 정규식으로 영어랑 숫자만 입력 시키는 방법 !! [Html & CSS] input에 검색 시 정규식으로 영어랑 숫자만 입력 시키는 방법 !! 정규식 만드는김에 검색창 모양으로 만들어 봤습니다 :) 아래 주석에 따라 한글만 허용도 가능합니다 ㅎ 예제코드 🔍 결과값 🔍 2023. 8. 10.
[Html & CSS] 사이즈별 파비콘(favicon) 만드는 방법 !! [Html & CSS] 사이즈별 파비콘(favicon) 만드는 방법 !! 파비콘 생성 사이트에 접속합니다. https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 파일 선택 후 원하는 사진을 넣고 생성 -> 생성 된 사진 파일들과 링크를 html 에 적용 하면 끝 ! (적용은 태그 안에 넣어주시면 됩니다 :) 전 보통 타이틀 아래 넣습니다.) 결과값 2023. 7. 25.
728x90
반응형