1. HTML5기본구성 🔗MDN head 요소에 포함할수 있는 요소들 요소명 설명 <meta> HTML 문서의 설명, 키워드 문서의 작성자 지정 <title> HTML 문서의 제목 지정 <link> 외부 CSS 파일을 연결할때 사용 <style> 내부 CSS 를 정의할때 사용 <script> 자바스크립트를 외부, 내부에 정의할때 사용 2. 유효성검사 HTML 유효성검사 : https://validator.w3.org/ CSS 유효성 검사 : https://jigsaw.w3.org/css-validator/ 3. 기본규칙 요소는 … 더 읽기
1. 관련 링크 항목 링크 HTML 표준 (WHATWG) https://html.spec.whatwg.org/ HTML 유효성 검사 https://validator.w3.org/ CSS 유효성 검사 https://jigsaw.w3.org/css-validator/ MDN Web Docs (한국어) https://developer.mozilla.org/ko/ Can I Use (브라우저 호환성) https://caniuse.com/ Info: 💡 위 링크는 즐겨찾기 해두면 평생 씁니다. 특히 MDN 은 모든 HTML/CSS/JS 문법의 표준 레퍼런스. 2. VSCode 설치 대표적인 무료 코드 에디터. 설치 방법은 두 가지 … 더 읽기
1. 웹서비스란? Info: 💡 웹서비스 = 인터넷을 통해 주고받는 정보·기능의 집합. 우리가 매일 쓰는 네이버, 유튜브, 인스타그램이 모두 웹서비스. 🐶 HTML 은 웹서비스의 근간이 되는 언어입니다. 웹은 두 주체가 만나는 곳입니다. 구분 설명 클라이언트(Client) 정보를 요청 하는 쪽. 우리가 쓰는 웹브라우저(Chrome, Edge, Safari 등). 서버(Server) 정보를 가지고 있다가 요청을 받으면 응답 하는 쪽. 24시간 켜져 … 더 읽기
GSAP(GreenSock Animation Platform)은 웹에서 가장 많이 쓰이는 JavaScript 애니메이션 라이브러리이다. CSS나 순수 JavaScript보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화된 애니메이션 전용 라이브러리이며, 12만 개 이상의 사이트에서 사용되고 있다. 2024년 10월 Webflow가 GSAP을 인수했다. 2025년 4월 30일부터 GSAP 3.13 버전과 함께 모든 플러그인이 100% 무료로 전환되었다. 이전에 유료였던 SplitText, MorphSVG 등도 상업 프로젝트에서 무료로 사용할 수 … 더 읽기
텍스트 애니메이션 결과가 눈에 즉시 보이는 단계다. SplitText — 글자 분해 등장 Note: GSAP SplitText.create()를 사용해서 h1 제목 텍스트를 글자 단위로 분해하고, 각 글자가 아래에서 위로 순차적으로 페이드인하는 애니메이션을 만들어줘. stagger 0.03초, ease는 power3.out으로 설정하고, 애니메이션 완료 후 revert()로 DOM을 복구해줘. Tip: React + @gsap/react의 useGSAP 훅을 사용해서 SplitText.create()로 h1 제목 텍스트를 글자 단위로 분해하고, … 더 읽기
Tailwind CSS 보통 웹사이트를 꾸밀 때는 별도의 CSS 파일에 코드를 길게 작성해야 한다. 하지만 Tailwind는 "이미 만들어진 태그(Class)"를 HTML에 바로 붙여서 디자인하는 방식이다. 테일윈드 공식 테일윈드 치트시트 공식테일윈드 피그마 스타일파일 테일윈드 디자인토큰 생성기 피그마 플러그인 1. Basics — 설치 NPM 설치 (Vite 기준) 터미널에 아래 명령어 입력 npm install tailwindcss @tailwindcss/vite vite.config.js 파일에 아래 코드 … 더 읽기