반응형 CSS35 [개발 규칙] CSS 규칙 CSS 코딩 컨벤션CSS 코딩 컨벤션은 CSS 코드를 일관성 있게 작성하여 가독성을 높이고, 유지보수를 용이하게 하며, 팀 협업을 원활하게 합니다. 아래는 CSS 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따릅니다./* 좋은 예: 2칸 들여쓰기 */.selector {property: value;}/\* 좋은 예: 4칸 들여쓰기 \*/ .selector { property: value; }2. 중괄호 위치(Braces)중괄호: 여는 중괄호는 동일한 행에 시작하고 닫는 중괄호는 새 줄에 위치합니다. /* 좋은 예 */ .selector { property: value; } /* 나쁜 예 */ .. 2024. 6. 8. Porfolio Page - (3) 반응형 웹 Index 1. 반응형 웹 2. 반응형 웹 예제 3. PWA 4. PWA 예제 5. 4 Reference 1. 반응형 웹 반응형 웹 디자인(Responsive Web Design) - 반응형 웹사이트를 통해 사이즈에 따라 content가 유동적으로 변화하게 구성 - 컨테이너에 맞게 보여짐 - Fluid Layout - flex grid / flex box / % / vw / vh로 구현 - Media Queries로 구현 가능 - Desktop(1024px~) / Tablet(768px~1024px) / Mobile(320px~480px)로 디자인 (사용법) - screen 대신 all, print, speech 가능 - and 대신 not, only, comma(,) 가능 @media screen an.. 2024. 2. 11. [Project] Porfolio Page - (2) HTML, CSS Index 1. HTML: 뼈대 잡기 2. HTML 예제 3. CSS: 꾸미기 4. CSS Layout 5. CSS Flex Box 6. CSS Grid 7. CSS 예제 8. CSS 새기능(2022) Reference 1. HTML: 뼈대 잡기 HTML - HTML은 웹 페이지 표시를 위해 개발된 마크업 언어 - 마크업 업어: 태그를 이용한 구조적 언어 - HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타냄 - 링크, 인용, 그외의 항목으로 구조적 문서를 만들 수 있는 방법을 제공 - 웹을 이루는 가장 기본적인 구조 - 웹의 구조와 의미를 표현 - W3C에서 표준화 - 브라우저 호환성에 따라 사용 가능한 tag가 다름. (HTML 구성 요소) - !DOCTYPE: 지원되는 파일 .. 2024. 2. 11. [진행 계획표] Year03. 프로그래밍 기본 JavaScript / TypeScript (선택이유) - 웹 개발에 있어 주요 언어 - 프론트 엔드 / 백엔드 모두 사용 가능 (환경 설정) - Windows: Visual Studio Code + Node.js - Mac OS: Visual Studio Code + npm 1) Javascript 기본 문법 - Vanilla Javascript - Modern Javascript - Javascript documentation - Node.js - Node.js documentation - npm 2) Typescript 기본 문법 - Typescript - Typescript 가이드북 3) Frontend - HTML / CSS - CSS documentation - CSS Style Sheet -.. 2023. 9. 16. [컴공 학습 순서] 4. Javascript Javascript + Typescript + Visual Studio Code + Node.js - Vanilla Javascript - Modern Javacript - Node.js - MDN Web Docs - Typescript / Typescript(ko) - npm (Frontend) - Fetch API - Vue / Vue(ko) - React - NextJS - tailwind CSS - styled-components (Backend) - Express - NestJS (AI) - TensorflowJS - Three.js - 생활 코딩 - HEROPY 블로그 - DreamCoding Academy 2023. 8. 19. 이전 1 2 3 4 다음 반응형
