You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 :before :after 에 text-decoration 효과 없애기
의사 클래스 선택자에 밑줄 효과 지우기 무색무취한 링크 태그를 꾸미기 위해 :before 나 :after 에 아이콘을 넣는 경우가 종종 있다. 이때 anchor 태그의 밑줄 효과인 text-decoration 속성을 텍스트에만 적용하고 content 속성의 아이콘 표시 부분은 적용하고 싶지 않을때가 있을텐데, 아무리 의사 선택자에 text-decoration 속성을 none으로 해도 밑줄이 지워지지 않은 현상 때문에 애로사항이 생겼을 것이다. 해결방법은 의사 선택자의 display 속성을 inline-block 으로 설정해주면 된다. My link My link a { text-decoration: underline; } a:before { content: "★"; } a.no-underline:befo..
🚀 텍스트 말줄임표(...) 간단 적용하기
글자 ellipsis 적용하기 일정한 영역 내에 문단을 넘치지 않으면서 생략 기호를 쓰고 싶어 말줄임표(...)를 적용하고 싶다면, CSS 속성의 text-overflow: ellipsis 를 적용하면 된다. 다만 이 속성을 적용하기 위해선 몇가지 사전 작업이 꼭 필요하다. 적용할 해당 요소는 display 속성이 block / inline-block 이어야 한다 (그래야 width를 적용할수가 있다) 적용할 해당 요소는 width를 지정해주어야 한다. (그래야 넘치는 기준을 정하기 때문이다) 적용할 해당 요소는 overflow가 hidden 이어야 한다. (그래야 넘치는 부분이 가려지기 때문이다) 마지막으로 text-overflow를 ellipsis 로 처리하면 된다 싱글 라인 말줄임표 적용 .elli..
🏷️ 웹문서에 최적화된 독특한 HTML 태그 10가지
figure & figcaption 태그 이 태그들은 이미지, 동영상 과 같은 멀티미디어 콘텐츠의 캡션 및 기타 메타데이터를 추가하는 방법을 제공한다. 물론 이미지, 동영상을 표현하는데 적합한 , 태그들이 존재하지만, 이들을 태그로 한번 더 감싸주면, 웹 페이지의 접근성과 검색 엔진 최적화가 개선된다고 한다. 멀티미디어 콘텐츠에 대한 컨텍스트 및 추가 정보를 제공하여 사용자가 이해하기 쉽고 검색 엔진이 웹 페이지를 색인화할 수 있기 때문이다. 태그는 소스에 대한 제목 또는 설명과 같은 추가 정보를 제공하는 캡션(caption)으로써, 태그 내부 하단에 배치된다. World Map 당장 이곳 티스토리 블로그도 개발자도구를 살펴보면 이미지를 포스팅에 표시할때 엘리먼트를 사용한다는 걸 알 수 있다. mark ..
🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()
:where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위해선 각 선택자들을 콤마를 이어 나열하여 표현하여야 했었다. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } 그런데 코드를 보면 a:hover 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선택자의 양도 늘어나 나중에 ..
🏷️ 스크립트 없이 구현 가능한 독특한 HTML 태그 9가지
이번 포스팅은 HTML5을 배우는데 있어 접하지 못한 독특한 엘리먼트들을 소개해 보는 시간을 가져볼 것이다. 기존의 태그와 자바스크립트를 조합하여 힘들게 구현해야 하는 컴포넌트들을 태그 하나로만 구현할수 있어, 비록 아주 자주 사용될 녀석들이 아니지만 한번 쯤 훑어보고 존재 정도만 머리에 각인시키고 있다면, 추후에 도움이 될 것이다. 각 요소의 속성 상세 스펙은 MDN을 참고하면 된다. progress 태그 progress 요소는 진행 정도를 나타내는 바를 만드는 태그이다. 주로 자신의 스킬 퍼센티지를 표기하거나 api 사용량을 표현하는데 자주 애용된다. 엘리먼트의 max 에 따른 value 속성값에 따라 bar의 게이지가 포함되는 원리이다. See the Pen progress by barzz12 (@..
🌐 브라우저 이미지 캐시 방지하기
Disable Image Cache 웹페이지 속도 테스트나 혹은 이미지를 다루는 라이브러리 중에 이미지를 Ajax로 불러오다가 캐시에 의한 CORS 에러 문제 등 여러 이유들에 의해서 브라우저가 이미지를 캐싱 하지 않게 하고 싶은 때가 있을 것이다. 그러나 직접 서버에서 캐시 관련 헤더 설정을 할수 없거나 다른 업체의 서버를 사용하는 경우 결국 프론트단에서 처리해야 한다. ctrl + F5 강력 새로고침으로 임시적으로 해결할수는 있지만, 매번 이럴수도 없고 무슨 방법이 없을까 고민하겠지만 의외로 방법은 간단하다. 브라우저는 이미지를 완전히 같은 url 이름으로 불러들일때는 캐시한 이전 이미지를 불러온다. 이러한 특성을 이용하여 url의 쿼리스트링 값만 다르게 주는 것으로 캐시되지 않은 똑같은 이미지를 불..
🌐 리소스 캐시로 인한 CORS 에러 현상 고찰
브라우저 캐시로 인한 CORS 문제 CORS(Cross-Origin Resource Sharing)는 서로 다른 출처(Origin)의 리소스를 공유하고 싶을때 사용하는 정책을 말한다. 기본적으로 브라우저는 SOP(Same Origin Policy) 정책을 따르기 때문에 외부 리소스에 대해서 차단한다. 하지만 인터넷은 여러 사람들에게 오픈된 환경이고, 이런 환경에서 웹페이지에서 다른 출처에 있는 리소스를 가져와 사용하는 일은 매우 흔한 일이라 모든 외부 리소스를 무턱대고 막으면 지금처럼 웹이 발전하지 않았을 것이다. 따라서 외부 리소스라도 허용 가능한 예외 사항을 두었는데 그것이 CORS 정책이다. [WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CORS 에러 메세지 웹 개..
🚀 마우스 wheel & scroll 이벤트 멈춤 감지하기
마우스 휠 & 스크롤 멈춤 감지 방법 사용자가 문서를 스크롤 하면 이벤트를 발생시키는데, 스크롤을 멈추면 이를 감지하여 스크립트 처리를 하고 싶은 상황이 있을 것이다. 마우스 스크롤을 감지하는 이벤트는 두가지가 있는데, 문서를 스크롤하면 발생하는 'scroll' 이벤트와 그냥 마우스 가운데 휠 버튼을 내리면 발생하는 'wheel' 이벤트가 있다. 이 이벤트들에 setTimeout() 메서드와 조합해서 종단 지점을 감지하는 로직을 구현 할수가 있다. let scrolling; // setTimeout() 메서드를 할당하는 전역 변수 window.addEventListener('scroll', (e) => { if (!scrolling) { console.log('start scrolling!'); } //..
🎨 말풍선 디자인 자동 만들기 사이트
말풍선 생성하기 사이트 간단하게 말풍선 스타일링을 바로 만들수 있는 제너레이터이다. 말풍선 꼬리표 위치(Side) 와 모양(Pointer triangle) 과 크기(Pointer size)를 지정해주고 옆의 css 코드를 붙여넣으면 완성된다. Bubbly CSS speech bubbles made easy! Bubbly — CSS speech bubbles made easy projects.verou.me
🌐 html의 data-속성 사용법 완벽 가이드
HTML 데이터셋 속성 HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다. 한마디로 자바스크립트에서 변수를 사용하듯이, 일종의 html의 변수 역할이라고 말할 수 있다. 데이터셋 속성의 장점 일반 속성 과 데이터셋 속성 데이터셋도 일종의 속성(attribute)이다. 보통 html에서 속성이라 하는 것은 여러분도 잘 알듯이 id, class, src, title 등의 태그에 붙이는 어트리뷰트를 말한다. 이들 속성은 특정 태그의 소스 경로나 이름, 너비, 아이디를 기재하는데 정해져 있다. 그런데 html 태그에 그 엘리먼트만이 지니고 있는 고유한 커스텀 값을 지정해 사용하고 싶을 때가 있다. 마치 아래 코드 처럼 input 태그의 value 속성으로 값을 기..
☕ 개발자들을 괴롭히는 자바 NULL 파헤치기
개발자의 영원한 숙제 NULL null 이라는 단어는 프로그래밍을 배워보면 빠르나 늦나 반드시 접하게 되는 녀석이다. 프로그래밍을 갓 접한 사람들은 null을 그저 '값이 없는 것' 으로 외우고 넘어가버린다. 심지어 null을 부정의 뜻으로 0 이나 공백 그리고 false 와 동일선상에 놓고 생각하기도 한다. 당연히 이는 잘못된 정의 이다. 그저 값이 없다는 표현일 뿐인데 개발자의 영원한 숙제 라니 뭐니 라는 표현을 쓰는 이유는, 개발자들이 null을 마주하는 경우가 프로그램 실행중에 에러 메세지(NullPointerException) 로 인해 잘동작 하던 프로그램이 죽어버려 원인을 찾느라 심한 고생을 하기 때문이다. 우선 NULL 이라는 개념은, 영국의 컴퓨터 과학자인 토니 호어(Tony Hoare)가..
🌐 HTML 요소의 위치 좌표 값 얻기
HTML 요소의 좌표 웹문서의 어떤 요소(element)의 위치 값을 자바스크립트로 구할 필요가 있을때, DOMRect 클래스의 getBoundingClientRect() 메서드를 통해 좌표 정보가 들은 객체를 얻을 수 있다. 대부분의 브라우저를 지원하며 쉽고 빠르게 위치 값을 가져올 수 있다 const rect = document.querySelector('div').getBoundingClientRect(); console.log(rect); getBoundingClientRect() 메서드의 반환 값은 엘리먼트의 padding과 border-width를 포함해 전반적인 사각형의 위치와 크기를 px 단위로 나타낸다. 각 속성의 값들이 나타나는 의미는 다음과 같다. x : 브라우저 창기준 x 좌표 y ..
