728x90
반응형
[CSS] :not() 선택자(selector) 초간단 사용방법 포스팅 썸네일 이미지

개발/CSS3

[CSS] :not() 선택자(selector) 초간단 사용방법

CSS를 작성하다보면 "~이 없을 경우"와같이 특정 선택자가 없을 때에 대한 스타일 처리를 하고 싶은 경우가 생깁니다. 이번 포스팅에서는 특정 선택자가 포함되어 있지 않는 요소에 대하여 스타일을 적용하기 위한 방법에 대해 소개하도록 하겠습니다. :not() 선택자 CSS :not() 선택자는 부정(negation) CSS 가상클래스로CSS의 :not() 선택자를 사용하면 특정 선택자가 제외된 경우에 대한 스타일 적용을 할 수 있습니다. 일반적으로 선택자(selector)를 해당 요소를 선택하기 위해 사용되지만 not 선택자는 해당 선택자를 제외한 나머지 요소를 선택하기 위해 사용합니다. not 선택자를 활용하면 실무에서 꽤 유용하게 사용되는 경우가 많기 때문에 알아두면 작업하는데 많이 도움이 될 것입니다..

2021.02.09 게시됨

CSS에서 텍스트 ellipsis('...') 말줄임 표시 처리하는 방법 (2줄, 3줄) 포스팅 썸네일 이미지

개발/CSS3

CSS에서 텍스트 ellipsis('...') 말줄임 표시 처리하는 방법 (2줄, 3줄)

서버사이드에서 데이터를 내려줄 때 강제로 텍스트를 truncate 처리한 후 내려줄 수 있지만, CSS만으로 텍스트를 원하는 단위로 자를 수 있다는 것 알고 계셨나요? 이번 포스팅에서는 CSS를 활용해서 텍스트 말줄임 처리하는 방법에 대해서 알아보도록 하겠습니다. 한 줄 단위로 텍스트 자르는 방법 CSS로 말줄임 처리를 하기 위해서 글자를 출력할 공간이 필요합니다. 기본적으로 CSS display 속성의 inlline 값은 요소의 너비를 가질 수 없기 때문에 이를 block으로 바꿔줌으로써 너비를 가질 수 있게 변경해야 합니다. .box { display: block; } 요소에 너비가 지정되었다면 이제 텍스트는 너비를 넘어서게 되면 자동으로 줄바꿈을 하게 됩니다. 자동으로 줄바꿈되는 것을 white-s..

2021.01.25 게시됨

CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same) 포스팅 썸네일 이미지

개발/CSS3

CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same)

