본문 바로가기

개발(Development)/HTML, CSS11

[Meta태그 og] 카카오톡 링크 공유 미리보기 반영 안될 때, 캐시 초기화 방법 # Meta 태그 OG(Open Graph) 속성 HTML Meta 태그에 오픈그래프(og) 속성을 설정하면, 카카오톡, 페이스북 등에 링크 공유시, [제목, 설명문, 이미지] 등을 미리보기 할 수 있게 해준다. - 위의 html 링크를 카톡 공유시, 아래와 같이 이미지, 제목, 설명, url이 미리보기로 노출된다. 그런데 가끔 Meta 태그의 og 속성 값을 변경해도, 카톡에서 반영이 되지 않을 때가 있다. 원인은 카카오톡 내부에서 OG 정보를 캐시해두고 처리하기 때문이다. 카카오톡은 OG 캐시를 초기화하는 방법을 제공해준다. # 카카오톡 공유링크 OG 캐시 초기화 방법 아래 사이트에 접속하여, URL 을 입력하고 초기화 버튼을 눌러주면 된다. 즉시 카카오톡 OG 캐시가 삭제되고, 변경사항이 바로 반영.. 2022. 8. 23.
[HTML] input:number 의 숫자 최대값, 최소값 설정 방법 # input 숫자 입력 HTML에서 숫자만 입력 받고자 할 때는 number 타입의 input태그를 사용해주면 된다. # input 숫자 최대값/최소값 최대값은 max 속성값으로, 최소값은 min 속성값으로 설정해주면 된다. 아래 코드는 1~5사이의 숫자만 입력 받는다. # input 숫자 플러스/마이너스 플러스 정수값만 입력 받으려면 min = 1 로 설정해주면 된다. 마이너스 정수값만 입력 받으려면 max = -1 로 설정해주면 된다. input태그로 소수점 숫자를 입력 받으려면 step속성을 활용하면 된다. 자세한 내용은 아래 글을 참고 [HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) 2021. 7. 7.
[HTML] img 태그: 샘플 더미 이미지 사이즈별 적용 방법 HTML개발하다보면, img 태그를 사용하면서 수많은 사이즈에 맞는 이미지를 미리 적용해둬야 할 때가 있다. 매번 그런 이미지를 편집해서 사용하는건 대단히 번거로운 일이다. 그럴 때 사용하기 좋은 방법이 있다. 사이즈별 더미? 샘플? 이미지를 제공해주는 사이트를 이용하는 것인데, 아래처럼 이미지 소스 경로를 설정해주면 된다. http://placehold.it/ 경로(url) 뒤에 원하는 가로X세로 사이즈를 설정해주면 된다. 즉, 아래 html 파일을 실행해보면 아래와 같은 결과가 나온다. 아주 유용하게 img태그에 샘플 이미지를 미리 적용해 둘 수 있는 방법이다. 더 자세한 사용 방법은 아래 사이트를 참고 https://placeholder.com 2021. 7. 7.
[HTML/CSS] 자식 태그의 margin-top이 부모 div에 적용되는 현상 해결 방법 html/css 개발을 하다가 당황스러운 일을 겪어서 기록으로 남겨둔다. 중첩된 div 태그 구조에서, 자식 div에 margin-top을 주었는데, 부모 div에 margin-top이 적용되어버리는 사태가 발생한 것이다. (자식이 block 속성이면 발생하는듯 하다.) 즉, 아래 코드를 실행하면, 자식 아래와 같은 결과물이 나온다. 원래 기대했던 결과물은 이것이었을텐데 말이다. 상식적인 상황은 아니지만, 마진병합/마진상쇄(margin-collapse)현상의 일종이라고 한다. "부모 블록에 테두리, 패딩 등이 없고 별도의 min-height, max-height 등이 설정되지 않은 경우, 자식의 margin-top은 부모의 margin-top으로 적용된다." 해석이 맞나... 자세한 내용은 mozzila.. 2021. 6. 7.
HTML Canvas 왜곡현상(선 두께 불일치, 비대칭, 비율 불균형 등) 해결 방법 HTML에서는 아래와 같이 canvas태그를 이용하면, 쉽게 그림을 그릴 수 있다. 오른쪽으로 갔다가 아래로 내려가는 선을 그리는 코드다. (나름대로 상세하게 주석을 달았다) 그런데 웹페이지에 띄워보면... 가로 세로 선 두께가 다른 것을 알 수 있다. 아주 기초적인 내용이지만, 모르고 있으면 난감한 내용이다. 이 현상은 그래픽적인 요소를 CSS로 별도 처리하는 좋은(?) 습관으로 인해 발생하는 문제다. (내가 그랬다.... ㅋㅋㅋ) MDN사이트 canvas 튜토리얼을 보면 이런 문장이 있다. Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, .. 2021. 3. 28.
[HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) 아래와 같이 number 타입의 input 입력창을 생성하면, 아래처럼 소수점 입력이 안 된다... 자바스크립트 없이 해결하는 방법이 있다. 즉, INPUT 엘리먼트의 속성 조정만으로 "소수점 입력"을 가능하게 할 수 있다. # INPUT:number 태그에 소수점 숫자 입력 방법 => step 속성 설정 1. 소수점 1자리까지 입력 설정: input태그에 step="0.1" 속성 추가 2. 소수점 2자리까지 입력 설정: input태그에 step="0.01" 속성 추가 이렇게하면 소수점 숫자도 입력이 가능해진다. (물론 number 타입이므로, 숫자외의 문자 등은 입력이 불가하다) # step 속성이란? : step속성은 input 입력창의 숫자 간격을 설정하는 속성이다. : number 타입의 inpu.. 2021. 1. 22.
[CSS] 아이폰(iOS) input, button 기본 테두리, 색(그라데이션) 스타일 제거 방법 모바일 웹을 개발해보면, iOS에서 input의 테두리나, button의 색상이 내가 설정한대로 적용되지 않는 현상이 나타난다. # 문제 현상 버튼(input[type=submit])은 그라데이션이 먹고,(그림자도 있는듯?) 입력창도 테두리(border-radius) 등이 정상 작동하지 않는다. 아이폰 사파리 브라우저에 적용된 기본 스타일 때문인데, 쉽게 해결할 수 있다. # iOS 사파리 기본 스타일 제거 방법 1. -webkit-appearance 속성을 none으로 설정 해준다.(CSS에 아래와 같이 작성하고 시작.) 2. -webkit-border-radius 속성을 0으로 설정 해준다.(CSS에 아래와 같이 작성하고 시작.) input, textarea, button { appearance: n.. 2021. 1. 21.
[HTML] 스마트폰(모바일) input 입력창 포커스 시, 화면 확대 방지 방법 스마트폰으로 모바일 웹에 접근시, input 입력창을 터치(클릭)하여 포커스가 먹으면, 화면이 확대될 때가 있다. 당췌 어떻게 해결해야할지 난감할 수 있지만, 해결책은 아주 쉽고 간단하다. #모바일 화면 자동확대 방지 방법 사이에 viewport 메타태그를 아래와 같이 설정해주면 된다. 필요에 따라 maximum-scale=1 속성을 추가하여 확대 배율을 설정할 수도 있다. 도움이 되셨길 바랍니다. (참고) viewport 속성 width=device-width : 화면 너비를 기계 너비로 맞춤 initial-scale=1.0 : 초기 화면 크기 배율 설정 minimum-scale=1 : 최소 화면 크기 설정 maximum-scale=1 : 최대 화면 크기 설정 user-scalable=no : 사용자가.. 2021. 1. 20.
[HTML] input:radio 여러개(다중) 선택될 때, 하나만(단일) 선택 방법 radio 타입의 input 태그를 사용하다보면, 가끔(?) 라디오 버튼이 한번에 여러개가 선택되는 문제가 발생할 때가 있다. (물론 의도할 때도 있지만...) 즉, 아래와 같이 라디오 버튼을 만들면, 10대 20대 30대 아래와 같이 여러개가 동시에 선택되는 것이다. 라디오 버튼은 보통, 특정 변수 하나에 특정 값 하나만 할당하기 위해 많이 사용한다. 이를 위해 name 속성을 활용하는 것으로 알고 있다. 즉, 라디오 버튼들의 name 속성을 모두 동일하게 주어야, 라디오 버튼 간에 연관성(?)이 확보되어 단 하나만 선택할 수 있게 된다. 아래처럼 name 속성을 동일하게 주면, 10대 20대 30대 아래처럼 단 하나만 다중택일 된다. 해결 완료! 2021. 1. 19.