채널톡 아이콘

코딩은 처음이라 with 웹 퍼블리싱 - CSS

CSS 기초부터 애니메이션, 반응형까지 학습합니다. 실전 예제를 통해 학습한 내용을 복습하면서 확실하게 기본기를 다집니다.

(5.0) 수강평 21개

수강생 1,202명

난이도 입문

수강기한 무제한

css
css
웹개발
웹개발
웹퍼블리싱
웹퍼블리싱
퍼블리싱
퍼블리싱
css
css
웹개발
웹개발
웹퍼블리싱
웹퍼블리싱
퍼블리싱
퍼블리싱
Thumbnail
날개 달린 동전

강의 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

마케팅 파트너스

강의 추천하고 성장과 수익을 만들어 보세요!

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

5.0

5.0

아라레

6% 수강 후 작성

좋은 강의 감사합니다.

5.0

hesshes

39% 수강 후 작성

입문자에게 간결하고 쉽게 설명

5.0

longde129177

61% 수강 후 작성

상세하게 설명을 잘 해주셔서 머리에 쏙쏙 들어옵니다.

수강 후 이런걸 얻을 수 있어요

  • CSS 선택자

  • CSS 서체 글자 스타일

  • CSS 레이아웃 - float, position

  • CSS 레이아웃 - flexbox

  • CSS 애니메이션, 반응형

HTML 다음은 CSS!
CSS로 돋보이는 웹페이지를 만드세요 ⭐

코딩은 처음이라 with 웹퍼블리싱

웹 문서 완성도를 높이는 CSS 🎨

CSS는 웹 문서에서 모양을 담당합니다. HTML 요소에서 대상을 선택하고 선택한 대상의 색상, 배경, 위치, 애니메이션 등을 설정하여 보기 좋고 사용도 편리한 웹문서를 만들 수 있어요.

이번 강의는 <코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초>에 이어지는 강의로, HTML 학습이 되었다는 전제로 웹페이지 스타일 설정에 필요한 필수 테크닉을 학습합니다.

CSS는 HTML 요소에서 스타일 대상을 정확하게 선택하는 것이 우선입니다. 이번 강의에선 CSS 선택자를 확실하게 학습할 수 있어요. 반응형 기초를 확실하게 습득해서 다양한 너비의 기기에서 최적화되어 표현되는 웹 페이지를 구현합니다. transition 및 animation, transform 속성을 활용하여 애니메이션을 구현하는 방법까지 배워보세요.

강의를 들은 후 여러분은 CSS 선택자를 통해 원하는 요소를 정확하게 선택하고, 선택한 요소의 스타일을 자유자재로 설정할 수 있게 될 거예요!

✔️ 도서 저자 직강 강의를 만나보세요!

  • 본 강의는 영진닷컴의 도서 <코딩은 처음이라 with 웹 퍼블리싱>의 저자가 도서 내용을 기반으로 강의를 진행합니다. 도서와 함께 보시면 학습에 더 도움이 되실 거예요.
  • '코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초' 강의를 수강한 후 본 강의를 이어 학습해주세요.
  • 보충학습이 필요하시다면 저자의 유튜브 채널에서 추가 강의를 만나보세요.

이런 분들께 추천해요 🙋‍♀️

HTML 기초는 있지만
CSS 기초가 부족한 분

반응형, 애니메이션 구현이
어려운 분

Flex를 활용한 유연한
레이아웃을 배우고 싶은 분


강의 특징 ✨

CSS 스타일 설정에 필요한 속성
하나하나 학습해요!

수년간의 강의 경력을 바탕으로
이해하기 쉽게 설명해드려요!

심플한 예제로
기본을 확실하게 다져요!

Flexbox를 통한
효율적인 레이아웃을 배워요!


이런 걸 배워요 📚

1) CSS 선택자를 확실하게 학습합니다. CSS의 시작은 대상을 정확하게 선택하는 것에서부터 시작합니다.


2) 서체 관련 스타일을 학습합니다.


3) 레이아웃과 관련된 필수 속성을 학습합니다.


4) 배경 관련 속성을 모두 학습합니다.

 


5) Flexible 레이아웃의 핵심 flex를 학습하여 더욱 다양한 레이아웃을 쉽게 구현합니다.


6) 애니메이션의 기초를 학습합니다.


