Through the entire process of creating a responsive website with HTML+CSS+JQUERY publishing, you will gain a solid foundation for intermediate publishing skills and practical publishing know-how. In particular, you will gain confidence in creating your own portfolio website by experiencing the entire process of creating a website through sufficient explanations and practical work. (The responsive production method is a responsive layout production method using the existing float and position methods. Since most existing websites are currently produced with layouts using the existing method, you will also need to learn Flex and Grid, but you must learn and use the existing method layout well.)
Enhance your practical publishing skills through the core theories of HTML+CSS+JQUERY
Improve your overall website publishing skills and know-how
The exact concept and use of the position attribute
hover before after checked active Understanding and using virtual classes
CSS tab menu content, JQUERY tab menu content creation ability
Mobile responsive web publishing production capability (media query)
Full responsive web design capabilities optimized for both PC and mobile versions
Create a Creative Responsive Website with 3D Screen Transition Function
The overall UX of the responsive website you will create is to move sections by moving the mouse wheel up and down. It is enough to show creative UI/UX because it shows 3D animation effects while moving sections . Also, by changing some of the prepared options, you can change it to a total of 9 different section transition animations, from rotation animations to size changes.
If you don't want to use any section transition animations, there is also an option in the options to turn off section transition animations.
Changing these section transition animation options is so easy and conveniently set that you can easily change them even without any knowledge of JavaScript .
※ The entire section transition UI/UX of the PC layout is created using a jQuery plugin.
※ You can fully learn in this lecture how to download and use the PC layout section transition animation plug-in, as well as how to customize it.
※ The entire responsive website being created fully supports cross-browser compatibility , so it can be viewed without problems in Chrome, Firefox, Edge, and Internet Explorer (IE) .
The responsive website you are creating this time is a creative website that Coding Works created from start to finish for the students, from planning to UI/UX design and publishing.
In general, in the case of lectures on creating clone sites or copy sites, sufficient theoretical and experiential learning is possible. However, since it is a copy site, it is difficult to modify the produced results and use them as your own portfolio website. However , this responsive website is the result of Coding Works's planning, design, and publishing all processes themselves, so after sufficient learning, you can modify the text and images and change the layout to some extent to use it as your own personal portfolio homepage.
The step-by-step finished version is a zip file of the production video results for each section of the Inflearn class content during the entire website production process. If only the final finished version was provided, I thought that students might have difficulty, so I prepared the step-by-step finished version by saving it during the process.
Here are some examples of problems that can arise when there is no step-by-step finished version and only a final version:
You have to modify the jQuery plugin and start with the UI/UX as the basis, but if you have difficulty with this part, you will not be able to start properly. In this case, you can unzip the zip file that completed the first step and follow the next section. I think you can study the parts you did not do again in the second time. However, I thought that if I only provided the final version, there would be cases where you could not start, so I provided the completed version step by step.
Of course, it is best to create the final result with files that you have created purely from the beginning to the end, but the purpose of this responsive website creation is much greater than creating the result, and the purpose of learning many things about publishing in the process. In the process, you will learn the publishing process, know-how, and practical theory of creating an entire responsive website.
※ The UI design PSD file created with Photoshop is in the data room. Please modify it to suit your personal needs when creating your personal homepage later.
※ The Photoshop UI was created using Photoshop CC 2019 version and includes the fonts used in its creation.
This responsive website was created using 100% hard coding.
Using a responsive CSS framework like Bootstrap makes it much easier to create a responsive website. However, while it is okay to use a responsive CSS framework if you have the experience and skills to create a responsive web by hardcoding, we do not recommend blindly relying on a responsive CSS framework to create a responsive web.
Of course, it is difficult to create a responsive web by hardcoding everything from scratch. It takes a lot of work. However, I think that your publishing skills will improve rapidly through this process.
In this responsive website creation course, horizontal layout and positioning were done using float, position, and transform, which are the basics of publishing. It would be easier to do layout with flex, but since the basics are important, this work did not use the flex property.
The total production time is over 20 hours. The production time is long. It is long even in my opinion.
I also had a hard time making it. 😢😢
Because it is an explanatory bug, the same explanation is repeated several times. It was difficult to tell the same story multiple times.
I had a hard time making it long because I thought it had to be this way, but I think it would be difficult for the students taking the lecture as well.
But I thought it was important to take my time, think about it, and create it while understanding.
As I mentioned earlier, the goal is not to produce results in a short period of time, but to gain experience, publishing know-how, and practical skills in the process of creating them, so the class videos ended up being quite long.
The text editor used in this responsive website creation course is Brackets. Of course, you can use a text editor that students are familiar with, such as Visual Studio Code. However, text editors without a real-time preview function may be difficult to follow.
※ We recommend using Brackets or Visual Studio Code, which have the Live Preview feature.
For those who are not familiar with it, the screen transition jQuery plugin settings may seem a bit complicated.
You can easily set up the screen transition jQuery plugin by watching the video, but students do not have to do it themselves.
Whether you are good at setting up the jQuery plugin for screen transition or not does not determine whether you have publishing skills or not. Don't worry~^^
For those who find the plugin settings difficult and complicated, a step-by-step complete version has been prepared.
The step-by-step complete version contains all the folders and files with the plugin setup completed, so just download it, unzip it, and follow the next section.
If you want a file with the completed screen transition jQuery plugin settings, you can receive [Section 01. Step-by-step completed version] or [ Section 02. Step-by-step completed version] . If you want to start by receiving the completed version of the entire mobile layout and navigation publishing, you can receive [Section 03. Step-by-step completed version] .
Section 18. Download Materials (Step-by-step complete version, visual code usage, Photoshop UI design)
The difficulty level of this responsive website creation is difficult for beginners or beginners. The course level should be similar to or close to intermediate level to follow along well. If you think you are not at least beginner level, I don't think it will be too difficult to follow along.
As for prerequisite knowledge for the course, you should know the basics of HTML+CSS. However, you do not need to be good at HTML+CSS. In the lecture that is over 20 hours long, we will explain it sufficiently. If you are watching the video and the student is slow in coding and writing HTML+CSS, you can stop the video, write HTML+CSS, and follow the next step.
It just takes a little more time than others because I have to stop the video and code. Rather, it is better to have time to calmly code on your own. Don't worry too much and let's study together.^^
Among my lectures , there is a ' HTML+CSS+JQUERY Portfolio Intermediate Practical Publishing Lecture ' . The theoretical content and practical example production content in this lecture almost covers all the content needed to produce this responsive website. In other words, I think this is a lecture that will definitely help you build the basics of HTML+CSS+JQUERY.
Except for a few things in this responsive website creation, I think it will be much easier to follow along if you study the contents of ' HTML+CSS+JQUERY Portfolio Intermediate Practical Publishing Course ' once.
The bottom line is...
If you are not a beginner or a beginner, it is okay to follow along, but it might feel a little burdensome.
If you have learned the basics of HTML+CSS through other lectures, I believe you will be able to follow along and complete the responsive website creation course with an understanding of why it is done this way.
Q. Is there a video explaining intermediate CSS theory while making examples ?
A. ' There are a lot of intermediate theories that are not covered in the basic theory when making examples. Where can I take intermediate theory classes? ' This question is frequently posted on the bulletin board.
This course is not about creating a beginner publishing example. It is about creating a beginner to intermediate publishing example. So you should have some knowledge of CSS beginner and intermediate theories. But you don't have to know them all. We will continue to repeat CSS beginner and intermediate theories while creating examples. And there is a detailed video of the essential intermediate theories needed for creating examples in the playlist called [Intermediate Theory] CSS Intermediate Theory on the Coding Works YouTube Publishing Channel, so it would be good to learn the intermediate theories while taking this course.
A. If you understand and can utilize all the publishing content in this course well, it is possible. However, publishing requires sufficient experience and experience in creating various types of websites to work in the field. I think it would be enough to study a few more lectures like the current course and study a few of the entire website creation processes. Of course, you should also create a personal portfolio homepage. The barrier to entry for publishing is higher than you think. Since watching a video once does not convey all the content and know-how to the student, I hope you will make it your own through the learning method explained above.
Q. There isn't a separate theory section explaining the theories that come up when creating a website?
A. The course you are currently taking is not an introductory beginner course, but an intermediate level responsive website full production and publishing course. We recommend that you take other courses to improve your skills for the basic theory part and learning how to create practical examples.
Q. Where can I ask questions if I don't understand something while studying?
A. If you have any questions, please post a post on the [Questions & Answers] board and I will answer you as soon as I confirm it, even if it is not right away. Also, please be as specific as possible with your questions. It is not easy to give a sufficient answer when your question is not specific. So when you ask a question, it will be much easier to answer if you attach a screenshot of the HTML, CSS, and JQUERY coding screen you are writing along with the content you are curious about.
Q. Instructor, would it be a good idea to first look at the Publisher Job Search Real Practical Guide during class?
A. It is important to learn more publishing skills, but it is important to first establish the basics as a publisher. In the e-book (PDF) of the Publisher Employment Practical Guide, the publishing basics are thoroughly organized into the content that you must know as a publisher, such as desirable coding habits and principles, and publishing like an experienced person. We recommend that you first look at the e-book (PDF) of the Publisher Employment Practical Guide and study the publishing basics to gain a sufficient understanding. Click on the image below to see the class introduction.
▼ Section Transition #01: 3D Rotation
▼ Section Transition #02: Zoom in/out
▼ Section Transition #03: Pull the next section from the previous section
▼ Section Transition #04: Size Change & Transparency Crossover
▼ Section Transition #05: General Animation Section Transition
▼ Section Transition #06: Resize and move with frame style
▼ Mobile UI/UX #01: Full mobile screen
▼ Mobile UI/UX #02: Mobile Navigation
▼ Mobile UI/UX #03: Mobile Home Section (CSS Keyframe Animation)
▼ Mobile UI/UX #04: Mobile Project Section (CSS tab menu content, Slick.js slider)
▼ Mobile UI/UX #05: Mobile Plan Section (Slick.js content slider responsive option)
▼ PC Layout Section-by-Section UI/UX #01: Home Section
▼ PC Layout Section-by-Section UI/UX #02: About Section
▼ PC Layout Section-by-Section UI/UX #03: Project Section
▼ PC Layout Section-by-Section UI/UX #04: Plan Section
▼ PC Layout Section-by-Section UI/UX #05: Awards Section
▼ PC Layout Section-by-Section UI/UX #06: Location Section
▼ PC Layout Section-by-Section UI/UX #07: Contact Section
▼ PC & Mobile Subpage Layout #01: Hiring Subpage
▼ PC & Mobile Subpage Layout #02: Project Detail Subpage
We continuously update the essential theories and tips needed for publishing skill up as well as theories essential for creating responsive websites. If there is an update on the essential theories and tips videos needed for skill up, we will notify you through new news.
The core theories and tips videos needed for Skill Up will be sequentially updated in Section 17. Even if you haven't received any new news, please come to Section 17 and check if there are any videos you need to learn. Fighting~^^
※ Those who are learning the responsive web production lecture do not need to listen to this before finishing the production lecture. However, since 2, 3, and 4 are essential core theories for the responsive web production lecture, we recommend that you listen to them first and then start the responsive website production lecture.
※ You can receive a zip file of the completed learning examples studied in the Jump Up Publishing Theory and Tips video by clicking on the lesson materials in the upper right corner of the video.
▲ A student who studied under me for about 4 and a half months in a nationally funded publishing course received a KakaoTalk message saying that he got a job.
▲ I received a KakaoTalk message about the interview results for students who took the offline course on creating a personal portfolio at Coding Works (April 24, 2023).
Hello teacher :)
Teacher, I am Kim O-jeong, a student who was taking Inflearn's lectures.
I am a student who sent an email this summer asking for advice on my personal portfolio.
Do you remember?😊😊
It's nothing else than,
I'm sending this email to tell you that I successfully landed a job at a publisher with the portfolio I received advice on from you!
Even!!
The company contacted me first after seeing the portfolio I posted on Saramin, and I was interviewed via Zoom and passed!
The company matched my desired salary, and I was able to join a company where I could do only publisher work, not design or development work.
It was a company looking for an experienced publisher, and they contacted me, a new employee, and asked me why they contacted me.
He said that he looked at a lot of other people's portfolios, but he contacted me because the "Functional Definition" in my portfolio caught his eye.
I think this is all thanks to the teacher's lectures.
If I hadn't taken the teacher's class, my portfolio would have just been ordinary, but I was able to successfully get a job thanks to the great tips the teacher gave me!
Although I have never actually met him,
While creating my portfolio, I relied on it a lot, trusted it, and worked hard while watching the teacher's lectures!
I feel like my skills have improved a lot in the three months I spent listening to the teacher's lectures and creating a portfolio, more than the skills I built up while taking long classes at the academy.
I desperately wanted it,
I believed and did as the teacher said and the results were really good.
Thank you so much!
Be careful of corona
I hope to see you again with another great lecture :)
I just wanted to say thank you 😊😊
I've had a hard time taking your class and submitting my resume for about two weeks now...
I passed the interview at a company and decided to come to work.. Thank you so much..😭😭
Actually, I was worried because I'm 32 years old. I submitted a lot of resumes, but I didn't get any calls.
But this company's HR manager said that he doesn't like people who graduated from private academies 😊😊
The company I decided to join is small, but it has developers and web designers.
They said they would train them for three months and then put them into practice.
It's a bit far and the salary is low, but I'm going to study hard and try to increase my salary~ 😊😊
Thank you so much for everything. You answered my questions so well, and I am so amazed that I got a job after taking this online class.
I will continue to study and improve my skills by listening to your lectures. Fighting~!
If you have any questions while learning, please ask. When asking questions, you must upload the content that is not working, the code, and a screenshot of the browser result. In the case of code, you must upload all HTML, CSS, and JS codes so that we can give you an accurate answer.
If you only describe your problem in text without any code in your question, it will be difficult to give you an accurate answer unless it is really simple. Then, I will have no choice but to reply again saying, 'Please upload HTML, CSS, JS code and browser capture~', which will be cumbersome and take more time to find a solution.
▲ Please check the frequently asked questions in the relevant lecture community first~
Please watch the theory video lectures on the Coding Works Publishing YouTube channel in parallel. Of course, not all theory videos are on the YouTube channel, but most of the important theory videos are there. Since there are many videos, it is recommended to search for videos as in the example below.
Coding Works Publishing YouTube Channel: https://www.youtube.com/codingworks
Section 0. Introduction to the course on creating a responsive website and how to use the text editor
Section 1. How to use the plugin and custom settings to control the overall layout
Section 2. Publishing the full layout wireframe (PC ver.)
Section 3. Publishing Mobile Full Layout and Navigation (Mobile ver.)
Section 4. Section Detail Publishing (Awards Section)
Section 5. Section Details Publishing (About Section)
Section 6. Section Detail Publishing (Location Section)
Section 7. Section Detail Publishing (Contact Section)
Section 8. Section Detail Publishing (Plan Section)
Section 9. Section Detail Publishing (Project Section)
Section 10. Section Detail Publishing (Home Section)
Section 11. Subpage Publishing (Hiring Info)
Section 12. Publishing Subpages (Project Detail)
Section 13. Linking Subpages (Modal Iframe Jquery Plugin)
Section 14. Convert all sections of the main page to mobile (index file)
Section 15. Converting subpages to mobile (hring, project)
Section 16. Conclusion
Section 17. Intermediate to Advanced Level Jump Up Publishing Theory and Tips
Section 18. Download Materials (Step-by-step complete version, visual code usage, Photoshop UI design)
Interview and employment-inducing publisher personal portfolio homepage production, scss, sass, flex, grid, html, css, html/css, website, web publisher, publisher employment, website, coding, coding, jquery, javascript, jquery, javascript, layout, interactive web, interactive web, web design, web design, portfolio, publishing, responsive web, web design technician practical exam, bootstrap, bootstrap, css frameworks, framework
Who is this course right for?
Publishers who want to experience the entire website creation process
Those who want to create a real website using publishing basics
If you need to create a personal portfolio website for publishing
Need to know before starting?
Basic HTML+CSS coding skills
12,637
Learners
745
Reviews
2,114
Answers
4.9
Rating
23
Courses
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
All
114 lectures ∙ (24hr 30min)
Course Materials:
All
55 reviews
5.0
55 reviews
Reviews 3
∙
Average Rating 5.0
5
안녕하세요. 게으르고 공부하기 싫어라 하는 천성을 가진 늦깍이 수강생입니다. 코딩공부를 해 봐야겠다고 생각한 것이 오륙년 전서 부터인데, 그래서 그동안 한번씩 시도를 해 봤으나 번번히 실패를 거듭하다가 지난해 12월 부터 시간적으로 여유가 좀 있기도 하고 또 더 미뤘다가는 삶이 끝날때 까지 결국 못하고 말 것 같은 생각이 들어서 몇 달간 꾸준히 코딩 공부를 이어 가고 있습니다. 이번에 '반응형 웹사이트 포트폴리오(Architecture Agency)' 강의를 집중해서 들었으며 보름 만에 일단 완성을 했습니다. 사실 이 강의도 작년 봄에 들으려고 키핑 해 두었었는데 결국 일년이 지나서 듣게 된 셈이네요. 늦게 하는 공부여서 강의를 들으면서 코딩을 하는것은 재미가 있는데, 문제는 이틀만 지나도 '어? 저거 내가 한거 맞나?' 이렇게 된다는게 문제 입니다. 살면서 누구나 느끼듯이 인연은 따로 있는 것 같습니다. 코딩웍스님을 만나기 전에 여러 경로로 강의도 들어보고, 조언도 구해봤습니다만 처음 시작하는 사람에게는 뭘 어떻게 해야 할지가 가장 힘든 것 같습니다. 누구 얘길 들으면 워드프레스나 부트스트랩을 공부하는게 낫다. 또 어떤이는 아예 학원 수강권을 끊는게 낫다. 뭐 이런 저런 의견들이 있었으며 유튜브에서도 이런저런 강의들을 들어 보았는데 무슨 말을 하는 것인지 귀에 잘 들어오지도 않다가 코딩웍스님 강의를 몇 개 듣다보니 귀가 번쩍 뜨이는 느낌을 받았습니다. 아마도 그런게 인연이 아닌가 싶습니다. 이번 강의를 들으면서 어려움도 많았으나, 질문을 올릴때 마다 친절하고 빠르게 답변을 해 주셔서 무난하게 사이트 하나를 만들게 되었습니다. 물론 저에게는 일단 만든게 중요한 것이지 다시 들여다 보면 대게 난감한 코드들이고 몇 번을 더 해 보아야 내것이 되지 않을까 싶습니다만 암튼 이렇게 사이트 하나를 완성한다는 것이 첫 발을 뗀 저에게는 참으로 대단하고 뿌듯한 일입니다. 다시 한번 감사의 인사를 전하며, 좋은 강의 많은 사람들이 듣게 되었으면 하는 바램입니다. 감사합니다.
수강평을 보면 예비 수강생들에게 좋은 가이드가 될 것 같습니다. 부족한 부분이 많은데 좋은 말씀 많이 해주셔서 감사합니다~!!
Reviews 6
∙
Average Rating 5.0
5
반응형이 어렵게 느껴졌는데 따라하느라 조금 힘들긴 했지만 퍼블리싱 실력 향상에 정말 많은 도움이 되었어요! 비록 온라인강의로만 선생님을 뵙게 되었지만 혼자 공부하는 제게는 단비같은 분이십니다 ㅠㅠ 선생님 강의 여러개 수강하고 현재는 이력서 제출중인데 꼭 취업성공하고싶어요! 선생님 강의 모두 너무너무 주옥같고 도움이 많이 되었어요!! 완전 강추합니당
수강평 감사합니다. 항상 응원할게요. 화이팅!!
Reviews 67
∙
Average Rating 4.9
5
로드맵을 따라 전 강의를 완료하고 이어서 듣고 있습니다. 꼼꼼하게 알려주셔서 이해하기 너무 좋습니다. 자료도 준비가 되어 있어서 강의에 집중이 엄청 잘됩니다. 강추!!
Junhan님 수강평 감사드립니다. 구체적인 수강평이 관심있는 학생들에게 도움이 될거에요.^^
Reviews 9
∙
Average Rating 4.6
5
앞선 강의에 이어 이번 강의도 너무 만족스럽게 잘 들었습니다!😀😀 전체 웹사이트 하나를 제작하면서 이번에도 엄청 많이 배워가네요.ㅎㅎ 일단 강의 시간이 길고 워낙 꼼꼼하고 이해하기 쉽게 잘 설명해주셔서 웹 사이트 제작 난이도 자체는 어려운 편이였지만 그래도 문제없이 잘 따라올 수 있었던 거 같습니다. 여러 가지 제이쿼리 플러그인을 같이 사용해서 만들다보니 약간 헷갈리기도 하고 어려웠지만 한편으로는 유용한 플러그인들을 가져와서 사용하는 방법, 사용자에 맞게 커스터마이징하는 방법을 배운 것도 좋았습니다. 개인적으로 강사님 강의 듣기전에는 html이랑 css개념도 부족하고 배운 내용을 바탕으로 예제 자체를 많이 만들어 보질 못하다보니 css가 너무 어렵고 재미없었는데 지금은 재미도 생기고 자신감도 붙게 해주셔서 너무 감사드립니다!
코더님~ 자세한 수강후기 감사드립니다. 코더님의 수강후기 보고 예비 수강생에게 좋은 가이드가 될 수 있을거에요.. 열심히 하시는 만큼 많이 보이고 또 그 만큼 계속 성장하시니까 저도 뿌듯합니다. 늘 지금처럼 화이팅하시구요~^^
Reviews 1
∙
Average Rating 5.0
5
반응형 웹을 하드코딩으로 배울수있는 수업이 흔치 않은데, 그리고 수업 시간이 18시간이나 되어서 강사님의 노력이 느껴지는 수업입니다. 취업용 개인 포트폴리오 홈페이지가 절실히 필요했는데 저한테 꼭 필요한 수업이었는데, 인프런과 코딩웍스께 감사드립니다. 앞으르도 더 좋은 강의 많이 부탁드릴께요.~^^
안녕하세요. 코딩웍스입니다. 퍼블리셔 취업 준비하시는군요. 퍼블리셔 취업하시려면 실력 만큼이나 이력서에 보여줄 개인 홈페이지도 쓸만한거 하나쯤은 있어야 하니까 이번 반응형 웹사이트 제작 과정 빠른 시간에 완강하시고 2회차 들으시면 개인 홈페이지 구상도 하시기 바랍니다. 코딩웍스 퍼블리싱 강의가 퍼블리셔 취업에 조금이나마 도움이 되었으면 합니다. 좋은 수강후기 주신거 감사드립니다. 화이팅~^^
$48.40
Check out other courses by the instructor!
Explore other courses in the same field!
![[LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338262/cover/01k184j4m25b7qg0qwvgf250zy?f=avif&w=420)
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![스프링 프레임워크는 내 손에 [스프2탄]강의 썸네일](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)