Thumbnail
BEST 개발 · 프로그래밍 웹 개발

제대로 파는 HTML & CSS - by 얄코

(4.9)
31개의 수강평 ∙ 708명의 수강생

44,000원

지식공유자: 얄팍한 코딩사전
총 52개 수업 (11시간 16분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
입문자를 위해 준비한
[웹 퍼블리싱, 프론트엔드] 강의입니다.

코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 HTML & CSS 박사로 들어주는 끝판왕 강좌!

✍️
이런 걸
배워요!
HTML과 CSS의 기초부터 고급까지
Emmet으로 HTML 간편하게 코딩하기
웹 표준을 준수하는 퍼블리싱
포지션, 각종 레이아웃, 선택자 등 어려운 CSS 개념들
상속과 리세팅, 벤더 프리픽스, 포커스 비저블 등 복잡한 개념들
변수, 웹폰트, 필터, 애니메이션 등 고급 기능 활용법
반응형으로 모바일 환경에 대응하기
접근성 - 다양한 사용자를 배려하는 웹사이트 만들기
시멘틱 태그와 BEM을 활용한 적절한 사이트 구성
파이널 프로젝트를 통한 실전 지식

 

⭐️  대학교 이메일 계정이 있다면?
🎓  대학생 반값쿠폰 받으러 가기 (클릭) 👉


이런 것들을 배워요! 📚

  • HTML과 CSS를 쌩초보를 위한 기초부터 현업 개발자를 위한 고급 활용법과 실전 팁, 이해하기 어려웠던 이론들까지 쉽게 알아봅니다.
  • 단지 시각적으로만 페이지를 구현해 내는 것을 넘어서서, 보다 많은 사람들을 배려하고 타 개발자와도 협업하기 좋은 '착한' 웹사이트를 만드는 법을 배웁니다.

'제대로 파는' 강의를 만든 이유 ⛏️ 

코딩을 처음 시작하시는 분들이 첫 코딩 경험부터 시작할 수 있는 시리즈를 만들고 싶었습니다.
그 첫걸음으로, 컴공 지식이 없어도 상대적으로 배워나가기 쉬운 HTML & CSS를 첫 주제로 선택했습니다.

한편 진입장벽이 낮은 HTML & CSS지만, 이를 깊이 있게 공부하여 '제대로' 활용하는 개발자들은 흔하지 않죠. 그래서 어려운 개념들과 세세한 속성들까지 파고들어가서 현업 개발자 및 퍼블리셔에게도 큰 도움이 될 수 있는 강좌로 만들고자 했습니다.

정말 멋지고 유익한 강의를 만들어보자는 목표로, 오랫동안 조사하고 준비한 끝에 이 강의를 제작하게 되었습니다.


누가 이 강의를
들으면 좋을까요? 
👨‍💻 

프로그래밍이 처음인 분

퍼블리싱을 하고 싶은 웹 디자이너

HTML/CSS을 잘 하고 싶은 개발자

  • 🍼 코딩을 배우기 시작하는 사람
  • 🎨 퍼블리싱을 직접 해내고 싶은 웹 디자이너
  • 🎓 HTML, CSS를 보다 잘 다루고 싶은 개발자
  • ⛏️ HTML과 CSS의 깊은 이론까지 공부해 보고 싶은 개발자
  • 💖 표준에 부합하고 접근성 높게 웹 개발을 하고 싶은 개발자

얄코 강의만의
특별한 점 ✨

빠르고 쉬운 
영상 강의 🚀

군더더기 없이 시원시원한 진행으로 여러분의 소중한 시간을 절약합니다. (수강자에 따라 말이 빠르게 느껴질 수 있는 점 양해 부탁드립니다. 꼭 무료파트 강들을 들어보시고 수강해주세요!)

투머치설명러의 
디테일한 강의 🎙️

각 태그와 속성의 기능들 뿐 아니라, 이들의 다양한 활용도와 웹 표준에 맞는 사용법, 이론적 원리까지 상세히 설명하여 최대한 많은 것을 배워가실 수 있도록 준비했습니다.

웹페이지를 통한 
편리한 실습 🖥️

각 강마다 영상의 주요 포인트와 복붙 가능한 실습 명령어와 코드가 웹페이지에 정리되어 있어서, 이를 따라 하고 응용하며 수월히 실습을 진행할 수 있습니다. 

기초 내용  
무료 공개 😎

학생 분들도 부담 없이 공부하실 수 있도록, 첫 5시간 분량을 미리 보기를 통해 무료로 공개합니다.


얄코는 누구인가요? 😀

유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, 도서 혼자 공부하는 얄팍한 코딩지식의 저자입니다.  어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.  낮에는 풀스택 개발자로서 프로그래밍을 하고 있습니다.

🎬   YouTube 얄팍한 코딩사전 채널 (클릭!)
📕  혼자 공부하는 얄팍한 코딩지식 (클릭!)


강의를 위해 특별제작한 
⭐️  플레이그라운드  ⭐️ 

  • 강의용 웹페이지에는 CSS 학습과 복습을 수월히 하기 위해 만든 플레이그라운드가 주제별로 아래와 같이 마련되어 있습니다.

  • 각 속성의 값들을 조정해 보면서 이들이 웹 상의 요소들에 어떻게 반영되는지 직접 확인할 수 있어요.

  • 어떤 형식의 값들을 사용할 수 있는지를 확인해가며 해당 CSS 속성을 활용하는 다양한 예를 알아갈 수 있습니다.

이 강의를 들으면 
무엇이 달라질까요? 💪

  • 입문자나 비전공자는 코딩에 대한 두려움이 사라지게 됩니다.
  • 어떤 웹사이트든 퍼블리싱 해낼 수 있는 자신감을 얻게 됩니다.
  • 어렴풋이만 알고 있던 개념들, 잘 모르고 사용하던 기능들을 명확히 이해하게 됩니다.
  • 웹사이트를 '제대로', '착하게', '사려 깊게' 만드는 법을 배우게 됩니다.

어떤 내용을
배우게 되나요? 📚

섹션 1: HTML 기초 HTML 태그들과 각각의 적절한 활용법

  • 텍스트 콘텐츠, 목록, 이미지, 표, 링크, 입력 등 각종 웹 구성요소들
  • 웹 표준과 권장사항에 맞게 코딩하기
  • Emmet을 이용한 빠른 코딩

섹션 2: CSS 기초

  • CSS의 다양한 적용 방법과 기본 선택자들
  • 텍스트 요소, 목록, 색, 배경 등 각종 요소들의 스타일링
  • 인라인/블록, 박스 모델, 포지션 등 CSS의 핵심 개념들
  • 플렉스 레이아웃을 활용한 웹페이지 구조

섹션 3: HTML 심화

  • 헤더 안의 메타정보, 뷰포트, 오픈그래프 등의 페이지 설정 
  • 시멘틱 태그와 BEM을 통해 페이지를 체계적으로 구성하기
  • 다양한 사용자를 배려하는 접근성 갖추기
  • SVG, 영상 등 기타 미디어 활용법

섹션 4: CSS 심화

  • 임포트와 변수, 리세팅, 벤더 프리픽스 등의 실무 개념
  • 플로팅 및 그리드를 활용한 레이아웃
  • 트랜지션, 애니메이션, 필터 및 기타 다양한 CSS 기능들
  • 반응형으로 웹사이트 만들기
  • 웹 폰트, 아이콘, 프레임워크 등 외부 요소 활용법

✅ 섹션 5: 파이널 프로젝트

  • 위와 같은 웹페이지를 반응형으로, 자바스크립트를 사용하지 않고 HTML과 CSS만으로 만드는 실습을 진행합니다.

자주묻는 질문을
확인하세요 💬

Q. 프로그래밍을 처음 접하는데 수업을 들을 수 있을까요?

A. HTML과 CSS는 입문자들이 시작하기 가장 적합한 주제입니다. 코딩이 처음인 사람들도 따라올 수 있도록, 첫 환경 세팅부터 코딩 툴 사용까지 자세히 설명하고 실습도 가능한 쉬운 용어를 사용하여 진행합니다.

Q. 이미 웹 개발을 어느 정도 하는데 얼마나 도움이 될까요?

A. 웹 개발자들이 흔히 충분이 알고 사용한다고 여기는 기본적인 HTML 태그나 CSS 속성들도, 깊이 공부해 보면 그동안 모르는 것이 많았음을 깨닫게 되곤 합니다. 그동안 적당히만 알고 활용해왔던 요소와 기능들을 보다 제대로 쓸 수 있게 되고, 외관뿐 아니라 내부와 구조상으로도 아름다운 사이트를 만들기 위한 유용한 지식들을 배우실 수 있게 될 거에요.

Q. 강의속도가 빨라서 어렵지 않을까요?

A. 영상의 진행은 빠르지만 각 강마다 강의 페이지가 링크되어 있어서 영상의 내용을 편하게 복습하고 실습할 수 있도록 해두었습니다. 페이지 곳곳의 예제들과 플레이그라운드를 활용해서, 여러분의 시간효율을 최대한대로 활용하는 학습을 진행하실 수 있을 거예요!

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
코딩을 처음 배워보는 사람
퍼블리싱을 직접 해내고 싶은 웹 디자이너
HTML, CSS를 보다 잘 다루고 싶은 개발자
HTML과 CSS의 깊은 이론까지 공부해보고 싶은 개발자
표준에 부합하고 접근성 높게 웹 개발을 하고 싶은 개발자

안녕하세요
얄팍한 코딩사전 입니다.
얄팍한 코딩사전의 썸네일

유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, 도서 혼자 공부하는 얄팍한 코딩지식의 저자입니다.  어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.  낮에는 풀스택 개발자로서 프로그래밍을 하고 있습니다.

커리큘럼 총 52 개 ˙ 11시간 16분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 3. HTML 더 깊이 알아보기
상단의 태그들 15:36
모두가 이용할 수 있는 웹사이트 10:04
용도에 따른 태그 사용하기 09:43
가독성을 위한 이름 짓기 11:10
기타 미디어 14:35
섹션 4. CSS 더 깊이 알아보기
반복, 공통되는 스타일 12:08
선택자 심화 21:17
상속과 리셋 14:09
벤더 프리픽스 06:44
서체와 웹폰트 14:26
테이블 스타일링 08:27
텍스트 심화 07:53
Float 속성 13:49
Grid 레이아웃 21:20
변형과 애니매이션 32:50
반응형 웹 17:48
기타 속성들 20:32
프레임워크와 라이브러리 이용하기 13:34
섹션 5. 파이널 프로젝트
기초 설정 07:26
상단 인트로 12:34
헤더와 메뉴 14:43
메인과 about 11:35
HTML & CSS 섹션 10:56
커리큘럼 10:08
문의하기와 푸터 15:50
섹션 6. 강의를 마무리하며
감사합니다. 00:42
강의 게시일 : 2022년 06월 02일 (마지막 업데이트일 : 2022년 06월 02일)
수강평 총 31개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
31개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
하정원 thumbnail
자세히 가르쳐주시고 하나하나 훑어주셔서 좋았어요. 모든 공부가 그렇겠지만 자기만의 방법을 찾고 공부하니까 훨씬 집중이 잘되더라구요. 저 같은 경우에는 소스코드를 먼저 스스로 해석해보고 강의를 들었는데 이 경우에 내가 해석한게 맞는지 또는 모르는 문법은 어떤 것을 의미하는지 생각하고 강의에 임하다보니까 더 머리 속에 남았어요!
2022-06-13
HDK thumbnail
유튜브 구독자로서 Git 강의를 완강하고 html/css 강의도 이어서 구매하였습니다. 얄코님 강의의 강점은 깔끔한 커리큘럼과 전달력이 좋으셔서 내용이 귀에 쏙쏙 박힌다는 점입니다. 강의를 듣는 것이지만 마치 이야기를 듣는 것처럼 저도 모르게 빠져들어 듣게 됩니다. 이렇게 강의를 따라가다 보면 어느 순간 내용을 이해하고 습득한 자신을 볼 수 있게 됩니다. 돈이 전혀 아깝지 않은 강의라고 생각됩니다. 고민 중이시라면 구매하는 것을 강력 추천드립니다.
2022-06-12
gmlgus0424 thumbnail
우연히 유튜브로 보게되었는데 너무 재밌어서 결제해서 끝까지 봤어요!! 대학생 쿠폰도 감사합니다!!
2022-09-22
지식공유자 얄팍한 코딩사전
감사합니다!
2022-09-22
운동장사거리 thumbnail
준비 많이 하신게 느껴지는 강의입니다. 정말 자세히 알려주셔서 좋아요.
2022-07-25
with_all thumbnail
결론부터 말씀드려서 아주 훌륭한 강의 입니다. 배우는 내용이 많아서 다시 복습을 해봐야 할 것 같습니다. 다음 강의들도 기대됩니다!
2022-06-22