중급 과정
HTML+CSS+JQUERY 중급 실력 만들기

CSS 중급 필수 이론 및 실전 활용

CSS 중급 필수 이론

  1. CSS 변형 & 애니메이션

    - transform: translate, transform: scale
    - transform: rotate, transform: origin, transform: skew
    - 애니메이션 속성, 키프레임 만들기

  2. CSS 가상 클래스

    - 마우스 오버 가상클래스 :hover
    - 순서에서 가장 처음에 나오는 요소를 선택하는 :first-child, 마지막 요소를 선택하는 :last-child
    - 순서를 체크하는 가상클래스 :nth-child, 순서와 태그 종류를 체크하는 가상클래스 :nth-of-type
    - 폼 요소 input을 클릭했을 때 :focus, 폼 요소 input에 넣는 텍스트 ::placeholder

  3. CSS 고급 선택자 활용

    - 속성선택자, 인접 선택자, 형제 선택자
    - 폼 요소 checkbox와 radio를 클릭했을 때 가상클래스 :checked
    - 가상클래스 :before :after :is

  4. CSS3 속성

    - object-fit, filter, clip-path, background blending mode

CSS 중급 실전 이론 & 팁(Tip)

  1. 가변영역 고정영역 함께 사용하는 레이아웃 - calc() 연산 함수
  2. 인라인 블록(inline-block)에 생기는 마진 없애기
  3. img 태그에 생기는 마진 없애기
  4. 인접한 인라인블록(inline-block) 요소끼리 수직중앙 맞추기
  5. body와 div의 높이를 100%로 가득 채우기
  6. 인라인요소와 블록요소 수평 중앙 정렬
  7. 부모요소 기준으로 HTML 요소 수평 수직 중앙 정렬

FLEX 핵심이론 및 활용

  1. 부모요소에 쓰는 속성

    - display: flex
    - justify-content
    - align-items
    - flex-direction
    - flex-wrap
    - align-content

  2. 자식요소에 쓰는 속성

    - flex-grow
    - flex-shrink
    - flex-basis
    - flex- order
    - align-self
    - 자식요소 사용하는 마진(margin) 속성

  3. Flex 적용 예제

    - 레이아웃(1) : 수직중앙 수평중앙 중첩해서 사용하기
    - 레이아웃(2) - 부모자식으로 중첩된 div를 가로 배치하기
    - 레이아웃(3) – 상단 네비게이션 만들기
    - 레이아웃(4) – 시멘틱 태그 반응형 레이아웃

JQUERY 핵심이론 및 활용

  1. 제이쿼리(JQUERY)와 자바스크립트(JavaScript)에 대한 이해
  2. 제이쿼리 링크방식
  3. 제이쿼리 선언하기
  4. 제이쿼리 기본구문 만들기
  5. 제이쿼리 함수
  6. 제이쿼리 메서드(보이기/감추기), 메서드(페이드 효과), 메서드(클래스 제어)
  7. 제이쿼리 마우스 이벤트
  8. 제이쿼리 속성 조작 메서드
  9. 제이쿼리 위치 탐색 선택자
  10. 제이쿼리 속성 탐색 선택자

JQUERY 필수 플러그인 활용

  1. 이미지 & 콘텐츠 슬라이더, 슬릭 슬라이더(slick.js)
  2. 풀스크린 모달, 페더라이트(featherlight.js)
  3. 스크롤 리빌 애니메이션(Scroll Reveal Animation), 와우(Wow.js) & AOS.js

퍼블리싱 포트폴리오 결과물

  1. CSS+FLEX 실전 퍼블리싱 제작(10개)
  2. 반응형 웹사이트 퍼블리싱 제작(2개 : 기존방식, Flex)