Today I Learn - 2024-05-27 VOD강의* JavaScript 를 배워야 하는 이유① 자바스크립트는 쉽고 재미있게 배울 수 있다.- 자바스크립트는 문법이 C언어 Java 등에 비해 쉽고 직관적이어서 배우기 쉽다.② 배워놓으면 활용할 범위가 넓다.- 웹 서비스를 구성하는프론트엔드(화면부분)- 백엔드 서버, DataBase 등- 스마트폰 앱(안드로이드, ios등)③ 많은 사람들이 사용한다- 양질의 오픈소스코드 多- 좋은 라이브러리 多* JavaScript를 사용하는 방법- body 태그가 끝나기 직전에 script 태그를 넣어준다.① html... JavaScript html에서 사용 ...② js 파일... JavaScript js파일 사용 ...
참고(공식문서) : https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com* 1. Tailwind CSS ?① Tailwind CSS는 모든 HTML 파일, JavaScript 구성 요소 클래스 이름에 대한 기타 탬플릿을 스캔하고 해당 스타일을 생성한 다음 이를 정적 CSS 파일에 작성하는 방식으로 작동한다.② Tailwind CSS는 유틸리티 (uti..
Today I Learn - 2024-05-23* 오늘은 Tailwind 실습 위주로 진행!!- 자세한 내용은 github 😎https://github.com/hyesom2/learn-tailwindCSS GitHub - hyesom2/learn-tailwindCSSContribute to hyesom2/learn-tailwindCSS development by creating an account on GitHub.github.com벌써 수업을 들은 지도 한 달이 되었다. 물론 나는 5일이나 늦게 시작해서 초반에 깃이나 기초적인 HTML 내용을 듣지는 못했지만... 😓처음에 독학으로 공부할 땐 웹 접근성에 대해서는 생각해 본 적이 한 번도 없었는데 수업을 듣고 난 후에는 어느 웹사이트를 들어가든 레이..
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:..
