인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

[웹 퍼블리싱 실습] 반응형 사이트 만들기

모바일, 태블릿, 웹 환경에 따라 자유자재로 스크린 사이즈를 변경하는 반응형 웹을 제작해봅시다.

(5.0) 수강평 26개

수강생 1,977명

반응형 웹
Thumbnail

초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • 반응형 웹 사이트 제작하기

  • 시맨틱 태그의 종류와 쓰임새 알기

  • 미디어 쿼리 사용하기

탐색이 즐거운 반응형 웹사이트!
그걸 만드는 나는 황금손 🖐️✨

웹 퍼블리셔 꿈나무를 위한 강의 ✏️

'필터 이펙터' 중

생동감 넘치는 웹사이트, 여러분도 만들 수 있어요! 

웹 페이지 크기가 접속한 디바이스 스크린 해상도에 맞게 자동으로 변하는 반응형 사이트를 만드는 수업이에요. '[웹 퍼블리싱] 웹 표준 사이트 만들기' 수강 후 본 과목을 들으시면 더 빠르게 이해하실 수 있으며, 하나 하나씩 따라오다 보면 사이트를 어떻게 만들어야 하는지 감이 잡힐거예요.

완강을 향해! 여러분의 열공을 응원할게요.🧚🏻‍♀️

이런 걸 배워요 📖

반응형 레이아웃 실습

헤더 및 메뉴 실습

컨텐츠 영역 실습

이미지 슬라이드 및 이펙트 실습

📢 수강 시 참고사항 안내

웹퍼블리셔 꿈나무 로드맵 🌲

*각 이미지를 클릭하면 해당 강의 페이지로 이동합니다.

1. [웹 퍼블리싱 실습] 웹 표준 사이트 만들기

사이트 만드는 방법에 대한 감을 잡을 수 있는 강의입니다.

2. [웹 퍼블리싱 실습] 반응형 사이트 만들기   현재 강의

웹 환경에 따라 자유자재로 스크린 사이즈를 변경하는 반응형 웹을 제작합니다.

3. 영화 예매 사이트 만들기: 디자인편

이제는 실전이다! 영화 예매 사이트 제작 1탄, 디자인편입니다.

4. 영화 예매 사이트 만들기: 코딩편

이제는 실전이다! 영화 예매 사이트 제작 2탄, 코딩편입니다.

예상 질문 Q&A 💬

Q. 비전공자도 들을 수 있는 강의인가요?

네! 기초적인 내용을 다루는 강의이기 때문에 처음 배우시는 분들도 충분히 들으실 수 있습니다.^^

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

여러분의 열정만 준비해오시면 됩니다.^^

Q. 수업 내용을 어느 수준까지 다루나요?

HTML과 CSS를 전혀 몰라도 충분히 함께 배워갈 수 있는 수준입니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 다양한 디바이스 환경에 맞게 변화하는 웹을 제작하고 싶은 분

  • 반응형 사이트를 하나하나 따라하며 만들고 싶은 분

  • 미디어 쿼리에 대해 자세히 알아보고 웹에 적용해보고 싶은 분

  • 웹 퍼블리셔 직무를 희망하는 분

선수 지식,
필요할까요?

  • 웹 표준 사이트 만들기 강의 (선택)

안녕하세요
webstoryboy입니다.

7,156

명

수강생

92

개

수강평

1

개

답변

4.9

점

강의 평점

4

개

강의

안녕하세요! 🧑🏻‍💻

웹에 관심이 많고, 강의를 하고있는 
웹 스토리보이입니다.

유튜브 채널 Webstoryboy에서 
여러가지 강의를 제작합니다.

포기하지 않고 마지막 강의 까지 저와 함께 하나 하나씩 잘 따라와주면
웹 퍼블리셔에 한 발짝 더 다가가실 수 있을 거예요. 꼭 직접 해보셔야 실력이 늘 것입니다.

어렵거나 틀려서 잘 안 된다고, 모르겠다고 포기하시면 다른 사이트 만들 때도 힘이 들겠죠?
따라하시다가 틀리거나 안 되는게 있으시면 본인이 코딩한 것과 제 강의 소스를 비교하시면서

