CSS

가끔 토이 프로젝트를 만들다보면 스크롤의 존재 여부가 은근히...UI에 방해가 될 때가 있다.이를 제거해보자. 물론, 기능은 그대로 존재하고!모든 페이지에서 스크롤을 없애기 위해서는 글로벌 스타일에 이를 적용하면 된다.필자는 React로 프로젝트를 만들었기에 글로벌 스

가끔씩 일반적인 가로 방향이 아니라, 세로 방향으로 글자를 보여주고 싶을 때가 있다.한 글자씩 br태그로 나눠서 작성할까? 한 글자씩 p태그로 만들어줄까?더 간단한 방법이 있다. 한번 알아보자!코드부터 설명하자면 아래와 같다.간단하게 예시를 만들어보자.이 속성은 글자를

ul이나 ol은 li만을 직계 자식으로 갖는다.이러한 이유로 li 내부에만 다른 태그를 사용할 수 있게되는데,많은 경우 li를 사용해서 드랍다운 메뉴나 기타 등등의 메뉴를 구현한다.이 때 li의 글자 부분을 클릭해야지만 이동이 된다면 굉장히 UX가 좋지않을 것이다.그래

table 태그로 게시판을 만들거나 할 때 제목이 길어져서 크기가 멋대로 변하는 것을 겪은 적이 있을 것이다. 다른 사이트들을 찾아보면 ...이라는 표시로 제목이 잘리는 것을 볼 수 있는데, 이는 직접 입력한 것일까? 그럴리가 없다. 방법을 알아보자!

input 태그를 사용하면 focus 이벤트가 발생했을 때 자동적으로 입력란에 하이라이트가 생긴다.

보통 코멘트나 게시글 업로드 기능을 만들 때, textarea 태그를 활용해서 입력을 받는다.그런데 문제는, 이를 나중에 보여줄 때 생긴다.대부분의 태그들은 개행 처리 등을 인식하지 못하기 때문에 일렬로 쭈욱 나열된다.이를 해결해보자.누군가 다음과 같은 게시글(혹은 코

JavaScript로 클래스를 추가, 제거하는 것으로 fade in, fade out을 부여했다.클래습 변경으로 인해 display:none;이 되었을 때, transition 속성을 통해 부드럽게 전환이 될 것이라고 생각했는데....적용이 안된다!왜 적용이 안되는 것

input[type="date"]의 캘린더 아이콘을 커스텀 해보자!

예전에 무한 캐러셀 슬라이드를 만들었던 적이 있다. 이번에는 약간 다른 무한 로고 슬라이드를 만들어보려고 한다. 원리 우선, 무한 슬라이드를 구현하기 전에 간단하게 슬라이드가 어떻게 동작하는지 이야기하고자 한다. 아래 이미지를 보자. 참고 이미지 logos라는