본문 바로가기

각 종 it/티스토리 등 프로그래밍

글자 배경 블러처리하기, 물론 배경이미지도 blur~ 블라블라(rgba) 글자를 배치하다보면 본의아니게(?) 그림 위에 글자를 배치하는 경우가 있다. 그림은 복합적인 컬러의 조합으로 글자 색을 아무리 바꿔도 그림과 겹치면 꼭 안 보이는 글자가 존재한다. 우리는 이를 가독성을 헤친다라고 표현하는데, 간단하게 배경을 블러처리함으로서 해결 할 수 있다. pc로 본다면 현재 오른쪽에 실예를 볼 수 있다. 그렇다면 이 blur effect는 간단하게 코드로 구현 할 수 있을까? 있다. background-color: rgba(0,0,0, 0.4); 이것만 넣어주면 된다. r은 red, g는 green, b는 blue, a는 alpha를 의미한다. 이 중 alpha가 투명도를 결정한다. 그런데 막 다른 사이트 코드 보면 css에다 이미지 url 넣고 막 길던데 왜 이 간단한 코드를 사용..
모바일 브라우저의 한계, ram 부족 pc브라우저와는 달리 모바일 브라우저는 ram이 부족하다. 물론 비싼 것은 8기가 넘어 간다고 하지만 보통은 4~6이 대부분이다. 이는 무슨 문제점을 가져오는가? 모바일에서 여러창을 띄워 시간이 지나면 이전의 창은 임의로 닫힌다. 즉 이전의 창을 불러왔을 때 f5를 누른 것 처럼 리프레시 된다는 것이다. 걍 웹서핑만 하는 사람들에게는 불편함이 없지만, 필자와 같이 네이버 태양신이거나 이메일을 쓰거나... 검색기 기능을 제공하는데 제약점으로 다가온다. 예를 들어 네이버 지식인에 답변을 달 때 똑같은 설명을 반복하는 것이 지겨울 때가 많다. 그러면 답변이 잘 되 있는 다른 사이트 링크를 걸어줘야 하거나 서치를 해야 하는데 그래도 양심상 조금 써 놓은 답변이 다시 돌아왔을 때 날라가 버린다면? 이메일 작성 후..
당신이 원하는 flex는 flex-wrap:wrap;(html style, css) 반응형 웹페이지가 주가 되고 있는 지금, 웹페이지 상에 배열하는 아이템들도 화면 비율에 따라 알아서 배치되었으면 한다. 이전에는 float 등을 많이 사용했지만, 요즘 세대는 flex를 많이 사용한다. 별도의 기다란 코드를 칠 필요 없기 때문이다. flex란? html에서 flex는 화면 비율에 자연스럽게 아이템을 나열하는 컨테이너다. 기본 사용 구문은 다. 그런데 이 것만 쓰면 기본 flex-wrap 속성이 no wrap이기에 가로 비율을 줄여도, 가로 길이를 줄여도 컨테이너 안에 있는 아이템의 가로를 줄일지언정 배열을 그대로 유지한다. 하지만 우리가 보통 원하는 flex는 그게 아니다. 배열을 포기하더라도 아이템들을 왜곡하지 않게 하는 flex가 바로~~~~ wrap이다. 즉, 이렇게 사용하는 것이다..
html/css 배경화면 이미지 고정 or 스크롤에 따라오게 하기(background attachment 종류 및 해석) 한 동안 본 페이지의 메뉴버튼을 누르면, 뒤에 있던 벚꽃 배경이 따라와 가독성을 침해 했다. 사실, 이는 css에서 menu와 관련해서 position을 fixed로 설정했기 때문이다. 그래야 스크롤을 해도 백그라운드 배경(벚꽃)이 왼쪽 상단에 고정 되었기 때문이다. 그렇다면 스크롤을 내리면 배경화면(벚꽃)이 사라지게 할 수는 없을까? 있다. 배경화면 이미지를 크게 만들어서 고정 시켜 놓으면 벚꽃은 그 위치에 고정되어 스크롤에 따라오지 않는다. 하지만 이는 모든 디스플레이에 대응 할 수 없는 저급한 방법이다. 디스플레이의 해상도, 크기 우리는 이 것을 모두 상정 할 수 없다. 그리고 반응 할 수 없다. 그리햐야 우리는 background-attachment속성을 이용한다. background-attach..
반응형 iframe 코드 과연 필요할까? 특히 동영상에서? iframe이란 프레임을 씌워 타 웹페이지나 동영상 등의 매체를 다른 웹페이지에 띄우는 역할을 한다. 예를 들어 vod카테고리에 웹투니를 보면 이해하기 쉽다. 위 코드를 웹페이지 html에 적용하면, 이렇게 나온다. 가로 해당 프레그먼트의 95%, 높이는 560픽셀 이렇게 적용하였다. 높이를 560px로 지정한 것은 웹투니 안에 있는 페이스북 동영상 높이 중 가장 큰 것이 550px여서 그렇게 적용 해 놓았다. 그런데... 560px로 고정값을 설정 해 놓으면 화면 크기가 작을 때도 고대로 적용되기 때문에 비율 상 불필요하게 세로로 긴 것을 느낄 수 있다. 그래서 시중에 떠도는 코드가 있으니 .entry-content .iframe-wrap { position: relative; height: 0; pa..
안티 애드블록이 나쁜걸까? 본 컨텐츠를 보기 위해서는 애드블록을 해제 해 주세요. 안티 애드블록 해제 방법 첨. 그 공명정대한 JTBC에서도 애드블록을 해제하지 않으면 동영상을 안 보여주는데, 뭐 괜찮겠지 하고 달아본다. 출처는 https://blind513.tistory.com/252 광고 수익을 방해하는 안티 크롬 애드블럭 티스토리 설치하기 크롬 '애드블록'이라는 프로그램은 때로는 도움을 주기도, 주지 않기도 한다. 애드블록이란 프로그램에서 간단하게 정의하자면 광고를 차단하는 프로그램으로써 유튜브 시청시 불필요하게 긴 blind513.tistory.com 이 곳이고 앞으로 필요에 따라 여러 안티 애드블록을 설치할 예정이다. 방문자는 늘어나고 있는데 수익은 제자리 걸음이니 어쩔 수 없이 함 해봐야겠다. 그런데 위 링크의 것을 써 보니, 블로그스팟에서는 광고 차단 기능을 사용하지 않아도 모바일크롬 환경에서도 작동한..
반응형 네이버 명함 만드는 방법(html 크기 조절) 네이버에는 모두!라는 인터넷 상점이 있다. 소상공인을 돕겠다는 취지에서 만들어졌지만 그렇게 큰 힘을 발휘하지는 못하는 것 같다. 아무래도 유튜브가 대세이기는 하지... 돈이 얼마나 차이가 나는데.... 여튼 네이버 모두! 명함에는 여러 종류가... 네이버에서 제공하는 명함은 단순히 이미지가 아니다. See the Pen 네이버 명함 by xelaw (@xelaw) on CodePen. 이렇게 간단한 구문으로 구성되어 있다. html 테이블로 위치 잡고 각 자리에 맞춰 이미지나 글을 연성하는 간단한 방법이다. 하지만 문제점이 있다. 필자가 적용하려고 하는 곳에 크기가 안 맞다. 세로야 안 바꿔도 되지만, 가로는... 반응형으로 바꿔볼까? 필자가 만들고자 하는 것은 바로, 일일이 width값을 지정해 줘서 ..
블로그나 홈페이지에 채팅방 설치, 댓글하고 채팅은 다른거지... 암... 예전에는 글자로 의사소통하는 낭만이 있었다. 요즘은, 특히 대한민국에서는 인터넷이 발달 해 동영상 등 실시간 대면 채팅을 하다 보니 얼굴을 숨길 것이 아니라면 굳이 글자로 치는 채팅을 하던 낭만이 사라지고 있다. 물론 페이스북이나 트위터, 카카오톡 등 소셜미디어 서비스가 있지만, 요것들은 채팅이라기보다는 댓글에 가깝기 때문에 소비성 발언 등이 난무할 뿐이다. 고것이 댓글과 채팅의 차이다. 실시간으로 자신과 타인의 의견을 주고받을 수 있다는 차이점. 본디 오른쪽 슬라이드에 달아 스크롤 채팅방으로 만들려고 했지만 보시다시피 이미 뭔가로 꽉 찼고 모바일에서는 필요 없을 듯하여 특정 게시글에만 달아놓았다. https://www.embedded-chat.com/ Embedded Chat | Social Chat ..

티스토리툴바