작업일지

시작시간: 10am작업내용: 벨로그 글 첫 작성✔️HTML+CSS 실전 퍼블리싱 제작 with JQUERY 듣기 / 예전에 공책에 필기해놨던 것들이 굴러다녀서 복습 차원에서 정리하고자 한다...!

영상을 보며 포트폴리오 기획 문서의 중요성에 대해 다시 깨닫는 계기가 되었다!

🔥오늘의 일정 및 목표 - 후니프린팅 와이어프레임 러프

메인 와이어프레임 완성

후니프린팅 ppt 만들기

오늘의 목표🔥후니프린팅 와이어프레임 완성

잊고 있던 포토샵 그리드 허겁지겁 다시 복습함 ^_ㅜ그리고 결과물!!

내비게이션 포토샵 시안 작업 했고, 포토샵 시안은 반복되는 서브 페이지 작업만 남았다!!

두별 선생님 만나서 이것저것 물어보고 도움받기(너무 감사 합니다) html 구조잡기 윗 두별님~!!

소다 개인웹사이트 관련 회의 및 자료조사

면접과 취업을 부르는 개인 포트폴리오 홈페이지~ 강의 25퍼센트 듣기 / 어제 손으로 그린 오리를 일러스트레이터로 다시 그려보았어요. 귀엽죠? 빨리 귀엽다고 해

면접과 취업을 부르는 포트폴리오~ 강의 듣기 잘못된 코딩습관에 관한 강의를 어제에 이어서 들었다.

슬릭 슬라이더 어떻게 커스텀해서 사용하는지 실습했다!

면접과 취업을 부르는~ 강의 80퍼센트까지 듣기

h+c+j 실전퍼블리싱 강의 듣기 시작!!!

h+c+j 퍼블리싱 강의 듣기~~~

어제 이어서 쭉쭉 기초 개념들 계속 다시 복습중이다!!! 너무 많은 것들을 잊어먹긴 했지만^_ㅜ 그래도 다시 보는 거라고 복습 진도 자체는 쭉쭉 나가고 있고, 이대로라면 내일 개념 복습 끝내고 실전퍼블리싱 파트 1 실습 들어갈수있다.

매일매일 스터디 카페에서 혼자 열심히 하고있다...🔥❤️🔥h+c+j 실전퍼블리싱~ 강의 듣기 (제이쿼리 파트, 실전퍼블리싱 파트)

hover와 animation 을 이용해서 이것저것 많이 했는데 벨로그는 동영상이 안올라가지는구나ㅠㅠ~~.... 열심히 예쁘게 만들었는데 아쉽다

어제+오늘 공부하고 만든거 움짤 만들기 성공이다~~!!! https://brunch.co.kr/@eastgo/451 이 글을 참고해서 https://ezgif.com/video-to-gif 여기서 쉽게 만들었다!!

h+c+j 실전퍼블리싱 강의 듣기 / - z-index가 같다는 기준에서, position: absolute보다 position: relative가 우선함. 등등...

before/after를 쓸 수 없는 html 태그는 폼 요소,(input, form, button)폰트어썸도, 이미지도 before, after를 가질 수 없어서 폰트어썸을 사용할 수 없다.

도로롱 도로롱 귀여운 내 바이크를 css로 굴러가게 만들었다(얘는 진짜로 제 바이크입니다 귀엽죠!) / 작업일지를 써 놓으니 확실히 어떤 예제들을 어떤 것을 사용해서 만들었고, 어떤 부분을 어려워했는지 확실하게 다시 짚어보기가 좋다.