CSS 작업을 하다보면 너비값(width)은 가변으로 설정이 되지만, 높이값(height)은 가변으로 설정이 되지 않아서 고민을 해본 경험이 있을 것입니다. 이번 포스팅에서는 너비값 기준으로 높이값도 동일하게 가변으로 적용하기 위한 방법에 대해서 다뤄보도록 하겠습니다. 구현 예시 우리가 구현해볼 예시는 아래와 같습니다. CSS로 너비값이 퍼센트(percentage)로 설정되어 있고, 높이값 또한 퍼센트로 세팅해서 디바이스의 크기에 따라 원하는 가변 사이즈의 정사각형을 만들어 내는 것 입니다. 아래 코드와 같이 가변 너비값과 동일하게 높이값을 동일하게 퍼센트로 설정하면 어떻게 될까요? .box { float: left; width: 25%; height: 25%; background-color: blue;..

2020.11.26 게시됨

overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법 포스팅 썸네일 이미지

개발/CSS3

overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법

웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제를 한번 다뤄보도록 하겠습니다. See the Pen BajEOGZ by ruden (@ruden91) on CodePen. 예시를 보면 overscroll-behavior 속성이 auto로 설정된 기본값 영역은 스크롤 영역이 모두 끝나면 부모 스크롤 영역이 움직이기 시작합니다. 이것을 스크롤 체이닝(스크롤이 연결되어 있기 때문에 체이닝이라는 단어를 사용)이라고 합니다. 하지만 overscroll-behavior 속성이 contain 값인 경우에는 어떻게 동작할까요? contain 값을 적용한 스크롤 영역..

2020.07.28 게시됨

jQuery contains() 메서드를 활용한 검색기능 구현 포스팅 썸네일 이미지

개발/jQuery

jQuery contains() 메서드를 활용한 검색기능 구현

서론 안녕하세요. 정말 오랜만에 포스팅을 남기네요 ㅎㅎ 겨울방학이 시작하고 1월중말까지 정말 많은 일들이 있었네요.ㅎㅎ 사실 이 일들때문에 글을 작성하지 못했다는 것은 핑계인 것 같고, 앞으로 꾸준히 기술 포스팅을 하도록 하겠습니다. 그래도 좋은 소식이 있다면, 2월 1일부터 프론트엔드 개발자로서 첫 출근을 시작한다는 점입니다. 그래도 학부시절에 나름대로 이쪽 분야로 가고싶어서 독학을 하며 실력을 키워나갔는데, 첫 직장을 제가 가고싶은 분야로 나아갈 수 있게 되어서 정말 만족스럽습니다.ㅎㅎ 이제 앞으로 역량을 많이 쌓아나가면서 정말 전문가다운 포스팅을 많이 남기도록 하겠습니다! ㅎㅎ 오늘 제가 포스팅할 주제는 jQuery의 contains() 메서드를 활용한 간단한 검색기능 구현입니다. contains(..

2017.01.29 게시됨

[UI 개발] responsive image gallery(반응형 이미지갤러리) 포스팅 썸네일 이미지

개발/UI개발

[UI 개발] responsive image gallery(반응형 이미지갤러리)

오늘 예제는 반응형 이미지갤러리입니다.자바스크립트나 jQuery를 활용하지 않고, 순수 HTML, CSS 코딩을 통해 반응형 이미지갤러리를 구현하는 것이 포스팅의 목표입니다. 바로 예제를 보면서 시작해보겠습니다. HTML 시맨틱마크업 CSS3 이미지는 각자 파일의 경로에 맞춰서 작성해주시기 바랍니다. 위의 코드는 브라우저나 디바이스의 크기에 따라 유동적으로 변하게 만들어 줍니다. 맨 위의 @media all and (min-width: 960px)는 960px 이상 사이즈부터는 #gallery_layout을 가로, 세로 가운데 정렬을 시켜주기 위해 사용했습니다. 테스트는 하단의 URL에서 확인하실 수 있습니다. http://mismaven.kr/test/responsive_gallery/index.htm..

2016.12.10 게시됨

[CSS3] css3 가운데(중앙) 정렬 포스팅 썸네일 이미지

개발/CSS3

[CSS3] css3 가운데(중앙) 정렬

css를 활용해 가로 및 세로로 중앙정렬하는 방법에는 정말 많은 방식들이 있습니다. 각 중앙정렬 방법은 모두 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 중앙정렬 기법을 만들어낼 수 있습니다. 블록 만들기 반응형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다. 컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다. 테이블로 바꾸기 이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이..

2016.11.09 게시됨

[자바스크립트로 구현한 알고리즘] List Filtering 포스팅 썸네일 이미지

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] List Filtering

In this kata you will create a function that takes a list of non-negative integers and strings and returns a new list with the strings filtered out. Example filter_list([1,2,'a','b']) == [1,2] filter_list([1,'a','b',0,15]) == [1,0,15] filter_list([1,2,'aasf','1','123',123]) == [1,2,123] 필자답안 map을 사용하긴 했지만, 뭔가 2%부족한 답안입니다. 제가 원했던건 map을 사용해서 type이 number라면 그 값만 나오게 하는 것이었는데 number가 아닌 값들은 모두 undef..

2016.10.19 게시됨

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate()) 포스팅 썸네일 이미지

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 animate() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. 이 부분은 예제를 가지..

2016.10.18 게시됨

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle()) 포스팅 썸네일 이미지

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle())

이번에 다뤄볼 기능은 jquery - slide() 메소드입니다. jQuery Effects - Sliding slide 메소드는 요소를 위 그리고 아래로 움직이게 도와주는 기능을 가지고 있습니다. slide 메소드는 아래와 같이 3가지 기능을 가지고 있습니다. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() 메소드는 요소를 아래로 내려주는 역할을 합니다. 문법 $(selector).slideDown(speed,callback); 인자는 지금까지 소개했던 메소드와 같이 속도를 제어할 수 있는 인자와 추가적인 기능을 적용시킬 수 있는 callback 함수 인자를 가지고 있습니다. 아래는 slideDown() 메소드의 예시입니다..