스스로 어디가 틀렸는지 찾아보세요. 그것 또한 공부가 될 거랍니다 🧚🏻‍♀️
오늘도 여러분의 열공을 응원하며, 화이팅입니다!

더보기

커리큘럼

전체

36개 ∙ (8시간 10분)

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

수강평

전체

26개

5.0

26개의 수강평

  • skcnc님의 프로필 이미지
    skcnc

    수강평 14

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    반응형 사이트 만드는데 도움이 많이 되었습니다. 감사합니다.

    • Leo님의 프로필 이미지
      Leo

      수강평 22

      ∙

      평균 평점 4.5

      4

      100% 수강 후 작성

      하나씩 따라하면서 학습과 실습을 같이 하면서 많이 배웠습니다.

      • ohj735님의 프로필 이미지
        ohj735

        수강평 3

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        잘 들었습니다.

        • 희진님의 프로필 이미지
          희진

          수강평 3

          ∙

          평균 평점 5.0

          5

          61% 수강 후 작성

          좋은 강의 감사합니다

          • dongseok.yu2님의 프로필 이미지
            dongseok.yu2

            수강평 2

            ∙

            평균 평점 5.0

            5

            100% 수강 후 작성

            just do it이라는 말과 가장 어울리는 강의입니다. 따라해라 그러면 답이 보이니 너무 재밌씁니다. 열심히 나머지도 수강하겠습니다

            webstoryboy님의 다른 강의

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

            영화 예매 사이트 만들기: 코딩편강의 썸네일

            영화 예매 사이트 만들기: 코딩편

            webstoryboy

            웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

            초급

            초급

            반응형 웹

            영화 예매 사이트 만들기: 디자인편강의 썸네일

            영화 예매 사이트 만들기: 디자인편

            webstoryboy

            웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

            초급

            초급

            Photoshop, 반응형 웹

            [웹 퍼블리싱 실습] 웹 표준 사이트 만들기강의 썸네일

            [웹 퍼블리싱 실습] 웹 표준 사이트 만들기

            webstoryboy

            이왕 만들거면 제대로 만들자! 공식 웹 표준을 지키며 만드는 퍼블리싱 강의입니다🧑🏻‍💻

            입문

            입문

            HTML/CSS

            비슷한 강의

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

            영화 예매 사이트 만들기: 코딩편강의 썸네일

            영화 예매 사이트 만들기: 코딩편

            webstoryboy

            웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

            초급

            초급

            반응형 웹

            입문자를 위한 반응형 웹 기초 강의강의 썸네일

            입문자를 위한 반응형 웹 기초 강의

            유노코딩

            다양한 기기와 화면에서 서비스를 제공할 수 있는 '반응형 웹사이트'를 만들기 위해 필요한 기본적인 스킬을 확실하게 익힐 수 있는 강의입니다.

            초급

            초급

            반응형 웹, HTML/CSS, JavaScript

            쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수강의 썸네일

            쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수

            LIZ.B

            쉽게 만드는 반응형 웹 실무 포트폴리오! #설화수 포트폴리오

            초급

            초급

            HTML/CSS, 반응형 웹, 클론코딩

            순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일

            순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

            영코디 킴쌤

            부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

            초급

            초급

            HTML/CSS, 반응형 웹, 인터랙티브 웹

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기강의 썸네일

            부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기

            유용한IT학습

            디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의입니다.

            초급

            초급

            Bootstrap, 반응형 웹

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

            부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

            영코디 킴쌤

            디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

            초급

            초급

            Bootstrap, 반응형 웹, 웹 디자인

            Tailwind CSS로 만드는 멋진 웹 UI 스타일링강의 썸네일

            Tailwind CSS로 만드는 멋진 웹 UI 스타일링

            코딩웍스(Coding Works)

            [Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

            초급

            초급

            TailwindCSS, 반응형 웹, HTML/CSS

            UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오강의 썸네일

            UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

            LIZ.B

            기획-디자인-구현 프로세스의 세번째 과정 - 반응형 웹 포트폴리오 템플릿 제작

            초급

            초급

            반응형 웹, JavaScript, jQuery

            무료