Today I Learn - 2024-05-22* Tailwind CSS ?- Utility-first(유틸리티 기반)의 CSS프레임워크- 완제품 형태가 아니라 필요한 부품을 조립하는 방식- 디자인 및 개발의 자율도가 높아져 창의성과 재사용성, 생산성 등을 높일 수 있다.* Tailwind CSS 설치 & 셋팅* 참고 : https://tailwindcss.com/docs/installation Installation - Tailwind CSSThe simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.tailwindcss.com* 기본 테마 확장- 테마 옵션 기본값..
Today I Learn - 2024-05-20* Node.js- javascript를 돌릴 수 있는 실행환경- 웹만이 아닌 브라우저가 아닌 Node라는 환경에서도 스크립트를 구동할 수 있다.- 패키지를 npm을 통해 설치할 수 있다.- Node를 설치하면 npm은 자동으로 설치된다.- npm / yarn / pnpm- npm install > 패키지를 관리하는 package.json의 dependencies(1) 전역으로 설치 추천 : degit, add-gitignore 등(2) 지역으로 설치 추천 : fiveserver, Sass 등 협업으로 할 땐 지역으로 까는게 좋음- 설치가 제대로 안 될 경우> echo '{}' > package.json> npm install 설치할package* PostC..
Today I Learn - 2024.05.17* 스프라이트 이미지- 스프라이트 이미지는 여러개의 이미지가 필요한 경우 사용된다.- 이미지를 각각의 별도의 파일로 관리하는 것 보다는 하나의 파일로 만들어서 HTTP 요청수가 줄어들어서 메모리와 네트워크 사용량 측면에서 효율적이다.- 스프라이트는 규칙성으로 만드는게 좋다.(1) 비트맵 스프라이트 이미지 (2) svg 스프라이트 이미지 * media query vs container query- 둘 다 반응형으로 지정할 수 있다.- media query는 viewport(브라우저 너비) 를 기준- container query는 특정 컴포넌트 요소를 기준* container query ?(1) 반응형을 적용 할 컴포넌트 요소타입 지정하기 : container-..
Today I Learn - 2024.05.16 (1)* grid 로 레이아웃 잡기 (0) 공통 CSS/* common layout */.container { display: flex; flex-flow: column nowrap; align-items: center; min-height: 100vh; .header, .navigation, .footer { width: 100%; inline-size: 100%; height: 100px; block-size: 100px; }}.main { max-width: 100%; width: 90%; flex: 1 0 auto;} (1) grid-areas 로 잡기.main { --grid-gap: 24px; --colu..
Today I Learn - 2024.05.14* 유연하게 미디어(이미지, 비디오) 다루는 법(1) 반응형 이미지- div / span 요소 - figure 요소(1) - figure 요소(2) : alt=""를 안쓰고 figcaption 내용이 긴 경우 aria-describedby로 연결 이미지 캡션- picture, source 요소- 브라우저는 각 하위의 source 요소를 고려하고 그 중에서 가장 일치하는 항목을 선택함- source 요소에 일치하는 항목이 없을 땐 picture의 url이 선택됨 ⭐ ⭐ ⭐ ⭐ ⭐ 레이아웃과 컴포넌트는 분리해서 작성하자 ⭐ ⭐ ⭐ ⭐ ⭐ /* 레이아웃 */.box { width:..
Today I Learn - 2024.05.13* responsive web (반응형 웹)- 반응형 웹 설계는 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되면서 사용성을 보장하는 웹 디자인 접근방식@media (조건) { /* 조건이 만족되면 적용되는 style */}@media (min-width: 768px) { /* 768px ~ */}@media (max-width: 1200px) { /* ~ 1200px */}@media screen and (min-width: 768px) { } === @media (min-width: 768px) { }- 조건은 min-width, max-width를 기준 (반응형 웹 핵심 기술)- 안에 viewport가 선언되어야함* flex-basis- fl..
Today I Learn - 2024.05.10* box-sizing- CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.content-box : 기본값, width + padding + borderborder-box : 테두리와 안쪽 여백의 크기도 요소의 크기로 고려. padding을 주어도 width 사이즈를 유지* flexflex-containerflex-flowjustify-content (메인축)align-items (교차축)order* float (떠있다)- 요소가 기본 레이아웃 흐름에서 ..
Today I Learn - 2024.05.09* input type의 비밀?- input의 type에 따라 모바일 환경에서의 키패드 모양이 달라진다?!* 인 경우 모바일에서 숫자 키패드가 올라온다.* 인 경우 모바일에서 숫자+문자 키패드가 올라온다.* icon을 쓸 때 주의점- web font를 쓰기 위해 fontawesome을 많이 사용한다. 이 때, 가 아닌 을 사용하도록 하자.- 로 아이콘을 나타낼 때 대체텍스트를 비워둔다. (alt=" ") → 스크린리더가 읽지 않는다.- CSS로 background-image로 넣기* box-shadow- 요소 박스에 그림자 효과를 넣는 속성이다..box { box-shaodw: 5px 5px 0 0 rgba(0, 0, 0, 0.7); /* box-sh..
