Bon Voyage!

Visual Studio Code를 비롯한 다양한 소스 코드 편집기를 사용하다보면 파일 인코딩 방식 저장 시 UTF-8과 UTF-8(BOM)으로 나누어 저장할 수 있는 걸 보실 수 있습니다. UTF-8과 UTF-8(BOM) 차이를 알기 위해선 먼저 BOM에 대해 알아봐야 합니다. BOM은 바이트 순서 표시(Byte Order Mark)의 약자로 유니코드 문자 U+FEFF를 문서의 가장 앞에 추가하여 텍스트를 읽는 프로그램에 정보를 전달합니다. 유니코드 표준은 UTF-8에 BOM을 허용하지만 필수나 권장 사항은 아니고 UTF-8로 인코딩된 것을 표시하는 용도밖에 없다고 합니다. UTF-16이나 UTF-32는 바이트 순서에 따라 인코딩 방식이 나뉘기도 합니다. 그렇기 때문에 BOM이 존재하는 경우 다른 인코..

Html에서는 마우스 뿐만 아니라 키보드의 Tab를 이용해 포커스 이동이 가능합니다. 일반적으로 tabindex를 사용하지 않더라도 Html 마크업 순서에 맞게 Tab 이동이 가능합니다. 사용자와 상호작용이 가능한 태그들은 기본적으로 키보드로 포커스가 잡히게 되어 있는데 대표적으로 input, select, button, a 같은 태그를 예로 들 수 있고 이 태그들은 tab키나 shift+tab를 사용해 앞뒤로 포커스 이동을 자유롭게 할 수 있습니다. lable, h, p, span 같은 태그들은 포커스 이동이 되지 않지만 tabindex를 사용해 가능하도록 만들 수 있습니다. 또 tabindex를 사용하면 포커스 이동을 제외하거나 해당 페이지에서 탭이동 시 가장 먼저 포커스 이동이 시작되게 만들어 줄 ..

웹 개발을 하거나 관련 일을 하게 될 경우 HTTP Header를 확인해야 할 경우가 있습니다. 피들러 같은 툴을 사용해도 좋지만 개인적으로는 크롬이나 기타 브라우저에서 개발자 도구를 통해 확인하는 것이 좀 더 편한 것 같습니다. 오늘은 크롬에서 개발자 도구를 사용해 HTTP Header를 확인하는 법을 한번 알아보겠습니다. 우선 크롬 브라우저를 실행합니다. 저는 구글에서 시작해보도록 하겠습니다. 네이버나 다른 사이트를 띄워놓고 실행해도 상관없습니다. Ctrl + Shift + I 나 F12 을 눌러서 크롬 개발자 도구를 활성화시킵니다. 초기 값은 Elements 탭으로 설정되어 있기 때문에 Network 탭을 클릭해줍니다. 아무 것도 안뜨는 것에 놀라지 말고 Ctrl + R 나 F5 를 눌러줍니다. 위..

HTML에서 첨자 넣는 법을 알아보겠습니다. 첨자는 주석을 넣기 위해서 많이 사용합니다. 문서를 보시다보면 부가적인 설명을 나타내기 위해서 첨자를 넣은 후 문서의 하단이나 우측 등에 세부 설명을 적는 경우를 보신 적이 있으실 겁니다. HTML에서는 sub 태그와 sup 태그를 사용하면서 첨자를 넣을 수가 있습니다. 둘다 첨자를 넣을 때 사용하는 태그이지만 차이가 있습니다. 간단한 예를 들어 두 태그의 차이와 사용법을 알아보도록 하겠습니다. 1. 태그 : 아래첨자를 넣고 싶을 때 사용합니다. subscript를 의미합니다. 이것은 아래첨자아래첨자 입니다. 결과 : 이것은 아래첨자아래첨자 입니다. 빨간색으로 표시된 부분이 sub 태그 부분입니다. 2. 태그 : 윗첨자를 넣고 싶을 때 사용합니다. super ..

특이한 이슈가 발생했습니다. 웹을 비롯해 안드로이드 폰에서는 정상적으로 클릭이 되는 페이지가 아이폰에서는 클릭을 두 번해야 동작하는 현상이 발생한 겁니다. 아이폰에서는 사파리 브라우저 뿐만 아니라 크롬 브라우저로 실행을 해도 동일한 현상이 발생했습니다. 이런저런 테스트를 하면서 결국 해결했는데 그 내용에 대해서 공유하고자 합니다. 해당 클릭 이슈는 a태그에서 발생했습니다. 처음엔 href 속성에 자바스크립트를 선언한게 문제인가 생각했고 onclick으로 스크립트를 옮겨 보고 jquery가 문제인가해서 javascript로 바꾸기도 하고 다른 스크립트들과 충돌이 나나해서 함수 이름도 바꿔보고 심지어는 그 이벤트말고는 모든 소스코드를 지워보기도 했습니다. 하지만 여전히 아이폰에서는 첫번째 터치시에는 이벤트가..