HTML8

• 

  로티 플레이어(lottie Player)를 통해 애니메이션을 추가해보자! Lottie는 JSON 기반의 애니메이션 파일을 웹이나 모바일에 쉽게 통합할 수 있는 라이브러리입니다. 이 중 LottiePlayer는 웹에서 Lottie 애니메이션을 간편하게 재생할 수 있는 웹 컴포넌트입니다. 이번 포스팅에서는 CDN 방식으로 LottiePlayer를 사용하는 방법을 소개하겠습니다. 1. LottiePlayer란?LottiePlayer는 Lottie 애니메이션을 HTML 태그만으로 손쉽게 삽입하고 제어할 수 있게 해주는 도구입니다. LottiePlayer는 다양한 속성으로 애니메이션의 반복 재생, 자동 재생 등의 설정을 손쉽게 할 수 있습니다. 2. CDN으로 LottiePlayer 사용하기LottiePlayer를 사용하려면 CDN을 통해 라이브러리를 불러오고, HTML에 태그를 추가.. HTML 2024. 9. 10.

• 

  input type file에서 카메라 - 파일 작업 선택 속성 추가 모바일에서 작업 선택이라고 바텀 시트가 올라오면서 카메라 - 갤러리 - 파일 이런식으로 선택을 할 수 있는 속성을 알게 되었습니다. 여태 input type="file" 에서 속성을 추가하면 간단하게 해결이 됩니다. 하지만 PC 에서는 일반 input file로 보이기 때문에 테스트는 모바일해야 합니다. "image/*;capture=camera"는 HTML의 input 요소에서 사용하는 accept 속성의 값 중 하나입니다. 이 값은 웹 페이지에서 파일 업로드를 위한 입력 필드를 정의할 때 사용됩니다. 여기에 대한 설명은 다음과 같습니다: "image/": 이 부분은 파일 형식을 지정하는 부분입니다. "image/"는 이미지 파일의 모든 형식을 허용하겠다는 의미입니다. 즉, 사용자가 업로드할 수 있는 .. HTML 2023. 10. 5.

• 

  사파리에서 디바이스별로 확인하는 방법 (응답형 디자인 모드) 크롬에서는 디바이스별로 레이아웃을 볼 수 있는 것이 개발자 도구에 떡하니 있는데, 사파리에서는 찾아볼 수가 없었습니다. 사파리에서는 조금 다른 메뉴인 [응답형 디자인 모드 시작] 이란 메뉴를 선택해야 디바이스별로 레이아웃을 볼 수 있습니다. 사파리 -> 개발자용 -> 응답형 디자인 모드 시작 응답형 디자인 모드가 실행되면 위의 디바이스를 클릭하면 레이아웃을 확인할 수 있습니다. iOS 기기 디바이스인 아이폰 SE부터 아이패드 프로(12.9인치)까지 확인이 가능합니다. 디바이스를 클릭하면 세로/가로로 전환되면서 레이아웃을 확인할 수 있습니다. 가로/세로 사이즈를 늘리고 싶다면, 하단에 네모박스처럼 생긴 부분을 드래그하면 늘릴 수도 있습니다. 이번에 아이폰 디바이스를 확인하면서 사용한 응답형 디자인 모드였습.. HTML 2022. 12. 26.

