전체 글228 2021-07-05 (84일차) 복습 스와이프 25강 - 이미지 리스트 만드는 방법 복습 2021. 7. 7. 2021-07-04 (83일차) 복습 - 이미지 슬라이드 만들기 - 슬라이드 다른 방식 찾아보기 - 웹디자인기능사 실기시험 알아보기 2021. 7. 4. 2021-07-03 (82일차) background-image에 대하여 (복습) - background-image : img태그를 사용하지 않고 이미지를 넣는 css값 ※ 이미지 태그 주요 콘텐츠는 img태그 사용, 배경역할로 꾸밈요소로 쓰인다면 background-image 사용 img 태그 : scale를 줄였을 때, 정비율로 줄어들고 비율이 달라지만 이미지가 찌그러짐 background-image : 옵션을 잘 맞춰주면 더 편하게 보여줄 수 있음 - background-size : contain; : 이미지 고유비율로 들어가고,나머지 공간은 이미지가 반복됨 ※ no-repeat 사용하면 나머지는 흰여백으로 표시됨 ㄴ background-color로 색상갑을 줄 수 있음 - background-size : cover; : 어떻게든 이미지가 반복되지 않고, 꽉 차게 나옴 2021. 7. 4. 04_Isometric_design Isometric_design 새로운 아트보드 200mmX240mm 1 도화지 좌우 양쪽에 길게 선 그리기 두 선을 선택하여 블랜드 시키기 (option - step 25) expand 확장시키기 (fill만 체크해제) 선 복제하여 rotate툴로 60도 주기 reflect툴-horizental로 하나 더 복제하기 위치 적절하게 배치하기 2 그리드 투명화하기 (그리드 선값 빼주기) 라이브툴로 칠해주기 expand 확장하여 그리드와 그린 물체를 떼어낼 수 있음 (그리드 재사용도 가능) 떼어내서 마법봉으로 같은 선택 후 패스파인더 합쳐주기 3 사각툴로 사다리 그린 후 그룹화 effect > 3D Extrude&Bevel Options 이용하여 알맞게 조정 4 반쪽 만든 후 3d revolve > right .. 2021. 7. 4. 2021-07-02 (81일차) con-padd, line-2-ellipsis, 'class101'이미지 슬라이드 모작 스와이프 20강~24강 - con-padd : 좌우에 간격을 주기 위해 con 안에 만드는 클래스 { padding-left : 20px, padding-right : 20px; } - 비율 다른 두 개의 이미지를 같은 비율로 만드는 방법 (전 날 것 복습) 1 - 배경이미지로 이미지를 넣은 엘리먼트 두개 놓기 2 - 엘리먼트::after { content : " "; , display : block;, padding-top : 100%; } 고정비율 만들기 3 - 엘리먼트 { background-size : cover, background-position: center } 고정비율에 이미지 적당히 맞추기 - 화면의 크기가 줄어 텍스트가 넘쳐도 두 줄을 유지하고, 그 이상을 넘기면 …으로 표시해줌 .li.. 2021. 7. 4. 2021-07-01 (80일차) background-image, 고정비율, css 이미지 고정비율, 슬라이더 좌우 보이게 하기, background-image에 텍스트 넣기 165~166강 ( 이미지 비율 ) 스와이퍼 19강 - 이미지가 안 나오는 경우 : 포스트이미지 사이트 (https://postimages.org/) - 스프라이트이미지 사용방법 : background-image 사용 - background-image : url( ) ; : 태그의 배경으로 이미지를 넣는 명령 : 이미지의 크기가 정해진 너비보다 작다면 자동으로 이미지가 반복되어 나옴 - background-repeat : norepeat : 이미지 반복을 멈춰준다. - background-position : 가로px 세로px : background-image를 특정너비로 자르고 사용하고 싶을 때 사용 +px : ← ↑ - px : → ↓ - background-size : contain : 이미지가 잘리.. 2021. 7. 3. 2021-06-30 (79일차) 슬라이더 텍스트 애니메이션, 슬라이더 버튼 스와이퍼 14강~18강 - 슬라이더 텍스트 애니메이션 (보통 아이템이 하나인 경우 사용) 1 - 글씨를 태그로 한 번 더 묶어주기 2 - 묶어준 태그 > opacity 0.5 , translateY(-100%) , transition 1s 3 - 슬라이드. 슬라이드 active가 들어갔을 때 묶어준 태그에 값 > opacity 1 , translateY(0) ※ 스와이퍼 슬라이드에는 실행이 될 때 swiper-slide-active 라는 클래스가 적용되게 설정되어 있음 ! - 이미지 슬라이더 ( 방향키 버튼을 새롭게 고치고, 슬라이더 밖으로 내보내기 ) ※ 이미지는 부모의 너비는 따라가지만, 높이는 따라가지 않기에 직접적으로 값을 부여해야 한다. - 이미지 슬라이더 ( 슬라이더 이미지가 천천히 축소되는 .. 2021. 7. 2. 2021-06-29 (78일차) 슬라이드 방향키 변경 방법, 추가 방법 스와이퍼 11강~13강 - 슬라이드 네비버튼(방향키) 색상 변경 방법 : icon으로 되어 있기 때문에 그냥 color로 지정해주면 됨 - 슬라이드 네비버튼(방향키) 크기 변경 방법 - 슬라이드 네비버튼(방향키) 텍스트로 하나 더 만드는 방법 : 버튼을 복제 > 클래스 변경 > 안에 텍스트 넣기 → 생성은 되지만, 작동 안 됨(자바스크립트에 명령 전이기에) → 자바스크립트에 방향키 클래스 추가해주기 2021. 6. 30. 2021-06-28 (77일차) 스와이퍼 사용방법, 스와이퍼 슬라이드, 스와이퍼 방향키 옮기기 스와이퍼 5~10강 - 한 화면에 슬라이드 3개 넣는 방법 스와이퍼 사이트 접속 > Demo > Slides per view > Open in new window 클릭 > 필요한 소스코드 부분 복제 자바스크립트에 붙여넣기 - 슬라이드 간의 여백을 띄우는 방법 스와이퍼 사이트 접속 > Demo > Space between > Open in new window 클릭 > 필요한 소스코드 부분 복제 자바스크립트에 붙여넣기 - 슬라이드를 무한반복하는 방법 자바스크립트에 loop : true 추가 : swiper의 방향키 기본값 absolute, top-50% 으로 인해 위치하는 것 ㄴ 버튼에 top :auto; bottom:0;값을 주기 ㄴ.. 2021. 6. 30. 03_Detail_App_Icon Detail_App_Icon 1 단위값 px로 바꾸기 아트보드 1000x1000 설정 후, 사진 아트보드 크기에 맞추기 사진 layer option > template 체크 (덧대고 만들기 위해) 모양을 만든 후, 하나 더 복제해주기 (질감용) 2 place(ctrl+shift+p) 이용하여 나무질감사진 가져오기 embed 눌러서 링크 풀기 크기 대략 맞춘 후, 복제한 도형에 클리핑마스크 적용 3 sclae corner 체크하여 크기조절 문제없게 하기 두개 복제하여 어두운 경계선, 밝은 경계선에 놓아주기 gray scale 외각부터 순서대로 90 > 5 > 50 개체 3개 모두 잡고 블랜드 연결하기 블랜드 옵션 - specified steps 30 4 나무질감개체를 음영개체보다 아래로 내리기 음영개체의 .. 2021. 6. 29. 2021-06-27 (76일차) - 탭 메뉴 강의 돌려보기 - 탭메뉴 구현 - toggleAction대해 공부 - toggleAction요점정리하기 ㄴ 74일차에 추가했음 2021. 6. 28. 2021-06-26 (75일차)조별과제 파워포인트, 피그마 공부 - 일룸 앱 기획 파워포인트 제작 (조별과제) - 피그마 애니메이션에 대해 공부 - 피그마 컴포넌트에 대해 공부 2021. 6. 27. 이전 1 ··· 8 9 10 11 12 13 14 ··· 19 다음
