탐구하는 취르미

텍스트 요소 사이의 간격을 조절하고, 반응형 디자인에서 글자 간의 간격을 조절하는 데에는 여러 가지 방법이 있습니다. 그 중 하나가 입니다. HTML 엔터티(entity)는 텍스트의 레이아웃을 세밀하게 제어하는 데에 유용하며, 특히 텍스트 간의 간격을 조절하는 데에 사용됩니다. 의 활용 방법에 대해 알아보겠습니다. 란? 는 HTML에서 사용되는 특수 문자로서, non-breaking space의 약어입니다. HTML에서 일반적인 공백 문자와는 달리, 줄 바꿈이 되지 않고 항상 공백으로 유지됩니다. 텍스트 레이아웃 및 요소 간의 간격 조절을 위해 사용됩니다. 활용 방법 를 활용하는 방법에 대해서 2가지 소개해드리겠습니다. 텍스트 사이의 강제 공백 생성 HTML에서 일반적인 공백 문자(스페이스 또는 탭)는 ..

유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭합니다. 2. 퍼가기 버튼을 클릭하세요 3. 코드 복사하기가 나옵니다. 복사하셔서 HTML에 붙여 넣기 하시면 됩니다. iframe 반응형 코드 작성하기 퍼가기 허용 체크 여부 영상 게시자가 퍼가기 허용 체크를 비활성화했을 경우 아래와 같이 동영상을 재생할 수 없음으로 보입니다. 해상도에 따라 비율을 구하는 방법 일반적으로 16:9 비율을 많이 사용합니다. 4:3 : 3/4*100 = 75% 16:9 : 9/16*100 = 56.25% 21:9 : 9/21*100 = 42.85% /* ..

웹 페이지에서 동영상 콘텐츠를 삽입할 때, HTML 태그 중 video와 iframe을 주로 사용합니다. 그러나 이 두 가지 태그는 어떤 차이점이 있을까요? 어떤 것이 더 적합한 선택일까요? 이번에는 video와 iframe의 특징과 장단점에 대해 살펴보겠습니다. video 태그 video 태그는 HTML5에서 새롭게 등장한 태그로, 웹 페이지에 비디오를 삽입할 때 사용됩니다. video 태그는 다양한 속성을 사용하여 비디오의 플레이백, 사이즈, 컨트롤 등을 조작할 수 있습니다. 문법 Your browser does not support the video tag. mp4와 webm 형식의 비디오 파일을 지원하며, 비디오가 로드되지 않을 경우 "Your browser does not support the ..

반응형으로 이미지맵을 생성하는 방법을 공유하겠습니다. 적응형 이미지맵 처리적응형으로 이미지맵을 생성하는 방법은 이전 포스팅 참고하시면 되겠습니다. [HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법이미지맵(Image Map)으로 이미지에 링크를 거는 방법에 대해서 알아봅시다. 요즘에는 잘 쓰이지 않는 방법이긴 하지만 디엠(Direct Mail)/뉴스레터(News Letter) 등을 제작할 때 알아두면 꽤 유용합니다. dev-chim.tistory.com 반응형으로 이미지맵을 처리해 주는 깃헙 사이트 - jQuery-rwdImageMaps 아래 링크를 참조하셔서 소스 코드를 다운로드하시길 바랍니다. GitHub - stowball/jQuery-rwdImageMaps: Responsive ..

이미지맵(Image Map)으로 이미지에 링크를 거는 방법에 대해서 알아봅시다. 요즘에는 잘 쓰이지 않는 방법이긴 하지만 디엠(Direct Mail)/뉴스레터(News Letter) 등을 제작할 때 알아두면 꽤 유용합니다. 기본적인 사용 방법usemap 값과 map name의 값을 매칭시켜 주는 것이 중요하다. 도형의 유형으로는 rect(직사각형), circle(원형), poly(다각형), default(전체 영역)이 있다. 유형에 따라 사용 방법이 조금씩 다르니 아래의 글을 참조하도록 하자. 1. rect(직사각형) 2. circle(원형) 3. poly(다각형)coords : 좌표값의 시작점을 기준으로 시계방향으로 좌표값을 설정해 주면 된다. 한 이미지에 여러 개의 링크 거는 방법map 태그 안에 여..