코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 HTML & CSS 박사로 들어주는 끝판왕 강좌!
HTML과 CSS의 기초부터 고급까지
Emmet으로 HTML 간편하게 코딩하기
웹 표준을 준수하는 퍼블리싱
포지션, 각종 레이아웃, 선택자 등 어려운 CSS 개념들
상속과 리세팅, 벤더 프리픽스, 포커스 비저블 등 복잡한 개념들
변수, 웹폰트, 필터, 애니메이션 등 고급 기능 활용법
반응형으로 모바일 환경에 대응하기
접근성 - 다양한 사용자를 배려하는 웹사이트 만들기
시멘틱 태그와 BEM을 활용한 적절한 사이트 구성
파이널 프로젝트를 통한 실전 지식
코딩을 처음 시작하시는 분들이 첫 코딩 경험부터 시작할 수 있는 시리즈를 만들고 싶었습니다.
그 첫걸음으로, 컴공 지식이 없어도 상대적으로 배워나가기 쉬운 HTML & CSS를 첫 주제로 선택했습니다.
한편 진입장벽이 낮은 HTML & CSS지만, 이를 깊이 있게 공부하여 '제대로' 활용하는 개발자들은 흔하지 않죠. 그래서 어려운 개념들과 세세한 속성들까지 파고들어가서 현업 개발자 및 퍼블리셔에게도 큰 도움이 될 수 있는 강좌로 만들고자 했습니다.
정말 멋지고 유익한 강의를 만들어보자는 목표로, 오랫동안 조사하고 준비한 끝에 이 강의를 제작하게 되었습니다.
프로그래밍이 처음인 분
퍼블리싱을 하고 싶은 웹 디자이너
HTML/CSS을 잘 하고 싶은 개발자
강의의 내용을 손에서도 확인하실 수 있도록 꾹꾹 눌러담았습니다.
(ℹ️ 이 책은 자바스크립트는 기초 부분만, 그리고 가볍게만 다룹니다.)
군더더기 없이 시원시원한 진행으로 여러분의 소중한 시간을 절약합니다. (수강자에 따라 말이 빠르게 느껴질 수 있는 점 양해 부탁드립니다. 꼭 무료파트 강들을 들어보시고 수강해주세요!)
각 태그와 속성의 기능들 뿐 아니라, 이들의 다양한 활용도와 웹 표준에 맞는 사용법, 이론적 원리까지 상세히 설명하여 최대한 많은 것을 배워가실 수 있도록 준비했습니다.
각 강마다 영상의 주요 포인트와 복붙 가능한 실습 명령어와 코드가 웹페이지에 정리되어 있어서, 이를 따라 하고 응용하며 수월히 실습을 진행할 수 있습니다.
학생 분들도 부담 없이 공부하실 수 있도록, 첫 5시간 분량을 미리 보기를 통해 무료로 공개합니다.
유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, IT서적들을 집필하는 작가입니다. 풀스택 개발자로 일해 온 경험을 살려, 어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.
✅ 섹션 1: HTML 기초 HTML 태그들과 각각의 적절한 활용법
✅ 섹션 2: CSS 기초
✅ 섹션 3: HTML 심화
✅ 섹션 4: CSS 심화
 |
 |
