1.0 Meta-Tony-Test Project
1.“메타 토니 테스트” 프로젝트 정리
과정 기간: 3년 2022.02 ~ 2025.01 웹 퍼블리싱 학원 수강 6개월 (2022.03 ~ 2024.9) JS, React 학원 수강 2개월 (2024.09 ~ 2024.11) 방통대 컴퓨터과학과 1, 2 학년 수료(2023.02 ~ 2024.12) QA 업무 1년 6개월 (2023.05 ~ 2025.01) 회고 형상관리를 의미하는 1.0과 ...
2.001 day- Git 기본 사용법과 브라켓 연동
간단하게 포트폴리오를 올리기 위해서 순서를 정리하자면, 깃 설치 깃허브 회원가입 및 New repository 만들기 git bash(terminal) 기본설정 브라켓 깃허브 터미널 등록 깃허브 동기화(pull)하기 로 크게 5단계를 적용하면 포트폴리오를 깃허브에 올릴
3.002day - 웹카피 KB카드
제이쿼리 숙달은 위한 첫 웹 카피
4.003day- KB카드 헤드메뉴 노란띠
알고리즘 by. 강사님 > a hover 배경의 왼쪽 좌표 구함 앵커의 너비 구함 관련서브메뉴 보여짐 관련서브메뉴의 높이값을 구해서 헤더의 높이를 지정 > 배경이 양쪽으로 작아짐 → width값이 주는 동시에 줄어드는 방향으로 이동 문제점 (헤드 애니메이션)
5.004day - KB카드 카피
제이쿼리 연습을 위한 카피 프로젝트 001
6.003day - KB카드 (헤드 메뉴 및 스크롤 사용)
stiker는 스크롤이 내려가기 전까지는 position:relative 라서 콘텐츠가 자꾸 내려감모달창을 위한 검정 배경이 헤드의 자식요소라 mouseleave의 효과가 제대로 작동 안하고 index 수치도 부모값으로 인해 조절이 불가함.디테일 영역 애니메이션 효과.
7.005day - KB카피
제이쿼리 연습을 위한 카피 프로젝트 001
8.006day - KB카피
금일 CSS반응형만 있었고 제이쿼리는 .click .css()효과만 있었습니다.모바일 박스 디자인이 동일하여 다음부턴 같은 디자인의 형식은 클라스로 사용하여 코드를 간결하게 사용합니다.모바일 슬라이드 배너의 제이쿼리 작업을 진행하지 못하였습니다.
9.008day - KB카드 카피
0719mob2.jpg하단 패밀리사이트 이동바 a로 기존 구성되어 동일하게 진행하였습니다.셀렉트 박스 클릭시 링크 이동시 value로 링크 추가하면 됩니다.<option value=”사이트주소”> 사이트명 </option>클릭 효과 놓친거 추가 필요 (소비자
10.009day - KB카드 카피
1. 타겟 💡 금일 타겟 → 모바일 사이트 마무리 2. 과정 슬라이드 .clone() .appendTo 진행시 제이쿼리 슬라이드 효과 적용안됨 id값 중복이라 효과 적용이 안되었습니다. 클론을 사용하지않고 .insertAfter() 로 위치만 변경되도록
11.010day - KB 카피
스크롤시 헤드 움직임 구현 완료, 헤드 li 클릭시 윈도우 스크롤 이동 필요
12.011day - KB카드 카피
검색 메뉴, 카테고리 메뉴 추가
13.012day - KB 카피 카드
KB카드 카피 메인 pc, mobile 완료
14.001day) Copy 영동군청
사이트 카피 영동군청 시작
15.002day) Copy 영동군청
반응형 스크립트, git, copy web
16.포트폴리오) git 사용기 명령어 remote
git clone을 하면 자동으로 git remote 가 다운주소로 연결되는걸까? GitHub에서 저장소를 클론하면 origin remote에 GitHub 저장소 주소가 저장됩니다. 저장된 값은 어디에 있을까? → origin remote 의 값이 변경된다.
17.5~6day - 이력서, 영동군청 카피
1. 타겟 💡 금일 타겟 → 헤드 스크립트와 모바일, 섹션 1 PC 2. 과정 08/01 이력서 제작 after, before의 경우 제이쿼리 적용시 DOM에 속해있지 않아 다른 방법을 써야합니다. 헤드 블루 파티클 제작시 before를 지정하는 대신에
18.7day - 영동군청 카피
Photo by Nathan Anderson on Unsplash 1. 타겟 💡 금일 타겟 → 헤드 반응형, PC 섹션1 HTML, CSS 2. 과정 반응형 스타일이 사이즈가 줄어들 수록 효과가 사라지는 특징을 보이므로 반응형 스타일을 노트북 → 태블릿
19.8day - 영동군청 카피
알파 슬라이드 클릭 이벤트 stop(), finish() 적용
20.9day - copy project -YD
Photo by photo_ reflect on Unsplash 1. 타겟 💡 금일 타겟 → 섹션1 마무리 , 섹션2 CSS 마크업과 반응형 2. 과정 setInterval() 문법 → 따옴표 써야함 setInterval("go()",3000); 파티클 움직
21.01day)웹퍼블리셔 포트폴리오 일지
개인 포트폴리오 사이즈 진행 일지
22.2day)웹퍼블리셔 포트폴리오 일지
.
23.3day)웹퍼블리셔 포트폴리오 일지
photoshop and planning for portfolio
24.4-6day)웹퍼블리셔 포트폴리오 일지
디자인 이력서 깃 호스팅 진행과 일지
25.7day)디자인 이력서 일지
디자인 이력서 진행 중
26.8~10day_personal-branding_220818~
8~10day - Detail page Done
27.10~11day - 영동군청 카피
10~11day - 영동군청 카피 일지
28.12~13day - 영동군청 카피
웹 카피 일지
29.2-1) CSS display: inline, block, inline-block
기본적인 display 속성 값(property-value)
30.크로스 브라우징을 위한 핵테그(hack tag)와 CSS접두어(Vendor Prefix)
크로스 브라우징을 위한 핵테그(hack tag)와 CSS접두어(Vendor Prefix)
31.1-1 Brakets 설치 및 플러그인(code editor plug-in IDE)
코드 에디터 브라켓 그리고 플러그인
32.Viewport, Media Query
미디어쿼리 사용
33.jQuery 반응형
jQuery 반응형 많이 쓰이는 형태이나 중간에 pc형 창을 줄일 때는 적용되지 않는다. 변수값을 계속 계산하게 코드를 구성하면 중간에 사이즈 변화에 맞춰 적용된다.
34.001 - 반응형 스터디
float에 after 주는 이유, after {content:””; clear:both; display: block}display:flex 적용시 중요한 점. 가로 세로 정렬시 사용하는 속성.자식 요소 투명해질 때 해결법과 html 구조 변경. 자식도 투명될 때 해결
35.002 - 제이쿼리 스터디 (수협은행)
제이쿼리 스터디
36.007day - KB카드 카피
모바일 슬라이드모바일 햄버거 메뉴 스크롤에 따라 상단 태크 움직이게 만들기메인 슬라이드 좌표 네비 클릭시 이동 효과 추가css flex & order를 이용한 태그 순서 변경 진행하였으나, 테이블 요소에는 적용이 되지 않았습니다.테이블을 사용하면 반응형에서 형태가 변할
37.1-2 마크업 언어 기본설명(HTML, CSS, Javascript)
웹 개발에 필요한 프로그래밍 언어
38.1-3) HTML 필수 구조의 요소들
HTML 문서 만들기 위한 기본 구조
39.1-3) HTML 문법
HTML 문법, 구조 (요소구조, 빈요소, 주석, 전역속성)
40.1-3) HTML 시멘틱 요소(Semantic Elements; 의미요소)
웹표준과 웹접근성을 위한 시멘틱구조
41.1-4)CSS 문법
CSS와 첫 만남.
42.1-4) CSS 적용방법 Style Sheet
CSS를 적용하는 방법 3가지
43.2-2)CSS display 속성 flex, grid
display: flex, grid
44.jQuery 반응형 적용(새로고침)
jQuery 반응형 - resize 새로고침
45.favicon 파비콘
브라우저 아이콘; 파비콘 사용
46.opengraph 오픈그래프
오픈 그래프트의 사용
47.jQuery, script 외부스크립트, 헤드 스크립트 작성(.ready() 와.onload())
jQuery, script 외부스크립트, 헤드 스크립트 작성(.ready() 와.onload())
48.3~4day - 영동군청 카피
1. 타겟 Photo by Juliane Liebermann on Unsplash 💡 금일 타겟 → 헤드~섹션1 2. 과정 터미널 테마 설치 (07/28) 헤드 디테일 메뉴 작성시 float: left 사용시 부모의 너비가 미리 정해지지 않는 이상 자식 요쇼들이
49. 브라우저 CSS 스타일 초기화
크로스 브라우징을 위한 전체선택자와 스타일 초기화 코드(에릭마이어, 노멀라이즈)
50.3-1) 요소호출 class와 id
요소 호출을 위한 속성 class와 id
51.3-2) 스타일 우선순위(Style Precedence)
스타일 우선순위와 특정도 점수
52.3-3) 박스모델링, CSS 속성에 따른 적용 범위
What is Box Modeling in mark up?
53.4-1) HTML heading elements
HTML heading elements
54.모바일 스크롤 시 새로 고침 해결
jQuery 스크롤 새로 고침 발생 해결 (It scroll refresh issue when you use "jQuery resize onload" )
55.jQuery 날짜 메소드 (주간 달력 만들기; date method)
jQuery 날짜 정보 가져오기
56.웹 리더기의 접근성을 고려한 마크업 - 1st
웹 리더기 사용을 고려한 마크업