본문 바로가기

HTML & CSS16

[HTML & JavaScript] a태그 클릭 시 사용자에게 확인 받고(confirm) 함수 실행하기 / a태그 onclick 함수에서 href 속성 사용하기 / confirm 받은 후 form 제출하기 *코드에서 jQuery를 사용합니다. a태그를 클릭한 사용자가 confirm 창에서 '확인'을 누른 후에 form이 전송되게 하고 싶다면 어떻게 해야 할까? 또는, 사용자에게 확인을 받고 난 후 a태그의 href 속성에 있는 링크로 이동시키고 싶다면? 1. 사용자에게서 confirm 받고 form 제출하기 코드가 세련된 느낌은 아니지만, a태그의 상위 태그를 선택해서 form에 있는 내용들을 즉각 submit할 수 있다는 점이 장점이다. 등록하기 2. 사용자에게서 confirm 받고 href 링크 태우기 간단한 코드만으로 유저가 링크 실행 여부를 선택하게 할 수 있다. 취소하기 3. 사용자에게서 confirm 받고 ajax로 form 제출하기 script를 사용할 수 있는 경우, a의 onclick에서 .. 2024. 3. 13.
[웹폰트] Windows에서 웹폰트가 깨지는(흐릿하게 보이는) 문제 일부 해결 블로그 폰트를 바꾸고 깨달았다. 웹폰트를 쓰면 유난히 폰트가 블러 처리 된 듯이 뿌옇게 보이는 거다. 분명 Google fonts 사이트에선 깔끔하고 멀쩡했던 글씨가, 아무리 사이즈가 작아졌다지만 너무너무 흐릿하다. Windows 메모장에 글을 쓰면 선명하게 나오지 않는가. 구글링 해보니 같은 고민을 하셨던 분이 있었다. 원인은 OS라고 한다. Mac에서는 괜찮은데 Windows에서 문제인 거라고. 아래와 같이 CSS 코드를 추가해줬다. CSS 코드 /* 폰트를 깔끔하게 하기 위한 코드 추가 */ html, body { -webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: subpi.. 2023. 6. 16.
[Html] a 태그의 다양한 역할 2020.1.28 9:10 수정 1. 외부링크 열기/이동 네이버 2. 다른 html 파일로 이동 123 3. 같은 페이지의 특정태그가 있는 곳으로 이동 tomato 4. *** 자바스크립트 실행 *** What's my name? 5. 이미지 열기 풍경 사진 나무 사진 2020. 1. 15.
[CSS] word-break 속성 word-break: keep-all 텍스트를 띄어쓰기 전까지 보존함. 즉 컨테이너 밖으로 튀어나갈 수 있음 word-break: break-all 텍스트를 글자별로 쪼개서 컨테이너 안에 맞춤 2020. 1. 10.
[HTML&CSS&JS] 자연스럽게 슬라이딩되는 아코디언 메뉴 HTML 섹션1 어쩌고 저쩌고... 섹션2 어쩌고 저쩌고... 섹션3 어쩌고 저쩌고... CSS /* 여닫는 버튼 */ .accordion { background-color: #eee; color: #444; /* 커서 모양 변경 */ cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; font-size: 15px; transition: 0.4s; } /* 클릭됐을 때 배경색 추가(js로 .active 클래스 추가), 호버했을 때 */ .active, .accordion:hover { background-color: #ccc; } /* 아코디언 패널(평소엔 숨겨져 있음) */ .panel { .. 2019. 10. 18.
[생활코딩] HTML - img 태그의 주요속성 img 태그의 주요속성 - width : 해당 값만큼 이미지의 가로폭 설정 - height : 해당 값만큼 이미지의 세로폭 설정 - alt : 이미지가 깨졌을 때/찾을 수 없을 때 해당 값을 화면에 표시해 줌. 시각장애인이 프로그램을 사용해 이 값을 읽을 수 있음. altermative text(대체하는 글)의 줄임말 - title : 이미지에 마우스를 올렸을 때 해당 값을 말풍선(tooltip)에 표시해 줌 2019. 6. 3.