Thumbnail
개발 · 프로그래밍 웹 개발
입문자를 위한 CSS 기초 강의
(4.9)
12개의 수강평 ∙ 247명의 수강생

무료

지식공유자 : 유노코딩
총 21개 수업
평생 무제한 수강
수료증 미발급 강의
입문 대상 초급 중급이상
내 목록 추가 공유
입문자를 위해 준비한
[웹 개발] 강의입니다.

웹 사이트를 예쁘게 꾸미기 위해 반드시 필요한 언어, CSS의 주요 개념과 기본 문법을 소개합니다. 이제 막 HTML로 코딩 걸음마를 떼신 분들도 부담없이 소화하실 수 있습니다.

✍️
이런 걸
배워요!
CSS 용도
CSS 주요 개념
CSS 기본 문법

웹 페이지 꾸미기에 꼭 필요한,
css의 모든 것을 배울 시간!

'CSS 어린이' 를 위해 준비한 기초 강의 📖

css를 배우고 싶은 욕심만 있다면, 당신도 배울 수 있어요!

본 강의는 강의 소개와 마무리 인사를 포함, 총 21개 영상으로 구성된 입문자용 CSS 강의입니다. HTML에 대한 기초 지식만 가지고 계시면 부담없이 소화할 수 있는 강의입니다.

각 수업은 다음과 같은 흐름으로 진행됩니다. 

기초 이론 : 주요 개념들을 알기 쉽게 설명합니다.
실습 안내 : 학습한 내용을 직접 실습하며 확인합니다.
내용 정리 : 학습 내용을 정리하여 마무리합니다.

강의 목표 📜

입문자 분들이 부담감을 느끼지 않고 빠르게 공부하실 수 있도록 하기 위해, 꼭 필요한 주요 개념 위주로 내용을 구성했어요. 이 강의를 수강하고 나면 CSS 코드 작성에 필요한 능력, 그리고 추가적인 학습을 위한 기본기 등은 거의 다 갖추실 수 있을 거에요. 

이 강의를 들은 후 여러분은,

👉🏻   웹 개발 분야에서 CSS의 역할이 무엇인지 이해할 수 있어요.
👉🏻   CSS가 일하는 방식에 대해 이해할 수 있어요.
👉🏻   CSS의 기본 문법과 작성 방법을 익혀볼 수 있어요.
👉🏻   평소 즐겨 사용하는 웹 사이트의 스타일이 어떤 식으로 만들어졌는지 이해할 수 있어요.

이 강의에서 배우는 것들 

CSS, 기초 of 기초

CSS의 역할과 핵심 기초 문법, 그리고 HTML 문서와의 연결 등 CSS에 대한 가장 필수적인 기본 지식을 알려드립니다.

CSS 속성 완전정복 - 기본

선택자, 텍스트 꾸미기, 박스 모델 등 웹 콘텐츠의 기본적인 스타일을 정의하는 방법에 대해 공부합니다.

CSS 속성 완전정복 - 심화

요소를 포지셔닝 하는 법, 레이아웃을 다루는 원리와 그 방법 등
웹페이지 전체 그림을 구상할 때 필요한 개념에 대해 공부합니다.

강의 내용, 미리 확인해 보기!

기초 이론 설명

학습한 내용 실습

내용 정리


수강 전, 안내 사항을 확인하세요 🔍

하나. 다음과 같은 준비물을 챙겨주세요!

💻   컴퓨터
💻   코드 에디터 (수업에서는 Visual Studio Code를 사용해요)
💻   영타 능력 (속도가 느려도 괜찮아요)

둘. 수강 전 미리 알려드려요!

대부분의 영상에는 코드를 작성하는 장면이 등장하는데, 자칫 영상이 지루해질 수 있다고 판단해 대부분 배속 처리를 하였습니다. 따라서 코딩 실습을 따라하시는 경우 일시정지 기능을 적절히 활용해 가시면서 실습을 진행하시길 추천합니다!


지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
코딩을 처음 접하는 사람
HTML을 공부 중이거나 공부해 본 사람
CSS 언어에 대해 알아보고 싶은 사람
📚
선수 지식,
필요한가요?
HTML
코드 에디터 사용법 (종류는 무관해요)

안녕하세요
유노코딩 입니다.
유노코딩의 썸네일

배움의 과정에서 겪는 불필요한 고통들이 사라지길 바라고, 또 그래야만 한다고 믿습니다.

경험자의 진정성과 경험을 나누면 고통은 줄어들 수 있습니다.

저의 모든 강의 콘텐츠에서 그런 마음을 느끼실 수 있도록 노력하겠습니다.

감사합니다^^

커리큘럼 총 21 개
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 문법 학습 & 속성의 종류
기본 문법 및 사용 방법
선택자 1편
텍스트 꾸미기 속성
display 속성 & border 속성
박스모델 1편, 박스모델 소개 미리보기
박스모델 2편, margin padding 다루기
박스모델 3편, box-sizing
박스모델 4편, background
float 그리고 clear
position 1편, relative absolute
position 2편, fixed sticky
flexbox 1편, 정의 및 사용 방법 미리보기
flexbox 2편, 몇 가지 관련 속성
선택자 2편, 특성 선택자와 결합자
의사클래스(가상클래스) 미리보기
의사요소
inherit, initial, unset
z-index
섹션 2. 강의 마무리
수업 마무리
강의 게시일 : 2021년 06월 15일 (마지막 업데이트일 : 2021년 06월 15일)
수강평 총 12개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
12개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
트릴 thumbnail
무료 강의지만 퀄리티가 상당히 높습니다. 원래 무료 강의는 잘 듣지 않는데 이 강의를 계기로 약간은 생각이 바뀌게 되었네요, 강의 만드느라 고생하셨고, 앞으로도 좋은 강의로 뵐 수 있었으면 합니다.
2021-07-22
이주노 thumbnail
재미있는 강의였습니다
2021-07-25
Jong-Dae Park thumbnail
relative 발음 : 렐러티브
2021-07-25
이서우 thumbnail
good 좋아요
2021-07-28
rokaf09277 thumbnail
많은 도움이 되었습니다. 감사합니다.
2021-07-22

무료

내 목록 추가 공유
지식공유자 : 유노코딩
총 21개 수업
평생 무제한 수강
수료증 미발급 강의
입문 대상 초급 중급이상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스