2016.10.18 게시됨

텍스트 에디터 Atom(아톰) 패키지 추천(color-picker) 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(color-picker)

color picker 구글 확장프로그램이나 기타 응용프로그램에서 자주 사용되는 color picker입니다. 꽤나 유용한 소프트웨어죠 !원하는 색상이 있으면, 찍어서 색상코드를 볼 수 있는 소프트웨어입니다. 그 기능을 Atom에서도 사용하게 도와주는 패키지가 있는데요. 바로 아래처럼 색상을 바로 뽑아볼 수 있습니다. Preview 매우 편리한 기능이죠? 설치법 아래는 color picker 명세입니다. A Color Picker for AtomRight click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and..

2016.10.17 게시됨

텍스트 에디터 Atom(아톰) 패키지 추천(file-icons) 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(file-icons)

시각적으로 파일관리를 편리하게 도와주는 file-icons file-icons는 좌측이나 상단에 문서의 유형을 아이콘을 통해 시각적으로 구별하기 쉽게 만들어주는 패키지입니다. 이렇게 상단이나 왼쪽에 있는 네비게이션 부분의 문서들의 아이콘을 만들어줌으로써 시각적으로 어떤 파일인지 구별이 쉽게 만들어줍니다. 전에 소개드린 pigments와 함께 꼭 같이 사용하셨으면 할 패키지입니다. 설치법 아래는 file-icons의 명세입니다. file-icons If you've just updated and your icons are all messed up, please restart Atom before filing an issue.Some of the underlying icon fonts have updated..

2016.10.17 게시됨

텍스트 에디터 Atom(아톰) 패키지 추천(pigments) 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(pigments)

이번에 다룰 패키지는 pigments입니다.프론트엔드 개발을 하면서 가장 소름돋고 필요하다고 생각했던 기능을 atom에서 제공을 해줍니다. 바로 css 파일에서 backgorund나 color에 색상을 적용할 때 코드 안에 컬러가 들어가는 것을 알 수 있습니다. 정말 효율적인 패키지이므로, atom을 사용하시는 분은 꼭 이 패키지를 받아서 사용하시길 바랍니다. 설치법 pigments 명세 A package to display colors in project and files:Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for..

2016.10.17 게시됨

