그냥, 일단 써내려가자

안녕하세요 무택입니다 :)오늘은 오랜만에 JS 기능을 들고 왔습니다😀오늘의 주제 "" iframe 불러올 때 자동 높이 맞추기 "" 입니다. iframe을 불러올 때 높이가 고정값이면 좋지만그렇지 않은 경우도 있어요.모바일에 iframe이 들어간다던가, 반응형 사이트라던가..그런 경우에 반드시 필요한 기능이죠.아래에서 코드 바로 확인해 보시죠😎  HTML/JS  코드 설명코드 원리불러올 `iframe`의 높이를 측정`iframe`을 불러올 때, 높이를 위에서 측정한 값으로 부여``를 사용해 불러올 때 위 기능 실행 상세 설명 아이프레임을 작성할 때 중요한 점은 id 부여, scrolling 설정, 스크립트 실행입니다.  function height_cal() { var ifrm_height = ..

안녕하세요 무택입니다 :)오늘은 UX를 조금, 아주 조금이라도 향상시킬 수 있는 팁 datalist에 대해 써보겠습니다.datalist는 `input`에서 텍스트를 입력받을 때, 몇몇 예시를 보여주는 기능입니다.`select`를 사용하기에는 선택사항이 정해져 있는 건 아니고,`input`을 사용할 때 선택사항을 보여줘서 선택할 수 있는, 약간의 편리성을 더해주는 기능입니다. 사용방법사용방법은 어렵지 않습니다.See the Pen [HTML/CSS] input의 datatlist 추가 by TytanLee (@TytanLee) on CodePen. `input의 list`와 `datalist의 id`만 일치시켜 주면 선택사항을 노출시킬 수 있습니다.  사용에 적합한 상황텍스트를 입력받아야 하는데, 사용자..

안녕하세요 무택입니다 :)오늘은 아주 빠르게 '텍스트 필드에서 자동완성 비활성화하기'를 알아보겠습니다.우리는 인터넷에서 오만가지를 다 검색해 봅니다.'주식으로 부자 되기', '아무도 나를 모르고 돈 많은 부자 되기'..(여러분도 원하잖아요..)가끔 '내가 이런 것도 검색했나' 기억도 안나는 기록들이 나오는데..개발자로서 이런 기록들을 보여주지 않게 만들 수 있는자동완성 비활성화, 바로 시작합니다. input 자동완성 비활성화하기위 이미지처럼 자동완성은 `autocomplete`라는 옵션을 사용합니다.대체적으로 모든 브라우저에 활성화되어 있는데 아래 코드를 통해 확인해 보시죠See the Pen [HTML]Autocomplete 기능 by TytanLee (@TytanLee) on CodePen.첫 번째..

안녕하세요, 무택입니다 :)오늘은 부드러운 스크롤링을 위한 라이브러리 Locomotive-scroll을 들고 왔습니다. 사용 방법이 쉽지는 않은데 아래에서 최대한 쉽게 설명한 내용을 보고 사용해 보세요! Good Referance 공간기록ㅣ빈 공간에 가치를 담다공간기록이 만들어 낸 빈공간에는 공간기록과 클라이언트의 수많은 가치있는 이야기들이 새롭게 기록되어져 담깁니다.ggglog.com  HTML/CSS scroll-speed 양수 scroll-speed : 0.5 scroll-speed : 1 ..

HTML 31회 합격생 김○구 31회 합격생 김○구 31회 합격생 김○구 31회 합격생 김○구 31회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 34회 합격생 김○구 34회 합격생 김○..

