• [CSS] backdrop-filter 로 겹침 효과 주기 한때 음악 어플의 앨범 커버이미지 ui에서 자주 볼 수 있었던 흐림 효과를 CSS로 구현할 수 있다. backdrop-filter 를 통해 구현할 수 있는데, IE가 지원 중단 되면서 부터 비교적 자유롭게 사용할 수 있게 되었다. 사용법은 아래와 같다. blur backdrop-filter 중에 내가 가장 자주 사용하는 속성은 blur. backdrop-filter: blur(10px); 위와 같이 적용해 주면 되는데, 다만, 부모 엘리먼트에 이미 backgrop-filter 가 적용되어 있다면, 자식 요소에서는 적용되지 않는다는 점을 주의하자. invert / sepia등 다양한 속성 제공되는 다양한 속성 중 inver와 sepia를 비롯해 다양한 속성을 제공한다. 예시는 아래와 같다. backdrop-filter: invert(80%); backdrop-filter: sepia(90%); 아래는 Mozilla 가이드 페이지에서 제공하는 속성 설명이다.
• [HTML] textarea placeholder 에서 줄바꿈하기 1 textarea 에서 placeholder 입력시 \n 혹은 \r\n 로 줄바꿈을 할 수 없는데, 아래와 같이 엔터티를 입력하여 줄바꿈 가능하다. <textarea placeholder="첫 번째 줄&#10;두 번째 줄"></textarea> 줄바꿈 엔터티 : &#10; 아래는 줄바꿈 placeholder 가 적용된 textarea.
• [CSS] CSS만으로 scrollbar 디자인하기 최근 익스플로러가 사용 중단 조치 되면서 스크롤바 디자인이 좀 더 자유로워졌다. 아래 CSS를 통해 간단히 웹킷 브라우저에서 스크롤바 디자인을 변경할 수 있다. CSS 아래 코드를 통해 스크롤바 디자인이 가능하다. .scroll::-webkit-scrollbar {width: 10px} .scroll::-webkit-scrollbar-thumb {background-color: #b4b4b4; border-radius: 10px; background-clip: padding-box} .scroll::-webkit-scrollbar-track {background-color: #f1f1f1; border-radius: 10px; } 위 코드에서 .scroll 은 스크롤이 적용되는 엘리먼트이며, ::-webkit-scrollbar 는 스크롤바 전체 영역, ::-webkit-scrollbar-thumb 는 스크롤 바, ::-webkit-scrollbar-track 는 트랙의 스타일을 지정하면 된다. 예시는 아래와 같다.
• [HTML] 아이폰(iOS) Safari에서 전화번호, 주소, 이메일주소 자동링크 기능 끄기 HTML에 작성된 텍스트 중 전화번호(휴대전화번호), 주소, 이메일 주소로 예측되는 텍스트가 있는 경우 아이폰 Safari는 텍스트에 자동으로 링크를 활성화 해준다. Safari의 편의 기능이기는 하나, 퍼블리셔가 의도하지 않은 텍스트가 a태그의 스타일을 상속 받아 레이아웃이 깨지는 경우가 있다. 이럴 경우 자동으로 링크가 활성되지 않도록 meta태그로 기능을 끌 수 있다. <meta name="format-detection" content="telephone=no, address=no, email=no"> meta태그의 content 인자 값에 비활성화 되길 원하는 속성을 입력한다. telephone=no => 전화번호 자동링크 끄기 address=no => 주소 자동링크 끄기 email=no => 이메일 자동링크 끄기
• [CSS] CSS만으로 checkbox, radio 디자인하기 checkbox, radio 를 디자인하기 위해 갖가지 방법이 동원된다. 나의 경우 이전에는 습관적으로 javascript를 통해 디자인을 했었는데, 퍼블 완료 후 개발이 적용되는 과정에 예상치 못한 오류들을 맞닥뜨리면 여간 까다로운 일이 아니다. javascript 없이 CSS만으로 checkbox 와 radio 디자인이 가능한 것은 CSS의 '+' 선택자를 통해 가능하다. 오랜 습관이 되어온 javascript에서 탈피하여 CSS만으로 디자인 해보도록 한다. HTML CSS만으로 checkbox를 디자인하기 때문에 여느때와 다름없이 labal, input으로 HTML코딩 한다. <input type="checkbox" id="test" /> <label for="test">체크박스 디자인 테스트</label> CSS CSS의 +선택자와 :before 가상요소를 활용해 아래와 같이 체크박스 on/off 아이콘을 만든다. (체크 모양 아이콘은 Font-Awesome 으로 만들었다.) input[type=checkbox] + label{padding-left: 25px;position: relative;} input[type=checkbox] + label:before { content: '';display: block;width: 15px;height: 15px;border-radius: 3px;position: absolute;top: 50%;margin-top: -9px;left: 0;border: 1px solid #ddd; } input[type=checkbox]:checked + label:before { border-color: #000;font-family: 'Font Awesome 5 Free';content: '\f00c';font-weight: bold;text-align: center;font-size: 10px;line-height: 15px; } + 선택자를 통해 input 바로 뒤에 오는 label을 스타일링 했으며, :before 가상요소를 label에 추가하여 체크 on/off 모양을 구현하였다. 예시는 아래 참고.
• [CSS] 크롬 print 설정 (@media print / @page) 크롬에서 print 설정시 자주 사용하는 코드. 익스플로러 지원이 중단되었으니 이제는 비교적 자유롭게 사용해도 되겠다. @media print @media print 는 print시 적용할 스타일을 정의한다. print시 레이아웃 일부나 프린트될 해당 엘리먼트의 스타일을 조정할 때 사용한다. 아래 CSS는 프린트시 html, body 의 여백을 0으로 조정하고 프린트될 엘리먼트(.print-me)의 width값을 조정하는 예시 아래 -webkit-print-color-adjust: exact; 는 프린트시 배경이미지가 인쇄되지 않는 현상 해결. @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } html,body{margin: 0;padding: 0;min-width: 0;} .print-me{width: 1200px;} } @page @page는 인쇄 용지 크기와 여백을 조정한다. A4, B4 등 용지 규격을 입력해도 된다. @page { size: auto; margin: 0; }
• [CSS] position: sticky 로 애플사이트와 유사한 효과 구현하기 애플 웹사이트의 제품 소개 페이지를 접속하면 웹페이지 스크롤시 특정 영역에서 더 이상 스크롤 되지 않으면서 제품 애니메이션이 실행되는 효과를 볼 수 있다. 이 같은 효과는 CSS의 position: sticky 효과가 기초가 되며, javascript의 도움을 받아 구현할 수 있다. 기초가 되는 CSS의 sticky효과는 아래와 같이 구현할 수 있다. 아래 예시와 같이 sticky가 적용될 엘리먼트에 position: sticky;를 부여하게 되면, 부모 엘리먼트의 top offset 부터 bottom offset 까지의 스크롤간 sticky 엘리먼트가 화면의 top 혹은 bottom 붙어 떨어지지 않게 된다. 이후 부모의 bottom offset을 벗어나면 비로소 자식 엘리먼트가 화면 위로 올라가게 된다. 예제는 아래와 같다. HTML <div id="parent"> <div id="children">Sticky!</div> </div> CSS #parent{height: 6000px;} #children{position: sticky;top: 0;height: 500px;background-image: url('/sticky-background.jpg');} 부모 엘리먼트는 자식 엘리먼트의 height 보다 더 높아야 하며, 자식 엘리먼트에는 반드시 top 혹은 bottom이 부여되어야 한다.
• [CSS, HTML] 반응형에서 유투브 동영상 비율 유지하여 삽입하기 반응형웹인 경우 iframe 방식의 유투브 동영상을 삽입하는 했을 때 디바이스 폭(width)에 따라 높이(height)가 계산되어 출력해주는 소스코드 예제. 부모 엘리먼트를 하나 만들고 그 내부에 유투브 iframe 을 넣는 방식인데, 부모의 높이를 padding-bottom '%'로 계산하여 비율을 맞춰주게 된다. 예제는 아래와 같다. CSS .respondFrame { position: relative; padding-bottom: 56.25%; /* 16:9 비율인 경우. 4:3 비율인 경우 75%로 설정합니다 */ overflow: hidden; } .respondFrame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } HTML <div class="respondFrame"> <iframe src="https://www.youtube.com/embed/vAO_OcRz6xQ" frameborder="0" allowfullscreen></iframe> </div>
• [CSS] 아이폰(ios)에서 overflow 스크롤링 부드럽게 처리 아이폰, 아이패드 등 ios에서 특정 엘리먼트에 overflow:scroll 을 주게 되는 경우 스크롤바가 부드럽지 않게 끊겨 작동되는 것을 확인할 수 있다. 엘리먼트에 생성된 스크롤바를 부드럽게 작동 시키려면 ios 브라우저에 대한(webkit) 속성을 아래와 같이 변경해 줘야 한다. * { -webkit-overflow-scrolling: touch; -webkit-border-radius: 0; } 그럼 부드럽게 작동하는 스크롤바를 확인할 수 있다.
• [HTML] 파비콘(Favicon) 설정하기 웹사이트를 인터넷 브라우저에서 접속하는 경우 브라우저 타이틀바(탭 바)에 웹사이트 파비콘 아이콘을 노출시킬 수 있다. <link rel="icon" href="favicon.ico" /> <link rel="shortcut icon" href="favicon.ico" /> <head>와 </head> 사이에 위 두 줄 추가한 뒤 favixon.ico 파일을 생성하여 웹사이트 계정 최상위 루트에 위치 시키면 된다. 두 줄을 함께 삽입해 줘야 IE, 크롬, 사파리, 파이어폭스에 모두 적용된다.
• [CSS] IE에서 background fixed인 경우 떨림 현상 IE에서 background의 attachment 속성이 fixed인 경우 스크롤을 움직일 때 덜덜거리며 떨리는 현상이 발생한다. 이를 임시방편으로 해결하는 방법은 아래와 같이 html, body 에 속성을 주는 것인데, 주의할 점은 아래와 같이 속성을 주는 경우 javascript 에서 window scrolling 을 제대로 인식하지 못한다. body에 스크롤을 달아주는 방식이기 때문. html {overflow: hidden;height: 100%;} body {overflow-y: scroll;height: 100%;}

• 1