본문 바로가기
STUDY SUMMARY

프리코드캠프 코스 1-1 : Learn HTML by Building a Cat Photo App

by 40's Programmer 2023. 6. 12.
반응형

FreeCodeCamp로 공부를 시작합니다

프리코드캠프로 공부를 시작했습니다.  전체 15개의 코스로 구성되어 있네요.

 

 

전 초보자이니 첫번째 코스 Responsive Web Design Certification을 선택했습니다.

 

 

Responsive Web Design Certification

모든 설명은 영어로 되어 있습니다. 하지만 우리에겐 구글 번역기와 파파고가 있으니 걱정없습니다.

 

이 반응형 웹 디자인 인증에서는 개발자가 웹 페이지를 작성하는 데 사용하는 언어, 즉 콘텐츠용 HTML(Hypertext Markup Language) 및 디자인용 CSS(Cascading Style Sheet)를 배우게 됩니다.

먼저 HTML과 CSS의 기초를 배울 수 있는 고양이 사진 앱을 구축합니다. 나중에, 여러분은 펭귄을 만들어 CSS 변수와 같은 현대적인 기술과 퀴즈 사이트를 만들어 접근성에 대한 모범 사례를 배울 것입니다.

마지막으로 Flexbox로 사진 갤러리를 만들고 CSS Grid로 잡지 기사 레이아웃을 만들어 다양한 화면 크기에 대응하는 웹 페이지를 만드는 방법에 대해 알아봅니다.

 

먼저 고양이 사진 앱을 구축하게 된다고 하네요. 

HTML 태그는 웹 페이지에 구조를 제공합니다. HTML 태그를 사용하여 사진, 단추 및 기타 요소를 웹 페이지에 추가할 수 있습니다.

이 과정에서는 자신만의 고양이 사진 앱을 구축하여 가장 일반적인 HTML 태그를 배우게 됩니다.

 

Learn HTML by Building a Cat Photo App

 

공부하러 가기

 

전체 69개의 가이드를 따라서 작성하다보면 아래와 같은 산출물을 확인할 수 있습니다.

See the Pen CatPhotoApp by 40's Programmer (@40sProgrammer) on CodePen.

 

배울 수 있는 HTML 코드

1-1 코스 Learn HTML by Building a Cat Photo App에서 아래와 같은 HTML TAG를 배울 수 있습니다.

 

총 23개네요.

 

태그 설명 관련 포스트
<html> 브라우저에게 html 문서임을 알려주는 태그 HTML의 시작 태그, 코딩의 스타트 <html> 태그의 역할과 사용법
<head> html 문서의 메타데이터 집합을 정의할 때 사용 웹페이지의 메타데이터와 스타일을 정의하는 HTML <head> 태그
<meta> <head> 내부에 존재하며 메타데이터를 정의할 때 사용 HTML <meta> 태그: 웹사이트 성능 향상과 검색 엔진 최적화를 위한 핵심 요소
<title> 브라우저 상단에 노출되는 문서 타이틀을 작성할 때 사용 웹페이지의 메타데이터와 스타일을 정의하는 HTML <head> 태그
<body> html 문서의 콘텐츠 영역을 정의할 때 사용 HTML의 핵심요소, 웹페이지의 내용을 담는 body 태그
<main> html의 메인 콘텐츠 영역을 정의할 때 사용 main 태그, body 태그 내에서 핵심 콘텐츠를 감싸는 공간
<h1> ~ <h6> 콘텐츠의 제목을 작성할 때 사용 HTML 문서 제목을 만드는 H 태그, SEO 최적화 필수 태그
<!-- --> 주석을 달 때 사용 HTML 주석 처리: 코드에 숨겨진 메시지를 알려주는 <!-- --> 태그
<p> 문단을 정의할 때 사용 HTML P 태그, 글을 구조화하고 가독성을 높이는 도구
<a> 링크를 걸때 사용 HTML의 핵심 요소, a 태그: 링크의 세계로의 초대
<img> 이미지 파일을 삽입할 때 사용 이미지 표현을 위한 HTML img 태그
<section> 웹페이지 구획을 나눌때 사용 웹 페이지 구성을 위한 HTML <section> 태그
<ul> 불렛 기호로 목록을 정리할 때 사용 HTML 리스트 생성 <ul> 태그 - 순서없이 마커로 목록 생성
<ol> 순서대로 목록을 정리할 때 사용 HTML 리스트 생성 <ol> 태그 - 순서가 존재하는 목록 생성
<figure> 이미지, 동영상 구역을 정하는 태그 효과적인 이미지 및 콘텐츠 표현을 위한 HTML figure 태그 활용
<figcaption> 이미지, 동영상 등에 설명을 붙이는 태그 매력적인 이미지 설명을 위한 HTML figcaption 태그 활용 방법
<form> 사용자에게 값을 입력받아 처리하는 태그 HTML Form 태그 : 효과적인 웹 폼 디자인과 상호작용을 위한 태그
<fieldset> 폼 구조를 만드는 태그 웹 폼 구조화를 위한 HTML fieldset 태그 활용 방법
<legend> 폼에 제목을 붙이는 태그 웹 폼의 구조화와 접근성을 높이는 HTML legend 태그
<label> input 태그와 텍스트를 연결하는 기능 HTML Label 태그, input 태그와 함께 다니는 최적 조합
<input> 사용자로부터 입력을 받을 수 있는 태그 인터랙티브 웹페이지 구현을 위한 HTML Input 태그의 활용
<button> 사용자가 클릭할 수 있는 버튼을 만드는 태그 사용자의 상호작용을 위한 버튼을 만들자 HTML <button> 태그
<footer> 웹페이지 하단의 기본정보 구역을 정하는 태그 HTML footer 태그, 웹페이지의 마무리를 담당하는 태그

 

 

반응형
저작자표시

'STUDY SUMMARY' 카테고리의 다른 글

40대 코린이의 코딩 배우기 5주차 이야기 (23.06.26~23.07.02)  (0) 2023.07.02
40대 코린이의 코딩 배우기 4주차 이야기 (23.06.19~23.06.25)  (0) 2023.06.25
40대 코린이의 코딩 배우기 3주차 이야기 (23.06.12~23.06.18)  (0) 2023.06.18
40대 코린이의 코딩 배우기 2주차 이야기 (23.06.05~23.06.11)  (0) 2023.06.11
40대 코린이의 코딩 배우기 1주차 이야기 (23.05.28~23.06.04)  (0) 2023.06.04

관련글

티스토리툴바