기본적인 드롭다운 메뉴를 혼자서 만들려니 못 만들겠어서 너무 충격먹었다.......... 하루 넘겨 끙끙대다 다시 강의 봤더니 html 구조조차 다르게 썼다... ul, li로 만들고 있었으니 완전히..(이하 생략

오전- 강의 복습 / 오후- 강의 진도 나가기로 하루 일정을 나눴다~!! / `input의 id` 와 `label의 for`를 연결해서 만든 탭 메뉴 콘텐츠 완성!

탭 메뉴/탭 슬라이더 예제 실습 및 응용

너 왜 이렇게 움직이냐고😂😂😂😂😂왜 이렇게 움직이냐면 css를 이렇게 줘서 그렇습니다. (고쳤습니다.)

중요!!! transform 이라는 속성은, 위의 이미지처럼 개별적으로 사용할 경우뒤에 있는 것이 앞에 있는 것을 덮어써버린다. / before&after 집중 공부!

nth-child 이론 부분 다시 명확하게 할 필요가 있어보임!! .content에 그라데이션을 적용하고 싶으면, 전자가 아니라 후자처럼 작성해야 한다.왜냐면 .card 안에 .content는 하나밖에 없기 때문이다.

html은 생각보다 간단하지만, 각각 어떤 값들인지 짚고 넘어가도록 하자. 폼 요소를 다룰 때 거의 필수적인, 속성선택자를 이해하는 시간이 될 것!

이런 식으로 인라인 스타일을 써서 만들 수 있다는 건 알겠는데, 작동 원리는 잘 이해가 안 돼서 방법이 손에 익질 않는다 ㅠ.ㅠ그래도 처음 만들 때는 그냥 멋모르고 강의만 그대로 따라한 느낌이었다면, ...

오늘은 css가 아닌 어제 했던 자바스크립트 복습이다! if문의 기본 구조는if() {} 이다.if (소괄호 안에 있는 조건을 실행)하면 {중괄호 안에 있는 것을 실행}함.

왜작동을안하니 왜(왜 안되는지 찾았습니다)

혼자서 한 후기: 뭔가를 알긴 아는데 제대로 하진 못하는 상태가 계속되고 있습니다. 저렇게 한 사유: 주문처럼 외우고 있는...

positon: absolute는 꼭 필요할 때만 쓰는 것(남발x),쓰지 않아도 된다면 안 쓰는 것이 좋다!위의 걸 만드는 데 position 대신에 float를 사용해서 더 간단하게 만들 수 있다.

탭 메뉴 콘텐츠 만들기 복습!!!

>>> 이론은 어느 정도 알지만 뭔가 만들려고 할 때 자신 있게 퍼블리싱이 안될 때가 자주 있습니다. ...그래서 결제함.(...)

뱅글뱅글 돌아가는 복습과 이론강의와...

될 때까지 하는 복습과 정신없이 나가는 이론진도

~ display 속성의 모든 것 / css 가상클래스의 모든 것 ~

실수하기 쉬운 부분인데... 캡처 상에 있는 것처럼.item a:nth-child(1) 이 아니라,.item:nth-child(1) a 여야 한다. (하나의 계층 내에서).item 안에 a는 하나밖에 없고...

난관을 겪게 되는 부분의 해결방법..btn에 배경색이 없으면 상관없지만,배경색이 있게 되면 z-index: -1때문에 글씨가 가려지는 일이 생긴다.해결방법은 ~~~

ol로 만들 수는 있지만, ol은 디자인을 못하기 때문에 before/after 에 사용한다.

css 변수 사용법/사용예시 + 탭메뉴콘텐츠 복습

vidio 백그라운드 랜딩페이지 with jquery

로그인 화면 UI 디자인 / css에서 변수var() 사용하기

제이쿼리 실전예제- if조건문을 이용한 스크롤 후 헤더 디자인 변경

웹 퍼블리셔를 위한 크롬 확장 프로그램 추천 / em, rem단위 이해하기

제이쿼리 반응형 애니메이션 모달

h+c+j 실전퍼블리싱 강의 진도 및 복습오늘 한 일은 무엇인가요?중요한 것/기억해야 하는 것은 무엇인가요?

공주 컨디션 살짝 회복^_^~....... / 전체 레이아웃을 제어하는 플러그인 사용법 및 사용자 설정

전체 레이아웃 와이어프레임 퍼블리싱 pc.ver

자가격리된채로 공부를 하는 나의 모습........... / 반응형 웹사이트 포트폴리오 진도

애써 괜찮은 척 하는 나의 모습....농담입니다 진짜 괜찮습니다 목이 조금 간질간질한거 빼면 완전 멀쩡~ / contact, plan section 작업함

자가격리 마지막 날과 맞이하는 생일입니다~~~ / 모바일 전체 레이아웃&내비게이션 퍼블리싱

모바일버전 오류 고치기(ㅠㅠ

넷플릭스 클론코딩(1)

약 10일간의 자가격리를 성실하게 끝내고 스터디카페 컴백. 동거인의 pcr 검사도 음성으로 떴으니 완전 안심~~ / 넷플릭스 클론코딩(완성!)

Feather light 사용방법 / 웹 호스팅 하는 방법 / 31일까지 간단하게라도 포트폴리오 웹사이트를 만들어야 한다...!

31일까지 제출할 포트폴리오 웹사이트 만들기!!!!!!!

모바일 버전까지 완!!!!! 하루만에 만든거라지만 사실상... 만드는데 한 달 걸린거나 마찬가지다...왜냐면 그 한달동안 공부한게 총동원 됐으니까....특히 넷플릭스 반응형 공부했던게 모바일버전 만드는데 큰 도움이 됐다🥹🥹🥹

전체적인 계획 수정하기~~~!

네이버 반응형 회원가입 폼 !

풀 스크린 내비게이션 반응형 포트폴리오 with jQuery

헤더 드롭다운 애니메이션

제이쿼리 반응형 애니메이션 모달

포트폴리오 CSS Grid 반응형 레이아웃

푸터 패밀리 사이트 셀렉트 커스텀 스타일

제이쿼리&자바스크립트 검색창 확장하기

넷플릭스 faq with jquery

유효성 체크 애니메이션(1)

네이버 로그인 폼(1)

네이버 로그인 폼(2)

제이쿼리 & 자바스크립트 검색창 확장하기(2)

그래도 예전보다는 실력/경험이 늘었다고 생각하는 것이, 예전엔 뭔가 안 되면 고치질 못했다.... 강의를 따라 듣는 것조차 어쩌다 뭔가를 잘못 입력했으면 그걸 고치질 못해서 강의 진도를 못 나갔음 ㅠㅠ 하지만 이제는 어떻게 해서라도 고칠 수 있어...!

안 됐던거 혼자서 고쳐가지고 지금 좀 우쭐해진 상태임 / 그리고 이번에는 .gnb a:hover:after 와 .gnb a:after:hover 를 헷갈리지 않았다!!! / 영어 문법과 같다고 생각하니 헷갈리지 않더라구..

사람이 살다보면 딴짓이 하고싶을수도 있고 사람이 살다보면 자기가 만든 스티커를 가지고 싶을 때가 있는 법이다

제이쿼리 페이드 인/아웃 모달

풀스크린 네비게이션 반응형 포트폴리오(1)

취준을 한 지 대략 3개월째 되는 날의 월요일이다.(퇴직금보다 실업급여가 먼저 들어온 날이기도 하다..^^)

바닐라 자바스크립트 CSS 애니메이션 모달

target 가상 클래스를 사용하여 모달 만들기

텍스트 그라데이션

밀리의 서재 어코디언 실전 예제 만들기

플렉스 핵심이론 (1)

justify-content 설명

flex-direction / flex-wrap / align-content

`flex-grow`, `flex-shrink`, `flex-basis`

flex / order / align-self

flex 응용 예제

플렉스 시멘틱 레이아웃(반응형)

네스티드 레이아웃 / 스크롤 없는 높이 100% 레이아웃

반응형 헤더영역(로고, 검색, 네비게이션) / 플렉스 레이아웃 설계

플렉스 그리드 + 레이아웃 설계(2)

플렉스 레이아웃 설계(4)

홀리 그레일 레이아웃

card ui와 `justify-content`에 대한 이해

자식요소 패딩 마진 조절하기

이번주는 몸풀기 주임~!!!

h+c+j 실전퍼블리싱2 강의 진도 및 복습몸풀기로 내비게이션 만들기를 했다만...

css 드롭다운 애니메이션(css방식, jquery 방식)

h+c+j 실전퍼블리싱2 강의 진도 및 복습이 셀과 셀 사이의 간격(셀 스페이싱)을 없애는 방법>테이블 태그에서, border-collapse: collpse;를 주면 됨

스마트 아이템 쇼핑몰 UI 디자인) like를 click 하면, 그 어떤 .like click 하더라도(=this).active 클래스를 toggleClass 한다. (저 하트 작업하는거임)

position: absolute 나 position: fixed를 주게 되면 inline-block요소로 변하기 때문에,꼭 너비(w100%)를 줘야 한다~!! ❗️❗️❗️ 단축키 alt+W 하면 어떤 코드를 감쌀 수 있다!

vertical-align: middle 이란 속성은inline-block 요소에만 사용할 수 있다.~ common section 부분

크롬 다운로드 사이트 - 푸터 / 카피라이트 부분

이 부분!!!! 반응형으로 바꿀 때 상당히상당히 중요!!!!!! `trasform`부분 말인데..

- 어제 안되던거 고쳤다 - 오 어떻게요 - 통째로 다시 쳤어요 - ...

반응형 웹사이트 포트폴리오 고장난거 못고치고 결국 싹 새로 하기................

햄버거 버튼이 안 보여서 지금 여기서 막혀있음.........

와자뵤 어제 안되던거 고쳤다!!!!!!!!!!!!!못 찾던 이유가 있었음... 당연함.... responsive.css가 잘못된 게 아니라 style.css가 잘못된건데 responsive.css를 수정하고 있었으니 당연 못찾지......

🔥 오늘의 목표 [x] 반응형 웹사이트 포트폴리오 📝 노트필기 및 정리 - 진도 1. 모바일 네비게이션 퍼블리싱 모바일에서 브라우저를 움직이는 것은 window다.. 클릭하고 자시고 할 것이 없으니까. # 이라는 것은, 현재 문서의 제일 위(상단)라는

어워드 섹션 작업

높이값 안줘놓고 왜 백그라운드 안먹냐고 고통스러워 하고 있었음...

> -폼 요소에서 click이란 곧 focus란 가상 클래스를 사용하는 것이다. -모든 폼 요소는 before/after를 가질 수 없지만, button은 가능! -!!! float 해줘도 왜 작동이 안될까??? <높이값을 안 줬을 것이다

슬릭 슬라이더 사용/커스텀 방법

프로젝트 섹션 + 사용자 정의 속성

오늘은 대부분 애니메이션 작업!

어서 리뉴얼할수있기를..!

메인페이지 섹션 모바일로 변환하기 / 모바일 레이아웃 변환 작업을 위한 CSS 퍼블리싱 필수 핵심 이론

메인페이지 모든 섹션 모바일로 변환하기(완성)

퍼블리셔 이력서 작성 가이드 / 면접준비

넷플릭스 클론코딩 복습 / faq 제외한 위의 섹션들

출근(무려 첫출근!) 키워드 : 데이터바인딩/깃허브/인텔리J/포스트맨/ 에이잭스/제이슨/JSP/API/타임리프/플루터

colgroup / tbody / 네이버 로그인 폼 복습

postman / mysql / yaml / 데이터 바인딩

컨트롤러를 먼저 매핑하고(주소, 경로 바꿔주기) 리턴해서 올 html파일 만들어주기, 헤더/푸터 빼고 퍼블리싱 된 html 복붙해주기헤더 안의 경로도 바꿔주기(. 있는지 없는지같은거 잘 확인하기)인덱스 경로도 바꿔주기

pagination

검색되게 하기) 포스트맨에서 결과값을 먼저 확인함.쿼리 파라미터를 확인함.에이잭스를 function으로 한번 감싸준다.ex) function getChurch()2가 호출 될 수 있도록? 2 위에 넣어준다.html에서 input 에 클래스 query를 준다.

church 페이지 script

처음부터 검색, 페이지네이션까지 정리 !

(게시판) listTag 넣는것 > postman에서 이걸(=Response Body)보면 된다!! 오타 있을 수 있으니 옆의 값 보면서 하기.

검색, 페이지네이션, 패스워드

광고 신청하기

freeAd_detail

리스트 출력하기(데이터 바인딩)

테이블 태그 관련

출근수익분배사이트 퍼블리싱중이다~!!!

출근도움받아서 완성한 회비입금 / 확인하고있는 수익리스트

아이고 부대비용 관리인데 안고쳤네...일주일정도나 되어서야 이제야 어떻게 하는지 알거같다고 한다면?^_ㅜ...

그동안 정신없이 이런 테이블/게시판형 작업들을 했습니다~~~

이번에 맡은 일은 디자인+퍼블리싱이다! 메인페이지 리뉴얼을 맡았다. 피그마는 이번에 처음 써 보는데, xd를 써봤던 경험 때문인지 툴 자체는 어렵지 않게 쓸 수 있었다.