반응형 분류 전체보기51 HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현 오랜만에 포트폴리오 포스팅을 하네요 :) 오늘은 저의 두번째 포트폴리오 메인에 사용된 디자인을 같이 구현해볼까합니다. 먼저 한번 완성작을 같이 보시죠 해당 완성작은 웹페이지에서 작동하는 것을 녹화한 거입니다. SVG파일을 먼저 만들러 가봅시다!! 일단 일러스트를 켜주세요 :) chpofo.tistory.com/39 포트폴리오 시작 - 로고제작 작년 여름방학 때부터 진행되었던 저의 포트폴리오 제작기를 오늘부터 하나씩 정리해볼까 합니다. 디자인을 전공하지 않아서 디자인적으로는 많이 부족한걸 저 또한 잘 알고 있습니다. 구독자 chpofo.tistory.com 해당 로고를 만들었을때 사용했던 필기체 글꼴를 사용해서 만들어봅시다. 1. 해당 글꼴로 원하는 글씨를 써주세요 2. 폰트를 깨주기 위해서 폰트를 선택하.. 2021. 4. 28. CSS 배경속성 Background 속성 태그의 배경을 지정하는 속성 ↓ 세부적인 속성 background-color 배경 색 background-image 배경 이미지 background-size 배경 이미지 사이즈 background-repeat 배경 이미지 반복 여부 background-position 배경 이미지 위치 background-attachment 배경 이미지 고정 방식 backgound 세부적인 속성을 한번에 1. background-color 배경색을 의미 표현방식 : rgb(), rgba(),16진수(color속성)의 포맷을 사용 주의할 점! 태그의 크기가 없는 경우에는 배경색이 표시되지 않는다 예제 backgroun-color : pink 200px의 정사각형 backgroun-color : bl.. 2021. 4. 22. 1320-12 column 그리드 잡기 안녕하세요 :) 오늘은 웹디자인의 기본인 그리드를 잡는 방법에 대해서 소개를 해드릴까 합니다. 첫 번째 포트폴리오는 그리드를 알기 전에 작업했던 거라서 화면이 작았지만 깨지곤 했지만 두 번째 포트폴리오는 일단 화면이 1320까지는 안 깨지니까 괜찮더라고요 아직은 반응형으로 못 만들어서 더 작아지면.. 먼저 모니터 해상도부터 알아보고 넘어갑시다 해상도는 화면에 최대 몇 개의 픽셀을 표현할 수 있는지를 나타낼 수 있는지를 알려주는 정보라고 생각을 하면 쉽게 이해를 할 수 있는데 해상도 숫자고 높을수록 고해상도의 이미지, 동영상을 출력할 수 있다. 모니터는 16:9 비율이 일반적이며, 요즘은 HD이하의 해상도는 의미가 없어서 최소로 1280 X 720라고 생각하면 된다. 그래서 그리드를 잡을 때 많이 사용하는.. 2021. 4. 14. 스크롤 시 한 영역씩 이동 안녕하세요 :) 오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다 이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 무방하지만 코드로 작성할 수 있으면 더 좋지 않을까 해서 제가 학원에서 배운 것을 공유를 해드릴게요^^ 포트폴리오에 사용된 JS 포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다. 1. fullPage.js 첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중 https://chpofo chpofo.tistory.com 먼저 완성작을 먼저 보고 코딩을 시작해 봅시다:) 스크롤 시 영역이동 영상에서와 같이 스크롤을 하면 한 영역씩 이동이 되는 그런 코드를 작성해봅시다 생각.. 2021. 4. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음 반응형
