코딩 장관상을 받은 영재가 직접 알려주는, 코딩 강의

디자인과 HTML을 접목해

나만의 포트폴리오

완성하는 코딩 강의입니다.


실제 현장에서 사용되는 실무 스킬과 노하우를 배웁니다.

코딩을 몰라도 누구나 쉽게 배울 수 있습니다.

Grok Academy와 함께 링크 한 줄로 소개하는 프로필 / 다양한 이미지로 풍성한 웹 페이지 / 반응형 웹과 프레임워크로 쉽고 재미있는 개발 접하기 / 웹 사이트 동작 원리를 이해하고 입체적인 웹 디자인을 할 수 있는 응용 스킬까지 학습합니다.


쉽게 - 다양한 코딩 방법 - 응용 학습


트렌드를 반영한 생동감 넘치는 실전. 실무 기반 학습

사용 기술: HTML, CSS, GitHub, ChatGPT


구현 기능

  • 프로필 제작 및 사이트 배포하기
  • HTML 코드를 커스텀 하고 CSS로 풍성한 디자인적 연출하기
  • 원페이지 홈페이지를 직접 기획하고 디자인 및 호스팅하기
  • 40가지 예제로 코드를 다양하게 활용하고 응용하기



1) Intro HTML

주요 웹 개발 언어의 역할에 대해 배우고, 스타일시트를 연결하여 텍스트 정렬 및 폭을 설정하는 방법을 학습합니다.

2) Stylesheets

<strong>, <em> 등의 태그를 사용한 텍스트 강조, <span>을 활용한 색상 적용, 이미지 삽입 및 링크 연결 방법을 학습합니다.

3) Color

rgb 색상 코드를 이용해 웹 페이지에 색상을 적용하고, margin과 정렬을 활용하여 세로 레이아웃을 구성하는 방법을 학습합니다.

4) Font Styling

페이지의 구조와 배경 색상을 설정하고, 폰트 종류, 굵기, 스타일 및 행간 설정을 통해 텍스트를 스타일링하는 방법을 학습합니다.

5) Grouping Elements

border과 padding을 설정하고 배경 이미지를 추가하며, <div>를 활용하여 웹 페이지 내 요소들을 그룹화하고 스타일링합니다.

6) Create Profile

HTML과 CSS를 활용해 프로필 페이지를 만들고, 요소에 클래스를 적용해 레이아웃과 디자인을 구성하는 방법을 학습합니다.

7) Layout

다양한 레이아웃 모드를 학습하고, 인라인 및 블록 디스플레이 속성을 활용해 페이지 레이아웃을 구성하는 방법을 학습합니다.

8) GitHub

GitHub에 파일을 업로드하고 배포합니다. 이미지와 코드를 교체하는 방법과 링크로 페이지를 공유하는 방법을 학습합니다. 

9) Class

여러 셀렉터를 조합하여 HTML 요소들을 선택하고, 클래스 속성을 활용해 특정 요소에 스타일을 적용하는 방법을 학습합니다.

10) Interaction

hover 효과를 통해 사용자와 상호작용하는 디자인을 만들고, 아이콘으로 창의적인 웹 페이지를 구성하는 방법을 학습합니다.

11) Design Playground

자유롭게 레이아웃과 디자인을 실험하며, 창의적인 스타일을 적용하는 방법을 실습합니다.

12) Skills remind

학습을 리마인드 하는 Q&A 시간을 갖습니다. ChatGPT, Imweb과 같은 도구를 사용하는 방법을 학습합니다.

코딩 장관상을 받은 영재가 직접 알려주는, 코딩 강의

디자인과 HTML을 접목해 나만의 포트폴리오를 완성하는 코딩 강의


