input 태그의 inputmode 속성 : 가상 키보드 타입 지정하기

모바일 환경에서 특정 값을 입력해야 하는 상황이 있다고 하자. 예를 들어 회원가입을 한다고 가정했을 때, 각 input 별로 작성해야 하는 데이터가 차이가 있을 것이다.아이디나 비밀번호의 경우 문자 형식의 데이터가 입력되어야 하고,전화번호를 입력하거나 생년월일을 입력하는 경우 숫자 형식의 데이터가 입력되어야 한다. 이런 상황에서 해당 input을 누르면 가상 키보드가 등장하게 되는데,문자 입력이 필요한 상황이라면 글자 입력 자판을,숫자 입력이 필요한 상황이라면 숫자 입력 자판을 띄워서사용자가 조금 더 편하게 사용할 수 있도록 설정할 수 있게 해주는 것이 오늘 알아볼 inputmode 속성이다.  inputmodeinput 태그에는 여러가지 속성이 있다.대표적으로 type이라던지 placeholder라던지..

• format_list_bulleted Stack/HTML
• · 2024. 12. 2.
• textsms

section과 article : 같은 듯, 다른 듯 애매한 둘

HTML에서 문서의 전반적인 영역을 잡을 때 시맨틱 태그를 사용하려고 하면 떠오르는 게section 아니면 article 태그인데, 이 둘은 같아 보이면서도 차이가 있는 태그다. 애매하게 쓰면 오히려 애매한 페이지 구조가 되지만명확하게 알고 쓰면 태그만 보더라도 깔끔하게 페이지 구조가 명확해지는이 둘을 한번 정리해 보고 가자.  section과 article우선 각 태그의 정의를 살펴보면section : 논리적 측면에서 주제별 콘텐츠 그룹을 나타내는 태그article : 독립적인 콘텐츠를 나타내는 태그 두 태그에 대한 정의만 보면 두 태그의 명확한 차이를 느끼지 못할 수 있다.왜냐하면 어떠한 콘텐츠를 묶을 때 사용하는 태그라는 의미는 비슷하기 때문이다.그래서 사용하기 조금 까다로울 수 있는데 각 태그에 ..

• format_list_bulleted Stack/HTML
• · 2024. 11. 3.
• textsms

attribute와 property의 차이 : 아니 왜 같은 속성인데 왜 달라요?

한국어는 같은 글자라고 하더라도 어떤 상황에서 사용하느냐에 따라 그 의미가 달라지는 경우가 있다.예를 들어 사과, 다리, 굴 등등 그 수를 셀 수 없을 정도로 많다.물론 영어도 그런 단어들이 있다. like, fire, right 등의 단어가 있다.그렇다고 여러 국가의 동음이의어에 대해서 알아볼 건 아니다. 이번에 알아볼 내용은 웹 프로그래밍에서 attribute와 property의 차이점이다.한국어로 번역하면 두 글자 모두 '속성'이라는 동일한 의미를 포함하고 있다.하지만 같은 속성이라고 하더라도 웹 프로그래밍에서 두 속성은 분명한 차이점이 존재한다.  Attribute & Property먼저 attribute를 한 마디로 설명하면 HTML 태그에 부여한 속성이다. 검색예를 들어 위와 같은 코드가..

• format_list_bulleted Stack/HTML
• · 2024. 10. 17.
• textsms

DOM이란? : 돔돔 돔돔 돔돔

프론트엔드 개발을 막 시작하고, 자바스크립트라는 언어를 만나게 되면 DOM이라는 개념에 대해 듣게 된다.감성돔, 참돔, 허구연 아저씨의 돔구장까지는 아는데 DOM이라고 하는 생소한 개념을 마주하게 된다. 그냥 모른 채 넘어가도 자바스크립트로 DOM에 접근해 다양한 기능을 구현하는데 별 무리는 없지만그래도 기왕 흘러 흘러 여기까지 온 거면, DOM이 정말 궁금하거나 혹은 면접을 준비하고 있을 테니스리슬쩍 찍먹을 해보도록 하자. DOM 우선 DOM의 의미부터 알아보자면 영어로 Document Object Model (문서 객체 모델)의 약자고,조금 더 풀어서 설명하면 문서의 구조의 계층을 표현한 객체를 인지하는 방식을 DOM이라고 한다.사실 이 말도 어렵다. 좀 더 쉽게 풀어보자. const title = ..

• format_list_bulleted Stack/HTML
• · 2024. 10. 16.
• textsms

HTML에서 JS를 불러오는 최적의 위치와 설정은?

HTML과 CSS를 통해 웹 페이지의 뼈대와 살을 붙여봤다면, 이제 JS를 이용해 페이지가 살아 숨 쉬도록 해줘야 할 차례다.HTML 파일에다 link 태그를 통해 CSS를 불러온 것과 유사하게, JS 파일도 불러와서 사용해야 하는데어떤 위치에서 혹은 어떤 속성을 통해 사용하느냐에 따라 실행되는 시점이 달라지고이에 따라 페이지 성능에 차이가 발생할 수 있다. 갑작스레 등장하는 들기름 아니 스크립트를 어떻게 제어할 수 있을지 알아보자.head vs body// index.html Hello! // 2번 // app.jsconsole.log("hello world")첫 번째 방법으로는 head 태그 사이에 script 태그를 통해 불..

• format_list_bulleted Stack/HTML
• · 2024. 10. 11.
• textsms

HTML은 프로그래밍 언어인가요?

이 질문은 약 16년 전 스택오버플로우에 올라온 질문이다. 수많은 답변과 그 답변에 대한 댓글이 달리고, 날이 선 토론과 논쟁을 유발할 수 있다는 이유로  현재는 추가적인 의견 작성이 막혀버린 전설의 질문이다. 이 질문을 통해 개발자라면 한 번쯤 봤을 법한 수많은 밈과 짤이 나돌게 됐는데밈만 보고 '하하하 맞지, 누가 HTML을 프로그래밍 언어라고 하는 거야? 나 참 하하' 하고 웃고 넘길 수 있는데누군가 '왜 아니야?' 라고 물어봤을 때, 무심코 하늘을 멍하니 쳐다보게 된다면 오늘 이 글을 주목해 보자.HTML우선 HTML의 풀 네임을 살펴보면 Hyper Text Markup Language다. 뜻의 풀이를 보면 관련 있는 항목을 연결하는 텍스트로 구성된 언어라는 건데,쉽게 말해서 페이지의 구조를 잡는..

• format_list_bulleted Stack/HTML
• · 2024. 9. 25.
• textsms