• 

  [웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값! 최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 토글 및 아코디언 메뉴에서 접근성 코드가 들어가게 됩니다. 과금미사용된 아이템을 환불 받을 수 있나요? (CSS는 따로 잡지 않았습니다.) 현재 토글 메뉴에서 aria-expanded="false" 로 최초로 닫혀있는 상태입니다. 과금미사용된 아이템을 환불 받을 수 있나요? 답변 사이트 운영자 답변 구매한 후에 24시간 이내에 환불 요청을 하신다면 가능합니다. 과금 부분을 클릭하게 되면 태그에 있던 aria-expanded="true"로 속성값을 변화시킵니다. view 클래스를 가지고 있던 div 태그를 display: block 값을 줍니다. 다른 방법으로도 접근성을 하는.. HTML 2022. 5. 10.

• 

  [html] tbody 여러 번 사용할 수 있다 2단으로 게시물들을 작업할 때 li 태그로 작업하는 방법도 있지만, table 태그로 th와 td로 사용하는 방법도 있습니다. 그러면서 의문도 생겼습니다. tbody를 여러 번을 줘야하는 경우가 생기는데, 과연 tbody를 여러 개 사용해도 웹 표준에 문제가 없을지 궁금했습니다. ...생략 정답은 tbody는 갯수 제한없이 사용이 가능합니다. 반면 thead의 경우는 한 테이블에서 한 번만 사용할 수 있다고 하니, 이 부분도 코딩을 하면서 체크를 해야할 것 같습니다. (사실 이전에는 잘 몰라서.. ul > li 위주로만 사용했었습니다.) ...생략 지금은 이렇게 "tbody가 아~ 3개구나" 하면서 잘보이겠지만, 안에 내용들이 엄청 많아지면 조금은 관리가 어려운 점도 있었습니다. 금일 작업하면서 궁금했던.. HTML 2021. 6. 16.

• 

  a태그로 구글 메일 보내기 바로 링크 (ft.Gmail) 이번에는 HTML 태그로 이메일 보내기 링크 사용방법입니다. mailto도 있지만, 제가 사용한 방법은 a태그를 이용하여 href에 있는 주소에서 추가적으로 기재하면 사용가능한 방법입니다. 일반적으로 사용하시는 메일이 세팅이 되어있다면 편하시겠지만, 세팅이 되지 않았을 경우에는 이것저것 다른 창 열고 주소 복사하고 하는 번거로움도 있기 때문에 저도 이 태그를 제가 사용하는 페이지에서는 많이 사용합니다. 구글이 로그인이 되어있다면 해당 주소로 바로 메일쓰기가 가능해집니다. 메일 보내기는 일반적인 방법을 많이 사용하지만, 이런 방법도 있다는 점에서 공부도 할겸 작성했습니다. HTML 2021. 1. 18.

• a 태그 특정 위치로 이동하기 이제 a태그를 통해서 페이지를 이동하게 되면, 최상단으로 가게 되는데 해당 문서에서 특정 위치나, 다른 페이지에서 특정 위치로 가는 방법이 있습니다. 물론, JS 등을 사용해서 이동하는 방법도 있겠지만, a태그를 통해서 간단하게 이동이 가능합니다. 1. 같은 페이지에서 특정 위치 이동 박스 영역으로 이동 여기는 박스 영역 위의 a태그에서 href에 #ID 영역만 작성하게 되면, 바로 이동이 가능합니다. 2. 다른 페이지에서 특정 위치로 이동 이동 위의 a태그에서는 특정 위치로 이동하려는 사이트 + 그 섹션이 있는 ID값을 같이 기재해주면 a태그에서 이동하려는 URL과 해당 섹션으로 자동으로 포커스가 이동이 됩니다. a태그 특정위치로 이동 이동된 사이트는 제가 플레이하는 일루전커넥트 홈페이지인데, 위의 내.. HTML 2020. 12. 5.

• 

  그래프, 이런건 어떻게 표현.. 어렵구나 갑자기 무슨 주식 정보냐고 의아할 수도 있지만, 현재 포트폴리오를 준비하는 과정에서 주가정보 페이지를 기입해야겠다고 마음을 먹어서 어떻게 구현하는지 궁금했습니다. 데이터 이런 부분에서는 논외이고.. 데이터로 들어가는 부분은 제 영역이 아니니까 패스하고, 일단 UI 정도만 해야되기 때문에 분석을 하는 부분에서 골똘히 생각해보기로 했습니다. 그런데 소스를 살펴보니 rect 태그가 보였다. 일단, 아직 배운 적이 없어서 이번 주말에는 붙여보기 위해서는 조금 살짝 공부를 하고, 그래프를 넣어보려고 합니다. 이번 주말에도 맨땅 삽질은 계속될듯.. 예상됩니다. HTML 2020. 10. 30.