024 CSS3 공부 (3) transition, transform, animation

Daily Study/Web Dev 2021.03.04

호버하면 width가 100%까지 1초에 걸쳐서 5단계에 걸쳐서 transition하게 하기 steps로 움직이는 transition을 보니까 갑자기 고전게임 로딩되는거처럼 삐리릭삐리릭 이미지나 텍스트가 나타나는걸 표현해보고 싶어서 한 연습 근데 한 방향 말고 왼쪽 오른쪽 왼쪽 오른쪽 주거니받거니 하게 하고 싶었는데 방법을 못찾았다. transform 적용한 애니메이션 Wendy 손승완 1994.02.21. ~ 대한민국의 가수이다. 5인조 걸그룹 레드벨벳의 멤버이며, 팀에서 메인보컬을 맡고 있다. 아까 transition으로 표현하려고 했다가 실패했던걸 animation으로 일단 원하던대로는 구현했다. 근데 뭔가 이거보다 훨씬 좋은 코드가 있을 것 같긴 한데 지금 내 방식은 사진영역이랑 텍스트 영역을 깔..

015 블렌더 입문 (12) 모루 디테일 추가 / 스컬핑, 노말맵 베이킹, 노말맵 적용

Daily Study/3D 2021.03.02

모서리 부분들에 닳은 것 같은 표현을 넣어주고 노말맵으로 적용하는 단계까지 한 모습 기존에 로우폴리로 만들었던 모루는 그대로 놔두고 똑같이 복사한 오브젝트에 Sculpt 모드에서 이리저리 만져주는 과정이었다. 파인거처럼 들어간 부분은 Scrape로 눌러주고 디테일한 파인 부분들은 Brush Texture를 만들어서 Clouds로 설정하고 자잘자잘하게 깎았다. 처음엔 각 단계들만 보면서 와 이정도면 진짜같다고 생각했는데 과정이 더해질수록 말도안되게 리얼한 디테일들도 표현이 가능한 것 같다. 스컬핑할 때 다인토포로 스컬핑해서 어마무시하게 하이폴리하게 되어버리는데 그러면 렌더링도 오래걸리고 비효율적이니까 노말맵으로 적용하는 방법도 알려줬다. Shader Editor에서 Image Texture로 새 이미지를 ..

023 CSS3 공부 (2) multi columns, rounded box, box-sizing, flex

Daily Study/Web Dev 2021.03.02

multi columns Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sequi iste dolor, possimus maxime aspernatur, quae soluta doloremque culpa, nihil ex omnis numquam officia vero ea quibusdam officiis enim, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit illo suscipit maxime at iusto ipsa consequuntur a. Illum nesciunt veniam enim, accusantium quos repellat evenie..

014 블렌더 입문 (11) 모루 모델링 심화, 이미지 텍스쳐, UV맵 조정

Daily Study/3D 2021.02.25

Subdivision Surface 모디파이어를 먹이면 전체적으로 둥글둥글해져버리는데 그럴땐 모서리 부분에 Loop cut을 앞뒤로 넣어주면 어느정도 각을 살릴 수 있다. 그나마 조심해야되는건 왼쪽 끝에 뾰족한 뿔 부분까지 엣지루프가 연결되면 뿔까지 각져버리니까 그 부분에 생긴 엣지루프는 G를 두 번 눌러서 주변 엣지에 합쳐주고 Merge by distance로 합쳐줘야한다. UV 맵을 펼치기 위해 Seam을 설정해준 모습 최대한 텍스쳐가 끊겨도 될만한 위치, 카메라가 비추지 않는 쪽으로 심을 넣고 이미지 에디터에서 Stretch를 켜서 히트맵을 확인해서 너무 면들이 몰린곳이 있진 않은지 보고 더 심을 추가한다. Unwrap한 모습 이미지 텍스쳐만 머테리얼에 적용해놓은 모습 아마 다음 강의에 텍스쳐 높낮..

022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정

Daily Study/Web Dev 2021.02.25

Lorem ipsum dolor sit amet. css3 selector Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, dignissimos voluptatibus rem vitae iusto debitis repellendus blanditiis et atque corrupti alias adipisci nobis velit consequatur impedit ea voluptas consequuntur repudiandae? Lorem ipsum dolor sit amet consectetur adipisicing, elit. Atque, ratione. DL sample description terms Lorem, ipsum..

013 블렌더 입문 (10) 모루 튜토리얼 시작

Daily Study/3D 2021.02.23

지난 번에 야매로 맥그로우 모델링 해볼때 버텍스도 엉망이고 엣지도 엉망이고 진짜 뻘짓거리 하면서 모양만 맞췄었는데 어떻게 버텍스를 정리하고 합쳐줘야 페이스의 방향들이 맞는지 알 수 있었다. 확실히 모델링 하는데에 도움 될만한 부분인 것 같다. 역시... 블렌더 구루 센세....

021 웹페이지 만들어보기 실습

Daily Study/Web Dev 2021.02.23

skip Navigation skip to content Main menu About Services Portfolio Contact Us Enlighten Designs is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio. We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free ..

012 블렌더 입문 (9) 도넛 튜토리얼 마무리

Daily Study/3D 2021.02.21

블렌더 구루 아조씨의 도넛 튜토리얼을 다 끝냈는데 티스토리에 영상이 안올라간다;; 1:1 비율 영상이라 그런지 뭔지 짜증나서 그냥 안올릴거다 어차피 뭐 튜토리얼만 따라가면 누구나 할 수 있는 거기도 하고 그래도 확실히 전문가가 맞춰놓은 설정을 기준으로 만들었더니 결과물이 좋은 것 같다. 완벽하게는 아니어도 대충 어떤 기능이 어떨 때 쓰는건지 감이 오기도 하고 다음은 모루 튜토리얼을 해봐야겠다.

020 CSS 공부 (16) 레이아웃 예제 실습

Daily Study/Web Dev 2021.02.21

logo Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem qui reprehenderit incidunt ipsa esse tempore quibusdam impedit, id quidem tenetur consequuntur odio quod inventore in cum magnam pariatur cupiditate dolore. content Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente archi..

019 CSS 공부 (15) 로그인 페이지 예제 실습

Daily Study/Web Dev 2021.02.17

로그인 ID PASSWORD 로그인 유지 로그인 아이디/비밀번호 찾기 회원 가입 Open ID X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque voluptas culpa, ea possimus aut, enim dolor quam omnis, dolores dignissimos architecto facere minus fugiat, cupiditate at inventore mollitia itaque perferendis expedita id? Perspiciatis facere fuga quia saepe sunt. Quae illum, doloribus in beatae blanditiis eum, obcaecati, ..