본문 바로가기

html21

[포트폴리오 페이지] 2단계: About Me 섹션 추가 2단계: About Me 섹션 추가2.1 About Me 섹션 HTML 작성index.html 파일에서 About Me 섹션에 내용을 추가합니다.index.html (수정된 부분) About Me 안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다. 저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.2.2 About Me 섹션 스타일링styles.css 파일에.. 2024. 6. 16.

[포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16.

[HTML] HTML 규칙 HTML 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 정리한 가이드를 제공하겠습니다. 이 가이드는 코드의 가독성을 높이고 유지보수성을 향상시키는 데 중점을 둡니다.HTML 코딩 컨벤션1. 문서 구조HTML 문서는 항상 다음과 같은 기본 구조를 따라야 합니다: 2. 들여쓰기 및 공백들여쓰기: 일반적으로 2칸이나 4칸의 공백을 사용합니다. 탭보다는 공백을 사용하는 것이 권장됩니다.공백: 요소 간의 공백을 적절히 사용하여 가독성을 높입니다. 9. 접근성 고려alt 속성을 사용하여 이미지에 대체 텍스트를 제공합니다.폼 요소와 연결된 태그를 사용합니다.Email:HTML 네이밍 컨벤션1. 아이디(id)와 클래스(class) 네이밍기본 원칙의미 있는 이름: 요소의 목적과 기능을 설명할 수 있는 .. 2024. 6. 8.

[HTML] HTML 심화 HTML 심화 학습은 웹 페이지를 더욱 구조화하고 사용성 및 접근성을 향상시키기 위한 중요한 내용입니다. 여기서는 폼 요소와 입력 타입들, 테이블 구조, 그리고 시맨틱 태그에 대해 자세히 다뤄보겠습니다.1. 폼(Form) 요소와 입력 타입들HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 합니다. 다양한 입력 타입과 속성을 활용하여 효율적인 폼을 만들 수 있습니다.기본 폼 예제 Contact Us Name: Email: Phone: Date of Birth: Gender: Male Female .. 2024. 6. 8.

[HTML] HTML 예제 CSS를 기본적인 사각형 테두리만 이용하여 간단한 개인 프로필 페이지를 만들어 보겠습니다.예제: 개인 프로필 페이지 (사각형 테두리만 사용) Welcome to My Profile John Doe Hello! I'm John Doe, a web developer with a passion for creating amazing web experiences. Contact Information Email: john.doe@example.com Phone: (123) 456-7890 Website: www.johndoe.com Skills HTML CSS JavaScript .. 2024. 6. 8.

[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.

[개발 규칙] HTML 규칙 HTML 코딩 컨벤션HTML 코딩 컨벤션은 HTML 코드를 일관되게 작성하여 가독성을 높이고, 유지보수를 쉽게 하며, 협업을 원활하게 합니다. 아래는 HTML 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따르세요.Text Text```2. 태그와 속성의 소문자 사용소문자 사용: 태그와 속성 이름은 소문자로 작성합니다.```3. 속성 값에 따옴표 사용속성 값 따옴표: 속성 값은 항상 따옴표로 감쌉니다.```4. 자체 닫는 태그(Self-closing Tags)자체 닫는 태그: XHTML처럼 자체 닫는 태그는 /를 사용하지 않습니다.```5. 의미론적 태그 사용(Semantic HTML)의미론적 태그: 가능한.. 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.

이전 1 2 3 다음

티스토리툴바