✅ 섹션 5: 파이널 프로젝트
Q. 프로그래밍을 처음 접하는데 수업을 들을 수 있을까요?
A. HTML과 CSS는 입문자들이 시작하기 가장 적합한 주제입니다. 코딩이 처음인 사람들도 따라올 수 있도록, 첫 환경 세팅부터 코딩 툴 사용까지 자세히 설명하고 실습도 가능한 쉬운 용어를 사용하여 진행합니다.
Q. 이미 웹 개발을 어느 정도 하는데 얼마나 도움이 될까요?
A. 웹 개발자들이 흔히 충분이 알고 사용한다고 여기는 기본적인 HTML 태그나 CSS 속성들도, 깊이 공부해 보면 그동안 모르는 것이 많았음을 깨닫게 되곤 합니다. 그동안 적당히만 알고 활용해왔던 요소와 기능들을 보다 제대로 쓸 수 있게 되고, 외관뿐 아니라 내부와 구조상으로도 아름다운 사이트를 만들기 위한 유용한 지식들을 배우실 수 있게 될 거에요.
Q. 강의속도가 빨라서 어렵지 않을까요?
A. 영상의 진행은 빠르지만 각 강마다 강의 페이지가 링크되어 있어서 영상의 내용을 편하게 복습하고 실습할 수 있도록 해두었습니다. 페이지 곳곳의 예제들과 플레이그라운드를 활용해서, 여러분의 시간효율을 최대한대로 활용하는 학습을 진행하실 수 있을 거예요!
학습 대상은
누구일까요?
코딩을 처음 배워보는 사람
퍼블리싱을 직접 해내고 싶은 웹 디자이너
HTML, CSS를 보다 잘 다루고 싶은 개발자
HTML과 CSS의 깊은 이론까지 공부해보고 싶은 개발자
표준에 부합하고 접근성 높게 웹 개발을 하고 싶은 개발자
30,404
명
수강생
1,561
개
수강평
86
개
답변
4.9
점
강의 평점
17
개
강의
유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, IT서적들을 집필하는 작가입니다. 풀스택 개발자로 일해 온 경험을 살려, 어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.
🎬 YouTube 얄팍한 코딩사전 채널 (클릭!)
📕 얄코의 책들 보러가기 (클릭!)
전체
54개 ∙ (11시간 16분)
1. 강의 소개
01:39
2. ⭐️ 강의를 듣는 방법
05:14
4. 수강을 위한 환경 세팅
09:35
6. 제목과 본문
20:50
7. 종류와 중요도에 따른 태그
09:41
8. 인용된 컨텐츠
11:40
9. 나열되는 요소들
08:45
10. 이미지 넣기
11:53
11. 표 사용하기
11:04
12. 다른 곳으로의 링크
09:24
13. 사용자로부터 입력 받기 1
06:34
14. 사용자로부터 입력 받기 2
20:27
15. 사용자로부터 입력 받기 3
15:04
16. CSS로 넘어가기 전에
09:06
18. 글자와 텍스트 스타일
22:06
19. 문단과 목록 스타일
09:29
20. 색 표현하기
10:46
21. 인라인 요소와 블록 요소
13:29
22. 박스 모델 1
18:37
23. 박스 모델 2
14:28
24. 배경 꾸미기
14:08
25. 포지셔닝
13:49
26. 요소들을 감추는 방법들
07:51
27. Flex 레이아웃
22:34
전체
121개
5.0
121개의 수강평
수강평 1
∙
평균 평점 5.0
5
I was listening to Johns Hopkins HTML/CSS/JS lectures on Coursera and I fell for it. Even though Johns Hopkins is a prestigious university, the lectures were poor. However, this lecture was different. 1. First, when evaluating a lecture, I look at the total time of the content. I don't look at lectures that are short because I don't dig deep. However, this lecture was 12 hours long, and it was quite long because it only covered HTML/CSS, so I believed it. The lecturer also proceeded quickly, so it was practically 30 hours compressed. 2. Second, the lecturer's ability to convey the content. I felt that this lecture conveyed the content in a very efficient and clean way. I also liked the flow of the lecture. And it covered not only the core parts, but also the parts that were good to know. It seemed like a lot of effort was put into making it easy to understand. 3. Third, I liked the coding environment setting method that can only be heard here, various tips, and how to study further on your own. After taking only famous but poorly written lectures on Coursera and Udemy, it was nice to finally see a lecture with substance. It made me realize that there is no clear correlation between fame and teaching ability.
Thank you for giving me a great sense of accomplishment as much as I prepared hard. ㅠㅠ In fact, the smarter the professors are, the more they excel and know so much, that their lectures often don't convey well to beginners. As a person with a limited brain, I put a lot of thought into how to lecture so that others can understand well, and I'm really happy that it was of help to you. I will repay you with better lectures in the future. Thank you for taking the class!!
수강평 1
∙
평균 평점 5.0
5
It was good that you taught me in detail and went through everything. As with all studies, I found my own way to study and I was able to concentrate much better. In my case, I interpreted the source code myself first and then listened to the lecture. In this case, I thought about whether my interpretation was correct or what the grammar I didn't know meant and went into the lecture, so it stayed in my head longer!
수강평 6
∙
평균 평점 5.0
5
As a YouTube subscriber, I completed the Git lecture and purchased the HTML/CSS lecture. The strength of Yalko's lecture is that the curriculum is clean and the delivery is good, so the content is easy to understand. Although I am listening to the lecture, I am absorbed in it as if I am listening to a story. If you follow the lecture like this, you will see yourself understanding and acquiring the content at some point. I think it is a lecture that is worth the money. If you are thinking about it, I strongly recommend purchasing it.
수강평 5
∙
평균 평점 5.0
5
I only did backend, but there were so many parts that I was stuck on when designing the front end, so I bought it and listened to it. When I first watched the lecture, I was working on the design in a state of vague understanding, but then I suddenly thought, "I heard something in the lecture, but I don't know exactly what I'm using?" Every time I went back and listened to it again, I was able to understand and use it clearly again, unlike when I first listened to it. If there was more in-depth content, I would pay to listen to it. (23-02-23) When something doesn't work while developing, I find the problem and put in the command I want, and it's so fun to see it change exactly. / This may be TMI, but when I first listened to the lecture, I thought the speed was too fast, and I thought I would understand it but not learn anything while watching the instructions on the homepage, but it really shows its value when I read it twice. I recommend that others read it once and try designing, and when you read it twice, don't read it thoroughly, but go to the category of parts that don't work and look at them again. It's really... not a real country, but a real country. // When I have some time, I should take a look at GitHub and JavaScript courses.
I'm glad it was helpful for your work. Thank you for taking the class!!!
수강평 11
∙
평균 평점 5.0
지식공유자의 깜짝할인 중 (8일 남음)
₩26
22%
₩44,000
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
.png?f=avif&w=420)
![Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[Fantasy Pig's Feet] From design to coding강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
