본문 바로가기
반응형

분류 전체보기276

[HTML] HTML 기본 HTML을 단계별로 학습하는 것은 매우 좋은 방법입니다. HTML (HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어로, 웹 개발의 기본이 됩니다. 1단계: HTML 기본 구조 이해하기HTML 문서는 특정한 구조를 가지고 있습니다. 가장 기본적인 HTML 문서의 구조는 다음과 같습니다: Hello, World! This is a paragraph.: 문서가 HTML5를 사용하고 있음을 선언합니다.: HTML 문서의 루트 요소입니다.: 메타데이터, 제목, 스타일, 링크 등을 포함합니다.: 문서의 제목을 정의하며, 브라우저 탭에 표시됩니다.: 실제 콘텐츠가 들어가는 부분입니다.2단계: HTML 요소와 속성HTML 요소는 태그로 구성되며, 속성을 가질 수 있습니다... 2024. 6. 8.
[개발 규칙] 협업 규칙 협업을 위해 JavaScript 코딩 컨벤션을 명확히 정의하고, 이를 팀 내에서 일관되게 사용하기 위해 다양한 도구와 방법을 활용할 수 있습니다. 아래는 협업을 위한 구체적인 방안입니다.1. 코드 스타일 가이드 설정팀 내에서 사용할 코드 스타일 가이드를 선택하거나 정의합니다. Airbnb, Google, Standard 등 유명한 스타일 가이드를 참고할 수 있습니다. 스타일 가이드 문서를 작성하고 공유합니다.2. 린터(Linter)와 포매터(Formatter) 설정코드 스타일을 자동으로 검사하고 포맷팅하는 도구를 설정합니다.ESLint 설정ESLint는 코드 스타일을 강제하기 위한 린터입니다. 프로젝트 루트에 .eslintrc.js 파일을 생성하고 다음과 같이 설정합니다:module.exports = {.. 2024. 6. 8.
[개발 규칙] 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.
[개발 규칙] HTML 규칙 HTML 코딩 컨벤션HTML 코딩 컨벤션은 HTML 코드를 일관되게 작성하여 가독성을 높이고, 유지보수를 쉽게 하며, 협업을 원활하게 합니다. 아래는 HTML 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따르세요.Text Text```2. 태그와 속성의 소문자 사용소문자 사용: 태그와 속성 이름은 소문자로 작성합니다.```3. 속성 값에 따옴표 사용속성 값 따옴표: 속성 값은 항상 따옴표로 감쌉니다.```4. 자체 닫는 태그(Self-closing Tags)자체 닫는 태그: XHTML처럼 자체 닫는 태그는 /를 사용하지 않습니다.```5. 의미론적 태그 사용(Semantic HTML)의미론적 태그: 가능한.. 2024. 6. 8.
[Roadmap] Javascript 목차[0. 환경설정](0.0 Windows)0.0.1 VSCode 설치0.0.2 Node.js 설치0.0.3 Browser 설치 (0.1 Ubuntu)0.1.1 VSCode 설치0.1.2 Node.js 설치0.1.3 Browser 설치 (0.2 MacOS)0.2.1 VSCode 설치0.2.2 Node.js 설치0.2.3 Browser 설치 [1. Javascript](1.1 Vanilla Javascript)1.1.0 환경설정1.1.1 변수1.1.2 연산자1.1.3 제어문: 조건문1.1.4 제어문: 반복문1.1.5 함수1.1.6 object/prototype  (1.2 Modern Javascript) (1.3 API)1.3.1 DOM  [2. 자료구조/알고리즘](2.1 자료구조)2.1.0 자료구조 개요.. 2024. 5. 10.
Porfolio Page - (6) Javascript: DOM Index 1. DOM 2. Node 3. CSSOM 4. Rendering 5. 4 6. 4 7. 4 8. 4 9. 4 10. 4 11. 4 12. 4 13. 4 14. 4 15. 4 16. 4 Reference 1. DOM DOM(Document Object Model) - 2. Node DOM Node - EventTarget을 상속 (EventTarget Method) - EventTarget.addEventListener(): 이벤트 추가 - EventTarget.removeEventListener(): 이벤트 제거 - EventTarget.dispatchEvent() (Node Property) - (Node Method) - 3. CSSOM CSSOM(CSS Object Model) - CS.. 2024. 2. 11.
Porfolio Page - (5) Javascript: Web API Index 1. Web API 2. 브라우저 구조 3. 3 4. 4 5. 4 6. 4 7. 4 8. 4 9. 4 10. 4 11. 4 12. 4 13. 4 14. 4 15. 4 16. 4 Reference 1. Web API Web API - API(Application Programming Interfaces)는 - Web API (Web API 종류) - DOM APIs: 웹 페이지의 요소를 생성/삭제/스타일변경 조절 - Network APIs: 서버와 통신 기능 제공 - Graphics APIs: 그래픽 관련 기능 제공 - Audio/Video APIs: 멀티미디어 관련 기능 제공 - Device APIs: 디바이스 상태 정보 확인 - File APIs: 사용자의 파일 정보 확인 - Storage .. 2024. 2. 11.
Porfolio Page - (4) Javascript: 기본 Index 1. 1 2. 2 3. 3 4. 4 5. 4 6. 4 7. 4 8. 4 9. 4 10. 4 11. 4 12. 4 13. 4 14. 4 15. 4 16. 4 Reference 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. Reference [Type: Title(Subtitle)] URL [Type: Title(Subtitle)] URL 2024. 2. 11.
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.
반응형

티스토리툴바