띠띠의 개발오답노트

HTML·Style/HTML

• 모바일에서 input 터치 시 확대되는 기능 없애기

  HTML·Style/HTML 2023. 12. 13. 13:55

  모바일로 웹에 접속하여 input을 터치하였을 때 줌 인되는 것을 방지해 주는 코드이다. initial-scale : 초기 scale user-scalable : 확대 기능을 사용 유무 maximum-scale : 최대 scale 설정 width=device-width : 디바이스 사이즈에 맞춤

  Read More
• [HTML] 데이터 속성 사용하기 (data-*)

  HTML·Style/HTML 2023. 4. 25. 23:00

  데이터 속성 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인됨. 어느 element에서든 data-로 시작하는 속성은 무엇이든 사용할 수 있음. data- 뒤에 붙는 이름은 대문자를 포함할 수 없다. ... 문법 Javascript에서 접근하기 getAttribute() element.getAttribute(attributeName); dataset element.dataset.attributeName element.dataset[attributeName] 특정 속성 값을 추출하거나, 데이터 속성 값을 설정할 수 있다. element.dataset.key = value 예를 들어, const key = document.querySelector('.ke..

  Read More
• 웹 표준(Web Standards)과 시멘틱 태그(Sementic Tag)

  HTML·Style/HTML 2023. 4. 20. 02:38

  ▶ 웹 표준(Web Standards) W3C(World Wide Web Consortium)에서 정의한 웹 기술 규격 HTML, CSS, JavaScript 등의 웹 기술에서 지켜야 할 규칙과 권장사항을 제공 웹 표준을 지키는 이유 웹 페이지가 모든 브라우저와 디바이스에서 일관된 방식으로 보여져 호환성을 보장한다. 일부 브라우저나 디바이스에서 웹 페이지가 제대로 표시되지 않는다면, 사용자 경험을 저해시키고 불편을 초래한다. 장애인, 고령자, 저시력자 등 정보취약계층의 사용자들의 접근성을 높인다. 스크린 리더를 이용하는 사용자는 웹 페이지의 구조와 내용을 정확히 파악하기 위해 웹 표준을 준수한 코드가 필요하다. 검색 엔진 최적화(SEO)를 향상시킨다. 웹 표준을 준수한 페이지를 더욱 잘 인식하고 높은 순..

  Read More
• [html] <input>은 항상 <label>과 함께 쓰자

  HTML·Style/HTML 2023. 4. 16. 22:56

  ▶ 은 해당 input이 어떤 입력인지 설명해 주는 역할을 한다. 접근성을 위해서도 좋다. checkbox나 radio 타입에서는 필수이다. ▶ 의 id 속성 값 - 의 for 속성 값을 매핑시킨다. 이름 : ​ ※ label 안에 컨텐츠를 나타내는 텍스트 외에 다른 요소를 넣는 것은 권장하지 않음!

  Read More
• [HTML] 인용문을 삽입할 때는 <blockquote>와 <q>를 사용하자

  HTML·Style/HTML 2023. 4. 3. 14:03

  ▶ : block 요소 기본 스타일링으로 들여쓰기가 적용된다. 태그 내에 작성하면 안된다. 태그는 내부에 있는 자식 태그가 블록 요소일 경우 자동으로 태그가 닫히기 때문 긴 인용문을 넣을 때 사용하기 적절하다. ▶ : inline 요소 기본 스타일링으로 큰따옴표(" ")가 적용된다. 짧은 인용문을 넣을 때 사용하기 적절하다. ✔ 속성 ** cite : 인용문의 출처 문서나 메시지를 가리키는 URL을 삽입. 인용문의 맥락 혹은 출처 정보를 가리킬 용도

  Read More