2024/05/12안녕하세요 lika-7 입니다이번시간에는 tailwind css 의 색상설정 방법을 다루겠습니다 tailwind CSS 색상 클래스   무채색 이름 규칙 접두사-색상명/불투명도 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스불투명도는 생략 가능합니다 접두사는색상을 의미하는 bg택스트 색상을 의미하는 text경계 색상을 의미하는 border를 이용할수 있습니다bg-black/70 유채색 이름 규칙 접두사-색상명-채도/불투명도 ">HTML 삽입미리보기할 수 없는 소스채도는 50, 100, 200, 300, 400, 500, 600, 700, 800, 900const Color = () => { return ( Color..

2024/04/24안녕하세요 lika-7 입니다이번시간에는 react 환경상 tailwind css 설치 방법 과 개념을 설명하겠습니다. tailwind란tailwind css는 부트스트랩 같은 CSS 프레임워크를 쉽개 개발할수 있게 해주는 저수준 프레임워크입니다그렇기에 css 컴포넌트를 제공하지 않습니다btn btn-primary 같은 것을 지원하지 않는다는 이야기 입니다컴포넌트는 tailwind css의 플러그인을 사용하면됩니다daiyui를 많이 사용합니다모듈 설치yarn add -D postcss autoprefixer tailwindcsscss를 작성할 때 -webkit, -moz, -ms 등으로 대표되는 벤더 접두사를 이용해 브라우저 호환성 문제에 대응..

2024/03/04 안녕하세요 lika-7 입니다 이번시간에는 반응형 웹을 다루겠습니다. 해상도와 뷰포트 이해하기 레이아웃을 반응형으로 설계하려면 기기의 해상도를 이해해야 합니다. 모바일과 태블릿 등 작은 디스플레이에는 일반 모니터의 픽셀 기준을 적용할수 없습니다. 이를 위해 도입된 것이 뷰포트 입니다. 뷰포트를 통해 기기의 해상도 기준으로 렌더링을 할수 있습니다. 미디어 쿼리 반응형 웹을 구현하기 화면의 크기에 맞춰 레이아웃을 다시 구성해야 합니다. 이를 위해 미디어 쿼리를 사용합니다 미디어 쿼리 작성 방법 요소 사용 @media 사용 @media 미디어_타입 and (조건식) {스타일_선언} @media screen and (max-width: 640px){ /* 640px 이하부터 적용할 스타일 선..

2024/03/04 안녕하세요 lika-7 입니다. 이번시간에는 flex 속성을 다루겠습니다. 플렉스 박스란 flex 속성을 사용한 레이아웃 모델을 플렉스 레이아웃이라고 합니다 이를 이용하여 요소들을 X축, Y축 기준으로 유연하게 배치할수 있습니다. box1 box2 box3 유연하게 배치할 요소의 부모 요소의 displau 속성값을 flex로 지정합니다. 이것을 flex conteiner하고 하고, 자식요소를 flex item이라고 합니다. box1 box2 box3 flex container 값은 flex와 inline-flex가 있습니다. flex는 block과 inline-flex는 inline-block 속성에 대응합니다. flex-direction flex-direction 속성을 이용해 가로..

2024/03/04 안녕하세요 lika-7 입니다. 이번시간에는 float 속성을 알아보겠습니다. float 속성 이해하기 css 의 float 속성은 어떤 요소를 웹 페이지의 기본 흐름에서 벗어나 그 다음 요소 위에 떠 있게 합니다. HTML요소는 화면에 렌더링 될 때 마크업 순서대로 위에서부터 아래로 나열되지만 float 속성을 사용하면 이러한 흐름과 상관 없이 요소를 배치할 수 있습니다. CSS의 float 속성은 주로 레이아웃을 조정하기 위해 사용됩니다. 요소를 왼쪽 또는 오른쪽으로 이동시키며 다른 내용이 주변에 흐르도록 할 수 있습니다. 주로 텍스트 주변에 이미지를 둘 때 사용되지만, 그 외에도 다양한 레이아웃 디자인에 활용될 수 있습니다. 이 텍스트는 이미지의 주변으로 흐르게 됩니다. Floa..