| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- 스파르타코딩클럽 #spartacodingclub #누구나큰일낼수있어
- C++
- 전문가를 위한 스프링5
- 가상 채팅서버
- 스프링
- 팀300
- 스프링 시큐리티 구조
- 알고리즘
- 백준 #N과 M(4) #백트래킹
- 백준 1992번
- spartacodingclub
- 스프링 핵심원리 기본편
- SQL
- 스프링 MVC 2편
- thymeleaf
- 객체지향의 사실과 오해
- 전문가를 위한 스프링
- JPA
- 스파르타코딩클럽
- 김영한님
- 1시간 만에 끝내는 직장인 코딩 용어
- 채팅서버 설계
- 백준
- 백준 2630번
- 스프링심화반
- 자바의 정석 기초편
- 누구나큰일낼수있어
- 백준 1992번 풀이
- 스프링 입문을 위한 자바 객체 지향의 원리와 이해
- 타임리프
- Today
- Total
민우의 코딩노트
[스파르타코딩클럽] 프론트엔드 지식 1도 없는 학부생의 웹 사이트 만들어보기! 본문
[들어가기 전]
일단 저에 대해 소개해보자면,
현재 건국대학교 스마트ICT융합공학과 1학년에 재학중인 백엔드 관련 지망 학부생입니다!
컴퓨터 관련 전공자이지만, 백엔드지망 개발자라 프론트엔드(Html, CSS 등) 관련 지식이 1도 없었습니다.
매일 누군가 저에게 HTML, CSS 관련 질문을 물어보면 당황하기 일색이었습니다.
이번 스파르타코딩클럽에서 프론트엔드 관련 지식을 보충하기 위해서,
스파르타 관련 강의를 통해 나만의 웹사이트 2개를 만들어 봤습니다.
제 결과물은 '크리스마스 덕담 카드', '2021년 신년 운세 보기' 웹 페이지입니다.
'누구나 큰일 낼수 있다' 라는 스파르타코딩클럽의 모토에 맞게,
이번 강의를 통해 웹 프론트엔드 지식을 쌓아가고 내 웹 페이지를 만드는 능력을 키우게 되었습니다.
웹 개발에 관심 있는 비전공자분이나,
컴퓨터 전공자이나 백엔드, 프론트엔드 지식을 빠르게 습득하고 싶은 사람이라면
스파르타코딩클럽 강의를 수강하는 것을 추천드립니다!
[크리스마스 덕담 카드]
[신년 운세 카드 만들기]
https://new-year.spartacodingclub.kr/ZpFfWPjMYCDm/index.html
신년운세 by 르탄!
2021년 띠 별 운세를 알려드립니다
new-year.spartacodingclub.kr
https://xmas.spartacodingclub.kr/WZzzjvnQzJNy/xmas.html
민우의 카드
2021을 추억하며
xmas.spartacodingclub.kr
[Visual Code로 제작한 HTML 일부 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년을 보내며</title>
<link rel="shortcut icon" href="https://freepngimg.com/download/christmas/26196-6-christmas-stocking.png">
<meta property="og:image"
content="https://www.christmastreeassociation.org/wp-content/uploads/2016/06/multiple-christmas-trees-in-one-household-800x400.jpg">
<meta property="og:title" content="민우의 카드">
<meta property="og:description" content="2021을 추억하며">
<script src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/snow.js"></script>
<style>
* {
font-family: 'Poor Story', cursive;
}
body {
background-color: #9b070f;
}
.envelope {
width: 200px;
height: 200px;
background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
background-size: cover;
background-position: center;
margin: 200px auto 0px auto;
cursor: pointer;
}
.envelope-msg {
color: white;
text-align: center;
}
.letter-close {
display: block;
}
.letter-open {
display: none;
}
.rtan {
background-color: white;
width: 200px;
height: 200px;
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/Webp.net-gifmaker+(2).gif');
background-size: cover;
background-position: center;
margin: 100px auto 0px auto;
border-radius: 100px;
border: 1px solid white;
box-shadow: 0px 0px 10px 0px white;
}
h1 {
color: white;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
</style>
<body>
<div class="letter-close">
<div class="envelope" onclick="open_letter()"></div>
<h2 class="envelope-msg">봉투를 열어봐!</h2>
</div>
<div class="letter-open">
<div class="rtan" onclick="go_rtan()"></div>
<h1>2021년 수고 많았어!</h1>
<div class="messagebox">
친구들에게. <br />
올해 이런저런 일이 많았는데 <br />
너희 덕분에 하나도 힘들지 않았어 <br />
내년에도 우리 우정 변치말자 <br />
연말에 다 같이 못 봐서 아쉽다 <br />
<p class="from">2021.12.25 민우가</p>
</div>
</div>
</body>
</html>정말 신기하지 않나요?
웹 프론트엔드(HTML, CSS) 관련 지식이 없는 백엔드 관련 지망생이 만든 결과물입니다.
작년 인스타그램 등 SNS에 유행하던 크리스마스 카드 웹 페이지랑 비슷한 결과물을 만들어냈습니다!
솔직히 이러한 퀄리티 있는 웹 사이트를 관련 지식이 전무한 제가 만들수 있는지 놀랐습니다.
이번 강의를 통해 배운 CSS, HTML 개념입니다.
1) HTML과 CSS의 개념
2) HTML은 크게 head와 body로 구성, head에는 페이지의 속성 정보, body에는 페이지의 내용을 담는 것
3) CSS 기초 및 심화(배경관련, 사이즈, 폰트, 간격 설정)
4) 모바일 버전 처리
5) 자바스크립트를 통한 동적 처리, 웹 폰트 적용하기, 실제 배포해보기
6) HTML 실제 적용 및 처리
7) div class의 개념
CSS, HTML에 대해 지식이 전무하던 저는 이번 스파르타코딩클럽의 강의를 통해
직접 웹 페이지를 제작해보며 웹 관련 지식을 보충하는 경험을 가졌습니다.
항상 주변 개발자분이 강조하는 것이 직접 코드를 치는 것이 배우는 것이 중요하다는 것입니다.
직접 코드를 적용해보면서
이미지의 margin을 어떻게 적용할까, div class를 어떻게 줄까, 배경색을 어떻게 줄까 등 을
직접 고민해본 경험이 학습하는데 정말 좋았습니다.
웹 페이지를 만들때 오래 걸리지 않고 단순히 2시간 투자해서 나온 웹 페이지 입니다.
이렇게 스파르타코딩클럽은 코딩에 관심 있는 누구나, 배우고 싶은 누구나
조금만 투자하면 알기 쉽고, 빠른 결과물을 만들어 코딩 실력을 키울수 있습니다.
단순히 코드 복사 붙여넣기가 아닌, 실습 위주로 강의 진행으로
아무리 비전공자라도 알기 쉽게 따라하고 코드의 기능을 이해할 수 있습니다.
강의 각각 순서대로 이 기능이 왜 필요한지, 순서대로 따라해보며 적용할 수 있습니다.
또한 강의 각각 마다 수강완료시 숙제를 제출하여
자신이 이해한 내용을 복습하고 맞는지 확인할 수 있습니다.
숙제를 제출하여 튜터님에게 검사를 받고, 부족한 부분을 정답 코드를 통해 복습할 수 있는 장점이 있습니다.
또한 개발일지(Today I Learned/TIL)을 작성하여 정말로 개발자의 경험을 체험하고,
TIL은 주변 개발자분이나 많은 컴퓨터 전공 학부생분이 많이 쓰시는 개발 일기입니다.
이렇게 오늘 배운 내용을 포트폴리오 형식으로 정리할 수 있는 장점을 갖고 있습니다.
만약 자신이 프론트엔드 및 백엔드(서버) 지식을 전반적으로 얻고 싶다면 웹 개발 종합반을 추천드립니다.
이번에 프론트엔드 관련 지식이 부족하여, 저도 기회가 된다면 웹 개발 종합반을 수강하여
풀 스택 개발자로에 성장을 이루려고 합니다.
웹 개발 종합반의 커리큘럼은 다음과 같습니다.
1주차, 2주차, 3주차는 프론트엔드와 백엔드에 익숙해지기 위해서 자바스크립트, JQuery, Ajax 등
실무에 많이 쓰이는 백엔드, 프론트엔드 프레임워크를 사용하여 API, DB를 다루게 됩니다.
4주차~8주차에 걸쳐 백엔드 관련 지식을 전반적으로 익히게 됩니다.
정말 실무에서 많이 쓰이는 MongoDB, AWS EC2를 이용한 배포를 통해 백엔드 개발자로 성장할 수 있습니다.
이렇게 실무 중심의 커리큘럼을 통해 웹서비스를 제작하는 경험을 가질 수 있습니다.
프론트엔드, 백엔드에 대한 갈피를 못 잡히는 분, 웹 개발에 관심 있는 분,
비전공자라서 어디서 개발을 시작해야 할 지 모르겠는 사람 누구나 신청하여 듣는 것을 추천드립니다!
[강의 후기]
정말 개발자에 관심이 있거나 코딩에 관심이 1이라도 있는 사람은
스파르타코딩클럽에서 강의를 듣는 것을 추천드립니다.
평소에 몰랐던 HTML, CSS, JavaScript를 정말 알기 쉽게 설명해주고 실습 진행 위주로,
쉽게 이해하고 코드를 익히게 되었습니다.
우리 모두 스파르타코딩클럽에서 강의를 수강하여 개발자의 커리어 및 포트폴리오를 쌓아봅시다.
스파르타코딩클럽에는 정말 좋은 강의 트랙이 많습니다.(웹 개발, 앱 개발, 데이터 분석 등)
'External > 스파르타코딩클럽 르탄즈 2기' 카테고리의 다른 글
| [르탄즈 2기] Spring 심화반 1주차 개발일지 (0) | 2022.02.05 |
|---|---|
| [스파르타코딩클럽] IT 전공자의 덕담 공유 코딩 패키지 리얼 후기 (0) | 2022.01.29 |
| TIL 1주차 개발일지 - (2) (0) | 2022.01.28 |
| TIL - 2주차 개발일지 (0) | 2022.01.28 |
| TIL - 1주차 개발일지 (0) | 2022.01.28 |