7) 반응형의 기초를 확실하게 학습하고 실습합니다.

데스크탑 화면

태블릿 화면

모바일 화면


8) 앞 강의에서 작성한 HTML 웹페이지를, CSS를 활용하여 구현합니다. 


자주 묻는 질문 💬

Q1. HTML을 전혀 모르는데 이 강의를 들어도 괜찮을까요?

네, 괜찮습니다.
이 강의는 CSS 학습에 필요한 최소한의 HTML 구조만 간단히 짚고 바로 스타일링으로 넘어갑니다.
HTML 문법을 깊이 있게 알지 않아도, 태그 구조를 이해하는 수준이면 충분히 따라오실 수 있습니다.

Q2. CSS를 배우면 실제로 어떤 것을 만들 수 있나요?

이 강의를 수강하시면 다음과 같은 작업이 가능해집니다.

글자·색상·여백·정렬 등 기본 스타일링
카드 UI, 버튼, 레이아웃 구성
간단한 반응형 화면 구성의 기초 이해

 

즉, 디자인된 화면을 웹 페이지로 ‘보이게 만드는 단계’까지 도달하실 수 있습니다.

Q3. CSS가 너무 외워야 할 것이 많아 보이는데, 초보자도 괜찮을까요?

이 강의는 암기 위주가 아닌 이해 중심으로 구성되어 있습니다.
속성을 무작정 나열하지 않고,
      왜 이 속성이 필요한지
      언제 사용하는지
      비슷한 속성은 어떻게 구분하는지를 기준으로 설명합니다.

따라서 처음 배우시는 분도 부담 없이 학습하실 수 있습니다.


다음 단계에 도전해보세요.

 Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드

https://inf.run/Gx3Ty

 모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript

https://inf.run/uBnGj

 

지식공유자 소개 ✒️

안녕하세요. rock's easyweb 유튜브 채널 운영자 김동주 강사입니다.  

주요 도서

  • 웹디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서 - 비제이퍼블릭 출판사

  • 코딩은 처음이라 with 웹 퍼블리싱 - 영진닷컴

Contact Me

오프라인 강의 정보, 추가 영상 등을 확인하실 수 있습니다. 

소통 창구(설문, 1:1오픈 채팅방)✒️

수강생 분들은 새소식란의 소개되어 있는 구글 설문1:1 오픈 채팅방을 통해 언제든 의견과 질문을 하실수 있습니다.

 

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • HTML을 학습하신 분

  • 반응형 구현이 힘든 분

  • 애니메이션 기초가 부족한 분

선수 지식,
필요할까요?

  • HTML

  • 포토샵

안녕하세요
이지웹입니다.

2,711

수강생

58

수강평

4

답변

4.9

강의 평점

11

강의

■ [현재] ESTSOFT KDT 프론트엔드 강의
■ 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2025.11 재판 /2026 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

더보기

커리큘럼

전체

33개 ∙ (9시간 12분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

21개

5.0

21개의 수강평

  • 채혜송님의 프로필 이미지
    채혜송

    수강평 4

    평균 평점 5.0

    5

    33% 수강 후 작성

    • longde129177님의 프로필 이미지
      longde129177

      수강평 1

      평균 평점 5.0

      5

      61% 수강 후 작성

      상세하게 설명을 잘 해주셔서 머리에 쏙쏙 들어옵니다.

      • 이지웹
        지식공유자

        소중한 수강평 감사드립니다.

    • hesshes님의 프로필 이미지
      hesshes

      수강평 2

      평균 평점 5.0

      5

      39% 수강 후 작성

      입문자에게 간결하고 쉽게 설명

      • 이지웹
        지식공유자

        피그마 디자인 참조 코딩하기 강의가 새롭게 오픈되었습니다. 해당 강의도 확인해보세요 ^^ https://inf.run/CZ1az

    • 한예지님의 프로필 이미지
      한예지

      수강평 1

      평균 평점 5.0

      5

      100% 수강 후 작성

      • 아라레님의 프로필 이미지
        아라레

        수강평 223

        평균 평점 5.0

        5

        6% 수강 후 작성

        좋은 강의 감사합니다.

        이지웹님의 다른 강의

        지식공유자님의 다른 강의를 만나보세요!

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!

        연관 로드맵

        강의가 포함된 로드맵으로 학습해 보세요!

        무료