코드로 우주평화

Tailwind CSS 는 간단한 유틸리티 클래스를 제공해 마크업에 쉽게 스타일링을 적용할 수 있습니다. 이번 글에서는 텍스트의 줄바꿈을 방지하고 긴 문자열을 생략(...)하는 방법을 소개하겠습니다.이를 위해 Tailwind CSS 의 whitespace-nowrap와 truncate 클래스를 사용해보겠습니다.  예제 코드아래 코드는 Tailwind CSS를 사용해 줄바꿈이 발생하지 않도록 하고긴 문자열이 있을 때 ...로 생략되도록 설정하는 간단한 예제입니다. 줄바꿈되지 않는 레이블입니다. 이 내용은 매우 긴 설명입니다. 이 설명은 이 컨테이너의 너비를 초과하면 생략 기호로 표시됩니다.   클래스 설명1. whitespace-nowrap이 클래스는 텍스트가 줄바꿈되지 않고 한 줄..

이번 글에서는 React와 Tailwind CSS를 사용해서 간단한 애니메이션과 상태 관리를 구현하는 방법을 알아보겠습니다.  본격적인 설명에 앞서 다음 두 가지 용어를 정리하고 넘어가겠습니다. useState : 컴포넌트 내에서 동적인 값을 저장하고 업데이트할 수 있게 해주는 React의 훅(Hook) 입니다.Tailwind CSS: Tailwind CSS는 클래스 이름만으로 다양한 스타일을 쉽게 적용할 수 있게 도와주는 도구예요. 이번 글에서는 상태에 따라 다른 CSS 애니메이션과 스타일을 적용합니다. 구현 예제 코드아래는 사용자가 텍스트를 입력하고 엔터 키를 누르면, 입력란이 화면 위쪽으로 이동하면서 더 이상 수정할 수 없게 되는 예제 코드입니다.import { useState } from "rea..

명대사를 활용한 자기소개 웹페이지 제작 데모 링크 : https://daco2020.github.io/introduce/ 깃헙 링크 : https://github.com/Daco2020/introduce 개발 목표 1. 일반적인 자기소개가 아닌 명대사를 활용한 컨셉있는 자기소개 페이지를 만들고 싶었음 2. 네비바를 클릭하면 해당 페이지로 스무스하게 이동시키고 싶었음 3. 내 이야기만 하는 것이 아닌, 다른 사람들과 소통할 수 있는 댓글 기능을 넣고 싶었음 사용 기술 HTML CSS - media query, keyframes JS Disqus Advanced Feature 1. 재미있게 본 콘텐츠의 명대사를 활용하여 내가 되고 싶은 개발자를 표현함 2. 네비바를 클릭하면 해당 페이지로 자연스럽게 이동하며..

웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다. 1번. HTML에서 태그를 활용해 넣는 방법. ​ 2번. CSS 에서 background-image 속성을 활용해 넣는 방법. { background-image: url("이미지 링크"); }​ 그렇다면 이 둘의 차이점은 무엇인가? (줄여서 1번, 2번이라 지칭하겠음) 1번은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다. 1번은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 2번보다 좋다. 1번은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 2번은 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않는다. (자세한 이유는 하단에) 그럼 이 둘을 어떨 때 사용하면 좋을까?..