개발자로 하루를 멋지게...

ul 태그 내의 li 요소 사이에 수직 바(Vertical Bar)를 추가하려면, CSS를 사용하여 li 요소 간에 경계를 설정할 수 있습니다. 다음은 그 예입니다: Item 1 Item 2 Item 3 Item 4 이 예제는 ul 요소를 플렉스 컨테이너로 만들고, 각 li 요소의 오른쪽에 수직 바를 추가하는 방식입니다. 마지막 li 요소에는 수직 바를 추가하지 않도록 :not(:last-child) 선택자를 사용했습니다. 위 코드에서는 각 li 요소에 수직 바를 추가하고, CSS의 ::after 가상 요소를 사용하여 수직 바를 생성했습니다. position: absolute를 사용하여 바의 위치를 조정하고, right: -10px로 바의 위치를 세밀하게 설정했습니다. 필요에 따라 색상, 위치 등..

CSS에서 Flexbox와 Grid 레이아웃 시스템은 각각 다른 상황에 적합하며, 다음과 같은 기준을 통해 어떤 시스템을 사용할지 결정할 수 있습니다:FlexboxFlexbox는 일차원 레이아웃 시스템으로, 주로 한 방향(행 또는 열)으로 아이템을 배치하는 데 유리합니다. 다음과 같은 상황에서 Flexbox를 사용합니다:단일 행 또는 단일 열 레이아웃: Flexbox는 단일 행이나 단일 열로 구성된 간단한 레이아웃에 적합합니다. 예를 들어, 네비게이션 바, 버튼 그룹, 카드 목록 등.정렬과 간격 조정: Flexbox는 아이템을 중앙 정렬하거나, 끝에 정렬하거나, 고르게 간격을 조정하는 작업을 쉽게 할 수 있습니다. justify-content와 align-items 속성을 활용해 간단하게 배치할 수 있습..

HTML의 태그와 태그는 각각 다른 용도와 목적을 가지고 있습니다. 사용 시기와 방법을 명확히 이해하는 것은 웹 페이지의 의미를 명확하게 하고, 접근성을 높이며, 사용자 경험을 향상시킵니다.  태그사용 시기:폼 제출: 폼 데이터를 서버에 전송할 때 사용합니다.JavaScript 액션: JavaScript 함수를 호출하거나 이벤트를 트리거할 때 사용합니다.인터랙티브 요소: 페이지 내에서 동작을 수행하는 버튼 (예: 모달 열기, 콘텐츠 토글 등)으로 사용합니다.예제:폼 제출 Name: Submit 은 폼 데이터를 서버에 제출합니다.JavaScript 액션Click Me  은 클릭 시 JavaScript 경고를 표시합니다. 태그사용 시기:내비게이션: 다른 페이지나 외부 사이트로 이동할 때..

CSS에서 button과 a 요소에 같은 클래스 이름을 적용했을 때, 요소의 사이즈가 다르게 나타나는 이유는 기본 스타일과 레이아웃 특성 때문입니다. HTML 요소들은 브라우저마다 기본 스타일이 다르게 적용되며, 요소의 디스플레이 특성(display property)이 요소의 크기와 레이아웃에 영향을 미칠 수 있습니다.기본 스타일 차이브라우저는 각 HTML 요소에 기본 스타일을 적용합니다. 이 기본 스타일은 요소의 패딩, 마진, 보더, 폰트 사이즈, 그리고 기타 속성들을 포함합니다. button과 a 요소는 이러한 기본 스타일에서 차이가 있습니다.예를 들어, 기본적으로 button 요소는 내부 패딩과 테두리를 가지고 있을 수 있으며, a 요소는 그러한 기본 스타일이 없을 수 있습니다.디스플레이 속성 차이..

tailwindcss 실시간 반영 할때는 아래와 같이 package.js 추가 하면 된다. "dev": "npx tailwindcss -i src/styles.css -o public/styles.css", "watch": "npx tailwindcss -i src/styles.css -o public/styles.css --watch"

일반적으로 tailwinds build시 아래와 같이 가이드를 해준다. tailwindcss build src/styles.css -o public/styles.css 하지만 내가 만든 커스텀 css 반영이 안된다. 그래서 아래와같이 npx -i 명령어를 주니 커스텀 css가 되었다. npx tailwindcss -i src/styles.css -o public/styles.css