[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자 포스팅 썸네일 이미지

개발/CSS3

[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자

Emmet? Emmet이란 editor plugin으로써 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜주는 툴입니다. 가령 긴 테이블을 코딩할 때, 손으로 입력하는 건 누가봐도 바보같은 짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보입니다. 물론 테이블 만드는 툴을 쓰는 게 가장 일반적인 방법이긴 합니다. 근데 언뜻 봐도 같은 태그의 반복임을 알 수 있는데요. 아래와 같이 자동완성을 해보면 어떨까요? table>tr*5>td*5 table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻입니다. Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있습니다. 기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 ..

2016.10.17 게시됨

[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법 포스팅 썸네일 이미지

개발/CSS3

[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법

웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다. px단위로는 height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법하는 방법에 대해서 알아보겠습니다. 아래 box 클래스에 height 100%를 먹여보았으나 정상적으로 작동하지 않는 것을 확인할 수 있습니다.하지만, 필요할 경우를 대비해서 한번 알아보도록하죠. HEIGHT:100%가 적용되게 하는 방법 생각보다 정말 간단하게 해결할 수 있는데요.html과 body 태그에 height 100%를 넣어주는 방법입니다. 위 코드를 적용시켜주면 정상적으로 box 클래스에 height 100%가 적용됨을 확인하실 수 있습니다. 원인 : %는 상대적인 값인데 div의 height값에 %를 적용하면 기준으로 삼을 상위..

2016.10.12 게시됨

[4강] 효율적인 CSS작업을 위한 SASS 강의 포스팅 썸네일 이미지

개발/SASS

[4강] 효율적인 CSS작업을 위한 SASS 강의

주석 처리 SASS 파일 내부에 주석을 처리하는 방법은 두 종류가 있습니다. 일반적으로 CSS와 동일하게 이런 방식으로 처리하는 방법과 이런 방식으로 처리하는 방법이 있습니다. 결론적으로 말하면 첫번째 방식은 SASS 컴파일의 결과물인 CSS 파일에도 그대로 반응되는 반면, 두번째 방법은 CSS 파일에 전혀 나타나질 않습니다. 그렇기 때문에 첫번째 방식은 CSS 파일에 저작권 또는 CSS 파일 버전 등을 표시할 때 사용하고, 두번째 방식은 SASS의 속성을 지정하여 유지보수 할 때 편합니다. 왜냐하면 CSS 파일 내부에 텍스트가 많으면 많을수록 브라우저가 사이트를 렌더링 하는 속도가 더뎌지게 될 것이고, 또한 CSS 속성에 대해서 굳이 개발자 이외의 사용자들에게 보여 줄 필요가 없다고 보기 때문입니다. ..

2016.09.29 게시됨

[3강] 효율적인 CSS작업을 위한 SASS 강의 포스팅 썸네일 이미지

개발/SASS

[3강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의 CSS 확장(CSS Extensions) 앞에서 Nested Rules라고 중첩하는 방법에 대해서 다뤄봤는데요. 다시 한번 설명하면, 중첩이란 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 활용하면, 적은 코딩으로 효율적이게 각 선택자에 속성을 지정해 줄 수 있습니다. 특히 사이트가 복잡해지기 시작하면, 하위 또는 자식 선택자들이 상당히 많아지게 되며, 각각의 하위 또는 자식 선택자를 지정하기 위해 부모 선택자까지 전부 CSS 코드에 넣기 시작하면 정말 코드가 복잡해집니다. 하지만 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 아주 편리한 기능입니다. CSS 확장에는 중첩뿐만 아니라 태그 선택자와 연계된 클래스 또는 아이디 선택자끼리 쉽게 묶어주는 ..

2016.09.28 게시됨

[2강] 효율적인 CSS작업을 위한 SASS 강의 포스팅 썸네일 이미지

개발/SASS

[2강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의 변수(Variables) 프로그래밍 언어에서 가장 많이 사용되는 부분이 바로 변수입니다. 변수를 이용하면 변수값만 변경함으로써 결과를 다르게 만들 수 있듯이, SASS에서도 반복적으로 많이 사용되는 부분, 예를 들어 font 모양이나 색상들을 변수로 지정해 놓고 이 변수값만 변경해 주면 CSS를 정말 간단하게 제어할 수 있습니다. SASS에서는 변수를 정의할 때 $ 기호를 사용합니다. 변수의 이름은 사용자에 의해서 지정할 수 있지만, 속성은 CSS의 속성을 지정해 줘야 합니다. 밑에 예제를 보도록 하겠습니다. 위 예시를 보면 $font_stack 이라는 변수와 $primary_color 라는 변수가 있습니다.각 변수들에는 CSS의 속성을 적용했습니다. $font_stack에는 Helveti..

2016.09.24 게시됨

[1강] 효율적인 CSS작업을 위한 SASS 강의 포스팅 썸네일 이미지

개발/SASS

[1강] 효율적인 CSS작업을 위한 SASS 강의

Sass 강의 Sass는 Syntactically Awesome Style Sheet라는 단어의 줄임말이며, 한글로 번역하자면 “문장 구성적으로 끝내주는 스타일 시트”라는 의미를 지닌다고 볼 수 있습니다. "문장 구성적으로 끝내준다?"라는 의미는 사스를 학습하게 되면서 무슨 말인지 알게 될 것입니다.웹사이트를 디자인할 때 가장 필수 요소 중 하나가 바로 스타일시트인데요.이 스타일시트는 생각보다 단순하지만 웹사이트 규모가 커지게 되면, 소위 '노가다'하는 느낌이 들며, 심지어 코드 길이가 1000줄이 넘어가면 뭐가 뭔지 알 수 없는 경우도 생겨 버립니다. 하지만 사스를 활용하면 스타일시트 작업이 마치 프로그래밍하는 것처럼 체계적이고, 구조적으로 개발할 수 있게 됩니다. 사스에 대한 소개는 간단하게 여기서 ..

2016.09.24 게시됨

728x90
반응형