패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

할로윈 반응형 클론코딩(HTML,SCSS,Javascript)

HTML, CSS, SCSS, Javascript 를 활용하여 넷플릭스의 반응형 웹페이지를 만들어 보는 클론코딩입니다.

클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
자바스크립트, CSS, HTML, 클론코딩, DOM
수료증
발급 가능
소요 시간
약 3시간 30분
추천 학습대상
- Sass(SCSS)를 사용할 줄은 알지만, 활용을 해보고 싶으신 분, SCSS 코딩법을 배우고 싶으신 분

"할로윈 클론코딩" 강의는 HTML, CSS, Sass(SCSS)를 익히신 후 다양한 사이트를 만들어보는 실습 강좌입니다.

실전으로 코딩 SkillUp! 을 하고싶으신 분들을 위해 준비 했어요.


Sass를 설치할줄 모르거나 개념을 모르시면 듣기 어려우 실 수 있습니다.

그런 분들은 Sass 설치 후 사용하기 정도만이라도 듣고 오시면 좋습니다.

HTML, CSS는 기본으로 하실줄 안다는 가정하에  시작합니다. 


한번으로 완강하는게 아니라 반복하는게 코딩 스킬업에는 필수랍니다.

반복하여서 조금씩 내용을 바꾸어서 학습해 보세요~!





안녕하세요.

강의자 코딩고스트입니다. 



기본적으로 CSS에 대한 이해가 있고, 사용하실 줄 아는 분께서

이 강의를 들으시면 좋습니다. 많은 프레임워크나 라이브러리도 요즘 일반 CSS보다

Sass(Scss)를 많이 사용하고 있습니다.


VS code에서 익스텐션을 설치하여 관리할 수 도 있으나,

터미널을 사용하여 직접 지정하는 방식으로 수업합니다.


또한 Sass(Scss)에서 @import 구문보다 @use 사용을 권유하고 있는데요,

본 강의는 @import구문을 사용하고 있습니다. 현재 실무에서도 @import구문을 많이 사용하고 있어요.



이후 Sass(Scss)강의에서는 @use를 사용하는 방법으로 강의가 나올 예정입니다.

@import사용법과 @use 사용법을 둘다 알아두시면 좋을 듯 합니다.


 본 예제를 통해 Sass(Scss)의 활용 및 사용방법등을

익히시는데 도움이 되었으면 합니다~!!


감사합니다!


[완성페이지 보기]

교육 과정
모두 펼치기
  • 01
    클론코딩 시작하기
    • EP01 - 폴더구조생성 및 준비
    EP02 - Netflix 사이트구조 파악하기(Breakpoint,rem..등)
  • 02
    HTML 마크업 하기
    • EP03 - Markup 하기(Header, section, article까지)
    EP04 - footer 까지 끝내기, Web developer 설치하기
  • 03
    SCSS 시작하기
    • EP05 - Scss 파일생성, 변수만들고 연결하기, map-get 사용하기
    EP06 - scss 파일 분리 및 연결, 파일하나씩 만들어보기
    EP07 - 예제에 필요한 이미지를 다운받아 일러스트에서 svg,png로 저장하는 방법
    EP08 - Scss변수설정(font,form,breakpoint 등)
    EP09 - :before로 배경이미지 넣기
    EP10 - Sass @function 함수만들어서 rem자동계산하기
    EP11 - %placeholder, @extend, @mixin 만들어보기
    EP12 - flex를 모듈화 시켜 관리하기
    EP13 - button,input,select 한번에 모듈화하는 mixin 만들기
    EP14 - 이메일가입부분 완성하기, font mixin만들기
    EP15 - 팝콘영역 완성하기, after 로 svg넣기
    EP16 - 서비스리스트 만들기, flex-grow, row-reverse
    EP17 - URL encoder 이용해서 svg 넣어보기
    EP18 - 마지막강의. 화이팅!
마지막 업데이트|2025년 02월 24일
강의자 소개
Coding-Ghost캡틴
안녕하세요. 저는 프로덕트 디자인과 코딩을 같이 하고 있는 1인 기업 프리랜서 입니다. 수많은 웹서비스와 하이브리드 앱, 네이티브 앱을 기획부터 런칭까지 하였습니다. 몇년전 제주에 와서 터를 잡으며, 그동안 쉼없이 달려온 저에게 잠시 쉼을 주고, 그동안 온/오프라인으로 강의했던 것들과 쌓아온 지식들을 하나하나 발자취를 남기고 있습니다. 강의를 만들면서, 천천히.. 쉬웠으면 좋겠다. '아, 이거 할만하네?'라는 생각이 들게 하는 것을 항상 잊지않으려고 합니다. 또한, 예제를 만들어보면서 성취감을 느껴보게 하는 것 또한 저의 계획의 일부입니다 ^^:: 우리 오늘도 한줄 더 코딩하고 잠자리에 듭시다. 여러분, 응원합니다~! 2025 나혼자 하는 코딩독학서, '코딩-레벨-업' 저자 유튜브 '코딩고스트'와 프리랜서 인스타툰 '이랑이'를 운영하고 있습니다.(하단 링크 참조)
강좌 후기
무료
평균평점
3.0
난이도
보통
수강기간
평생 무제한
소요 시간
약 3시간 30분