728x90
반응형

개발/HTML5

iOS에서 input에 적용된 shadow 효과 제거하는 방법 (Remove iOS input shadow)

iOS에서 input 태그에 위와 같이 shadow 효과가 적용되는 점을 확인하게 되었습니다. iOS에서 input 태그에 기본적으로 적용된 shadow 효과를 제거하기 위해서는 CSS 속성 중에 appearance 속성을 제거함으로써 input 태그에 적용된 shadow 효과를 제거할 수 있습니다. appearance 속성 적용 예시는 아래와 같습니다. 예시코드 input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } appearance 속성이 무엇인지 알고 싶다면 아래를 참고하세요. appearance (-moz-appearance, -webkit-appearance)..

2020.11.15 게시됨

개발/HTML5

HTML 모바일에서 전화걸기 예제(초간단) (How to Create a Click to Call Link Using HTML)

핸드폰에서 웹사이트를 이용할 때 아래와 같이 전화번호를 누르면 바로 핸드폰 기본 전화걸기 창이 뜨는 것을 본적이 있을 것입니다. 이번 포스팅에서는 HTML a 태그를 활용해서 전화걸기 기능을 간단히 구현하는 방법에 대해서 소개하도록 하겠습니다. HTML a태그를 활용해서 전화거는 방법 HTML a태그를 활용해서 전화거는 기능을 구현하는 방법은 굉장히 간단합니다. 코드는 아래와 같습니다. href 속성값에 url을 넣는 대신 tel:전화번호 형식으로 넣으면 끝! // 예제 전화번호: 123-1234-1234 // 실제 사용 예시 전화번호: 123-1234-1234 전화번호: 123-1234-1234 동작 예시 위에서 예시로 기입한 코드의 동작 원리는 아래와 같습니다. PC에서 href에 tel:전화번호 값..

2020.11.06 게시됨

개발/HTML5

input 커서(caret) 색상 바꾸는 방법 (How to change input box cursor color)

웹사이트에서 사용자의 입력 값을 받기 위해 input 태그를 사용하곤 하는데요. 사이트의 특색에 맞게 input 커서의 색상을 커스터마이징을 해야할 경우가 생기게 됩니다. 이때 색상을 바꾸는 간단한 방법에 대해서 알아보도록 하겠습니다. 커서 색상을 변경하는 방법 텍스트 색상을 상속받는 경우 기본적으로 input 커서의 색상은 텍스트의 색상을 상속받습니다. input 텍스트 색상을 변경하면 자동으로 커서의 색상 또한 변경되게 됩니다. input 텍스트 색상을 변경해 보도록 하겠습니다. input { color: blue; } 커서 색상만 변경하고 싶은 경우 글자색과는 다른 색상으로 커서 색상을 바꾸고 싶다면 CSS caret-color 속성을 사용하면 손쉽게 처리할 수 있습니다. 아래와 같이 스타일을 적용..

2020.10.26 게시됨

개발/HTML5

Input 태그 테두리 하이라이트 제거하는 방법 (How to remove the border highlight on an input)

HTML 태그 중 input 태그를 사용하다 보면 현재 사용자가 어떤 input 태그를 사용하고 있는지 활성화시켜주기 위해 강조해주는 하이라이팅 효과가 생기게 됩니다. 보통 하늘색 네모난 박스의 하이라이팅이 표시되죠. 하지만 해당하는 효과를 커스터마이징하기 위해 하이라이팅 효과를 제거해야될 경우가 생기게 됩니다. 해결방법 input태그의 outline 스타일 속성을 none 으로 설정하면 간단하게 해결할 수 있습니다. input:focus { outline: none; } 포커스(focus)된 태그(input:focus)의 아웃라인(outline)을 none으로 설정하는 코드입니다. 해당 코드는 모든 input 태그의 하이라이트 효과가 제거됩니다.

2020.10.25 게시됨

개발/HTML5

HTML에서 가운뎃점 · | middle dot 쉽게 찍는 법

HTML에서 가운뎃점(· | middle dot)을 찍을 때 쉬운 방법이 있어서 공유합니다. 이 때는 HTML 유니코드를 활용하면 간단하게 해결할 수 있습니다. UNICODE U+000B7; HEX CODE· HTML CODE· HTML ENTITY· CSS CODE \00B7; // html example · // css example span { content: "\00B7"; } 예시 아래와 같이 HTML 문자 사이에 유니코드 문자를 넣어주면 아주 쉽게 가운데 점을 삽입할 수 있습니다.

2020.10.12 게시됨

개발/HTML5

html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5)

html img 태그 src 속성에 깨진 이미지 경로를 넣으면 아래와 같이 아무 이미지도 안나오게 됩니다. 하지만 이때 깨진 이미지 경로일 경우 디폴트 이미지로 설정하는 방법이 있습니다. onerror 이벤트를 활용하면 됩니다. img 태그 디폴트 이미지 설정 예시는 아래와 같습니다. // onerror 사용 예시 // or // 이벤트 핸들러 vue에서는 @error를 사용해서 처리하면 됩니다. // vue에서 사용하는 방법

2020.09.08 게시됨

개발/HTML5

DTD(Document Type Definition) - 문서 형식 정의

doctype이 무엇을 하는지 표준모드(standard mode)와 관용모드(quirks mode)의 차이 두 가지를 정의해보고자 한다. DTD란? 문서 형식 정의(DTD: Document Type Definition)는 마크업 문서의 요소와 속성등을 해석하는 기준을 명시하는 것이다. 문서 형식에는 HTML5, XHTML, HTML 3가지 유형이 존재한다. 이전 버전의 HTML(HTML2 ~ HTML4)은 SGML에 기반을 두어 만들어졌기 때문에 상세한 DTD 참조가 필요하며, 이 때문에 DOCTYPE을 선언하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다. HTMl 4.01 Strict 모드로 문서 형식을 정의할 경우 DTD를 정의하지 않으면, 관용모드(quirks mode)로 렌..

2020.02.18 게시됨

개발/HTML5

inline vs block vs inline-block 차이점 알아보기

inline vs block vs inline-block 속성을 비교해보자. display: inline ? 대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. width/height 적용불가 margin/padding-top/bottom 적용불가 line-height를 원하는대로 사용할 수 없다. display: block ? block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다. display: inline-block ? inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바..

2020.02.15 게시됨

개발/HTML5

기초부터 배우는 HTML5 1강

기초부터 배우는 HTML5 (Basic of HTML5) 인터넷이라고 하면 웹이 바로 생각이 나고, 웹과 함께 HTML이나 CSS, Javascript 같은 용어들이 같이 떠오를 겁니다. 웹에 사용되는 이 용어들이 무엇이고, 어떻게 시작이 되었는지 먼저 가볍게 살펴보면서 진행하도록 하겠습니다. HTML이란? HTML은 Hyper Text Markup Language라는 의미를 담고 있는 하나의 언어입니다. 한마디로 hyper text가 담긴 문서를 제작하는 언어라는 의미죠. 그렇다면 하이퍼텍스트가 뭔지 궁금해 하셔야겠죠? Hyper Text(하이퍼 텍스트)란 하나의 Text(문서)로 두는 것이 아니라 문서와 문서를 서로 연결시켜, 도시의 복잡한 도로처럼 상호 연결하여 접근 방식을 다양화시킨 문서를 가리킵..

2016.09.30 게시됨

728x90
반응형