안녕하세요 무택입니다 :)오늘은 웹사이트 속도 향상에 크게 도움이 되는 '서브셋 폰트'에 대해 포스팅해 보겠습니다. 놓치면 아쉬운 꿀팁들이 포스팅 중간에 섞여있으니 자세히 읽어주세요.미리 확인하면 좋은 글 [HTML/CSS] CDN, OTF, WOFF 폰트 적용에 따른 차이 [HTML/CSS] CDN, OTF, WOFF 폰트 적용에 따른 차이안녕하세요 무택입니다 :) 오늘은 css에 폰트를 적용할 때 CDN, OTF, WOFF 세 가지 방법을 비교해보려고 합니다. 업무를 하다가 폰트가 조금 깨져 보인다는 얘기가 있어서 접하게 된 이슈인데 문득 이mu08.tistory.com [CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기 [CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기안녕하세요 무택입니다 :) 오늘은 일..

HTML 2024년 4월 25일 오후 9시 30분에 사라질 HTML 요소 2024년 4월 25일 오후 9시 30분에 나타날 HTML 요소 JS // 사라질 시간 설정 const targetTime = new Date(2024, 3, 25, 9, 30, 0).getTime(); // 현재 시간과 targetTime의 차이 계산 function timeDiff() { return targetTime - Date.now(); } // 1초마다 timeDiff() 함수 실행 const interval = setInterval(() => { const remainingTime = timeDiff(); // 만약 현재 시간이 targetTime보다 이후라면 if (remainingTime

안녕하세요 무택입니다 :) 오늘은 크롬에서 폰트 셋팅 창에 대한 설명을 짧게 해보도록 하겠습니다. 1rem의 개념 1rem은 프론트엔드를 개발하면서 폰트 크기를 정할 때 주로 사용합니다. rem이란 px과 같은 단위의 한 종류인데 보통 1rem은 16px을 말합니다. 왜냐하면 브라우저의 기본 폰트 사이즈가 16px로 정해져 있기 때문에 1rem은 16px로 많이 사용합니다. 그렇다면 이 기본 폰트 사이즈는 어떻게 변경할 수 있을까요? 개발자도구 폰트 설정 `chrome://settings/fonts` 위 링크로 들어가면 폰트 설정을 할 수 있습니다. 기본 글꼴 크기, 폰트 지정을 설정할 수 있으며, 글꼴 크기를 변경하면 1rem으로 지정한 글꼴의 크기가 변하게 됩니다. 아래 예시 텍스트가 있으니 위 링크..

안녕하세요 무택입니다 :) 오늘은 Select창을 원하는 대로 만드는 방법에 대해 알아보도록 하겠습니다. Select창은 쓰이는 곳이 정말 많습니다. 간단한 페이지라면 사용하지 않을 수 있지만 어느 정도 규모가 있는 곳이라면 당연히 Select창을 쓰게 되겠죠. 하지만 이 Select창을 그냥 기본 디자인으로 사용하는 건 디자이너로써 지켜볼 수가 없습니다..😠 그래서 오늘은 이 Select form을 어떻게 이쁘게, 원하는 대로 만들 수 있는지 알아보도록 할게요! Select 창을 원하는대로 만들 수 있는 방법 HTML/CSS 옵션1 세부정보 옵션1 세부정보 옵션2 세부정보 옵션3 세부정보 옵션1세부정보 옵션2세부정보 옵션3세부정보 jQuery $(document).on('click', function(..

안녕하세요 무택입니다 :)오늘은 MS기본 폰트인 맑은 고딕을 맥에서 웹폰트로 사용하는 방법을 알아보겠습니다. 우선 맑은 고딕은 MS 기본 폰트로 윈도우를 사용하시는 분들은 가장 익숙한 폰트일 수 있습니다. 하지만 윈도우에서 사용되는 폰트이기 때문에 맥에서 폰트를 보여주기 위해서는 글꼴 파일 작업이 필요합니다. 그 방법을 아래에서 자세하게 설명해 보도록 하겠습니다.  같이 보면 좋은 포스팅[CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기 [CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기안녕하세요 무택입니다 :) 오늘은 일반 폰트를 웹폰트로 변환시킬 수 있는 방법에 대해 알아보려고 합니다. 웹개발 작업에서 웹폰트를 사용하는 것은 아주 중요한 일입니다. 왜일까요? 아래에서mu08.tistory.com   맥에서 ..