Publishing

  • 일차
  • 내용
  • 언어
  • 20
  • 포토샵 : 도형사용, 펜툴연습, 펜툴로 그림그리기
  • 2023.07.21
  • 20
  • 코딩 : flex를 이용하여 레이아웃 표현 [예제 - CJ프레시웨이] [예제 - sk매직몰]
  • 2023.07.21
  • 19
  • 코딩 : flex에 대해 설명, flex-direction, align-content, justify-content, align-item, flex-wrap, [예제 - 독서IN]
  • 2023.07.20
  • 18
  • 능력단위평가 : 능단평가 진행
  • 2023.07.18
  • 17
  • 깃허브 : 깃허브 가입, 파일 업로드 방법 설명
  • 2023.07.18
  • 16
  • 리디자인 + 코딩 : 코딩진행(HTML, CSS)
  • 2023.07.17
  • 15
  • 리디자인 + 코딩 : 코딩진행(HTML, CSS)
  • 2023.07.14
  • 14
  • 리디자인 : 아이디어스케치 진행 + 피그마 활용하여 제작(와이어프레임설계 후 컬러, 이미지 적용) - 실습
  • 2023.07.13
  • 13
  • 리디자인 : 레퍼런시 시작(경쟁사, 디자인표현, 여백, 폰트크기등) + 아이디어스케치(핸드스케치) - 실습
  • 2023.07.12
  • 13
  • 코딩 : 2차메뉴 작성방법 / 웹폰트 변환(transfonter) + 다폰트/ position:sticky(스티키) / 테두리
  • 2023.07.12
  • 12
  • 리디자인 : 리디자인 시작, 사이트 선정 후 메뉴구조 정리(눈에 보이는 메뉴와 보이지 않은 모든메뉴, 패밀리사이트, sns 등) - 실습
  • 2023.07.11
  • 12
  • 코딩 : 웹사이트 기본구조(header, main, footer) / 2차메뉴 작성방법 2가지(뒤 배경 추가)
  • 2023.07.11
  • 00 jQuery
  • 좌우 자동 슬라이드
  • jquery insertAfter() animate()

  • 바닐라 자바스크립트를 이용하여 클래스명을 추가/삭제할 수 있다.

  • 00 Vanilla JS
  • 클래스명 추가/삭제
  • Vanilla Javascript classList.add() classList.remove()

  • 바닐라 자바스크립트를 이용하여 클래스명을 추가/삭제할 수 있다.

  • 00 jQuery
  • 클래스명 추가/삭제
  • jQuery addClass() removeClass()

  • 제이쿼리를 이용하여 클래스명을 추가/삭제할 수 있다.

  • 00 jQuery
  • img, 텍스트값 적용
  • jQuery img태그 attr( )

  • 마우스올린 요소의 값을 불러올 수 있다.

    마우스올린 이미지값을 불러오거나, 텍스트값을 불러올 수 있다.

  • 00 jQuery
  • 이미지/배경이미지 변경
  • jQuery background-image eq() $(this).index()

  • 마우스올린 순서에 따라 이미지를 변경할 수 있다.

    css에서 background-image를 변경할 수 있다.

  • 00 jQuery
  • resize
  • 반응형 해상도 script jQuery

  • 화면 해상도에 따라 스크립트코드를 변화시켜줄 수 있다.

    if문 또는 window.resize를 사용할 수 있다.

  • 03 HTML/CSS
  • 시간, 속도
  • 기본형 스타일 html css transition

  • 부드럽게 구현할 수 있다.

    실행시간, 지연시간, 속도 등을 조절할 수 있고, 특정 속성에게 transition을 구현시켜줄 수 있다.

  • 03 HTML/CSS
  • 이동, 회전, 크기, 기울기
  • 기본형 스타일 html css transform

  • 요소를 변형시켜줄 수 있다.

    요소의 크기에 따라 위치이동, 회전, 축소/확대, 기울기들을 이용하여 변형 및 동적인 스타일을 구현할 수 있다.

  • 03 HTML/CSS
  • 텍스트 스타일
  • 기본형 스타일 html css

  • 글자크기, 색상, 형태 등 텍스트에게 스타일을 적용시켜줄 수 있다.

  • 02 HTML/CSS
  • a태그 링크걸기
  • 기본형 태그 html css

  • html에서 해상 정보에 링크를 걸 수 있다. 링크는 내부에서에서 이동하거나 외부페이지로 이동 가능하다.

    연락처를 연결하거나 메일전송을 위한 목적으로도 사용된다.

  • 02 HTML/CSS
  • img태그
  • 기본형 태그 html css

  • html에서 img태그를 사용하여 이미지를 연결하고, 스타일을 작성할 수 있다.

    이미지위에 텍스트 배치방법을 살펴볼 수 있다.

  • 01
  • HTML/CSS : 태그 살펴보기
  • HTML