실제 현장에서 사용되는 실무 스킬과 노하우를 배웁니다. 코딩을 몰라도 누구나 쉽게 배울 수 있습니다. Grok Academy와 함께 링크 한 줄로 소개하는 프로필 / 다양한 이미지로 풍성한 웹 페이지 / 반응형 웹과 프레임워크로 쉽고 재미있는 개발 접하기 / 웹 사이트 동작 원리를 이해하고 입체적인 웹 디자인을 할 수 있는 응용 스킬까지 학습합니다.


트렌드를 반영한 생동감 넘치는 실전. 실무 기반 학습

HTML, CSS, GitHub, ChatGPT


구현 기능

  • 프로필 제작 및 사이트 배포하기
  • HTML 코드를 커스텀 하고 CSS로 풍성한 디자인적 연출하기
  • 원페이지 홈페이지를 직접 기획하고 디자인 및 호스팅하기
  • 40가지 예제로 코드를 다양하게 활용하고 응용하기

HTML CSS

1) Intro HTML

주요 웹 개발 언어의 역할에 대해 배우고, 스타일시트를 연결하여 텍스트 정렬 및 폭을 설정하는 방법을 학습합니다.

2) Stylesheets

<strong>, <em> 등의 태그를 사용한 텍스트 강조, <span>을 활용한 색상 적용, 이미지 삽입 및 링크 연결 방법을 학습합니다.

3) Color

rgb 색상 코드를 이용해 웹 페이지에 색상을 적용하고, margin과 정렬을 활용하여 세로 레이아웃을 구성하는 방법을 학습합니다.

4) Font Styling

페이지의 구조와 배경 색상을 설정하고, 폰트 종류, 굵기, 스타일 및 행간 설정을 통해 텍스트를 스타일링하는 방법을 학습합니다.

5) Grouping Elements

border과 padding을 설정하고 배경 이미지를 추가하며, <div>를 활용하여 웹 페이지 내 요소들을 그룹화하고 스타일링합니다.

6) Create Profile

HTML과 CSS를 활용해 프로필 페이지를 만들고, 요소에 클래스를 적용해 레이아웃과 디자인을 구성하는 방법을 학습합니다.

7) Layout

다양한 레이아웃 모드를 학습하고, 인라인 및 블록 디스플레이 속성을 활용해 페이지 레이아웃을 구성하는 방법을 학습합니다.

8) GitHub

GitHub에 파일을 업로드하고 배포합니다. 이미지와 코드를 교체하는 방법과 링크로 페이지를 공유하는 방법을 학습합니다.

9) Class

여러 셀렉터를 조합하여 HTML 요소들을 선택하고, 클래스 속성을 활용해 특정 요소에 스타일을 적용하는 방법을 학습합니다.

10) Interaction

hover 효과를 통해 사용자와 상호작용하는 디자인을 만들고, 아이콘으로 창의적인 웹 페이지를 구성하는 방법을 학습합니다.

11) Design Playground

자유롭게 레이아웃과 디자인을 실험하며, 창의적인 스타일을 적용하는 방법을 실습합니다.

12) Skills remind

학습을 리마인드 하는 Q&A 시간을 갖습니다. ChatGPT, Imweb과 같은 도구를 사용하는 방법을 학습합니다.

No posts yet.

맞춤형 과정으로 빠른 응용까지!

사고력이 좋아지는! 나만의 코드로 재밌게 코딩을 배워요



어피니티 유니버스
수강 신청 및 안내

카카오톡을 통해 수강 신청서를 작성해주세요.
맞춤형 과정으로 빠른 응용까지!

웹 개발 기본을 탄탄하게! 재미있게 코딩을 배워요



© Copyright Affinity Universe 2022 - All Rights Reserved
어피니티 유니버스
수강 신청 및 안내

카카오톡을 통해 수강 신청서를 작성해주세요


맞춤형 과정으로 빠른 응용까지!

웹 개발 기본을 탄탄하게!

재미있게 코딩을 배워요

수강생의 놀라운 변화
100% 리얼 포트폴리오

이미 많은 수강생들이 크리에이터로 활동하고 있습니다. 유아부터 성인까지 수강생들의 놀라운 변화를 확인하세요.