You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 모바일 / 태블릿 에서만 CSS 파일 로드 최적화
CSS 파일 로드 최적화 보통 태그의 css 파일 로드는 브라우저의 렌더링을 차단(blocking) 하기 때문에, css 파일이 크면 클수록 그만큼 웹페이지 속도에 영향을 미치게 된다. 따라서 왠만해선 css 파일의 용량을 최적화하여 줄이는 것이 좋으며 소스를 분리할 수 있는 것은 따로 분리하여 비동기 로드 시키는 것이 좋다. 예를들어 모바일 혹은 태블릿에서만 실행되는 미디어쿼리 선택자 부분은 메인 css 파일에 한꺼번에 때려넣기에는 약간 무리가 있다. 이때 모바일 소스를 다른 css 파일로 분리하고, 사용자의 화면 비율에 따라 선택적으로 css 파일을 로드하도록 하는 방법이 있는데, 이는 다음과 같다. css 파일을 분할하여 메인 css의 크기가 작아지는 효과도 있고 별도로 모바일, 태블릿 화면의 cs..
🚀 :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..
![🚀 속성 선택자 not equal 구현하기 [attr!=value]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdavaD7%2FbtrY1mwyKiG%2Fh6xsx7J5jbAVuPaYifkkq0%2Fimg.jpg)
🚀 속성 선택자 not equal 구현하기 [attr!=value]
Attribute Selector not equal 구현 CSS 속성(Attribute) 선택자 문법에는 equal 연산자와 함께 다양한 기호 문법을 지원한다. [attr=value] : attr 속성이 정확히 value인 요소를 선택 [attr~=value] : attr 속성이 정확히 value인 요소를 선택 [attr|=value] : attr 속성을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택 [attr^=value] : attr 속성을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택 [attr$=value] : attr 속성을 가지고 있으며, 접미사로 value가 값에 포함되..
🚀 Background 이미지 미리 로드 기법
background-image preload 이미지를 이용한 버튼이라던지, css의 백그라운드 이미지를 이용한 ui와 사용자가 상호작용할때, 만일 그 ui가 마우스hover같은 사용자 동작에 따라서 나중에 나타내는 형식이라면 이미지 로드되는동안 ui가 망가지는 현상이 있을 수가 있다. 따라서, css에 필요한 이미지 소스를 미리 불러오는 트릭을 소개해본다. 또한 이 방법은 브라우저에 미리 요청하기 때문에 동시에 비동기로 한꺼번에 다운로드하여 로딩 속도 향상이 있을수도 있다. /* body태그의 가상선택자를 이용한다 */ body::after{ /* 소스만 다운받고 화면은 나태내지 않는다. (숨김 처리) */ position:absolute; width:0; height:0; overflow:hidden;..
🚀 스크롤 기능은 살리고 스크롤바 만 가리기
스크롤바 가리기 스크롤 자체 기능은 놔두면서 스크롤바만 없애는 코드이다. /* 전체 가리기 */ body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } /* 특정 부분 스크롤바 없애기 */ .box{ -ms-overflow-style: none; } .box::-webkit-scrollbar{ display:none; } See the Pen Hide the Scrollbar in CSS but Allow Scrolling (div) by HubSpot (@hubspot) on CodePen. [CSS] 🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리 Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 ..
🚀 position fixed + absolute 같이 적용하는 법
position fixed + absolute 같이 적용하는 법 웹페이지를 만들때, 어떤 요소를 고정(fixed)했는데, 기본적으로 차지하고 있는 공간을 없애고(absolute) 완전히 자유로운 요소로서 다루고 싶을 때가 있다. 본 블로그의 우측하단 구독카드 엘리먼트 역시 이런식으로 구현되어있다. 우선 fixed와 absolute는 position의 개별속성으로서, 원래는 둘이 동시에 적용이 불가능하다. 하지만 트릭을 이용해서 둘의 합성을 구현할수 있다. 부모 엘리먼트를 fixed처리하고 그안의 자식 엘리먼트를 absolute처리하면 된다. /* 부모 엘리먼트 */ .position { position: fixed; height: 100%; } /* 자식 엘리먼트 */ .position .row { po..
