분류 전체보기93 2024. 11. 18(월) 웹2 3일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 1교시position속성)- absolute : 상위태그- body가 부모 역할을 함- 참고 사이트- 참고 사이트- 참고 사이트- 참고 사이트ㄴ transform을 사용하여 변형→transform: translatY(-50%);/ transform: translate(-50%, -50%); / 두 가지 방법 다 사용O # 2교시object-fit속성)- img태그나 video요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정- object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할.. 2024. 11. 18. 포토샵 기초_레이어와 이동(2) #예제 1ㄴ 2강 전체 자료 열기 ㄴ 레이어 패널 선택 → 단축키(F1)ㄴ 레이어 패널의 눈 모양을 클릭하면 사람이 없어졌다 나타나는 것을 볼 수 있음ㄴ 우측에 레이어 이름 클릭하면 이름 변경 가능 ㄴ 썸네일 / 미리보기 화면ㄴ 이동툴 → 단축키( V) / 사용이 안되면 한/영 버튼 다시 클릭하고 V눌러서 사용ㄴ 이동 툴바를 클릭하면 우측 위쪽에 메뉴바가 해당 클릭한 걸로 바뀐 것 확인 ㄴ 메뉴 바에서 Show 앞에 있는 체크 버튼을 클릭하면 현재 사람 레이어에 대해서 박스가 생김 → 바운딩 박스ㄴ 단축키 : Ctrl + T 누르면 박스가 생김 / Enter 누르면 완료 이동툴 특징)1. 크기를 변경할 수 있다.2. 레이어를 움직여줄 수 있다.ㄴ 사람 복제할 때 Alt를 꾹 누르고 드래그 하면 복제.. 2024. 11. 16. 2024. 11. 15(금) 웹2 2일차 높이가 많이 들어갈 수록 코드의 방향성을 잃을 가능성이 높음-> 높이 유연하게 주는 이유 그리드 사이즈는 중요한 역할을 함 max-width)- 최대치 ex. max-width: 1440px; → 0~1440px까지 유연하게 작동ㄴ %처럼 유연하게 줄어들 수 있고 원하는 수치까지 적용 가능한 아주 유용한 속성!ㄴ 0까지는 내려가지만 최대치가 1440이라 그 이상으로는 안감 flex-item)- flex-shrink: 1; → 기본값ㄴ 기본값으로 인해 width에 고정 px이 적용되어 있어도 유연하게 줄어들고 늘어난다.ㄴ flex-shrink: 0; → 위 특징이 사라진다. flex-item은 줄바꿈 되라는 명령이 있기 전까지는 절대 줄바꿈 되지 않는다.(flex-wrap: wrap;)ㄴ fl.. 2024. 11. 15. 2024. 11. 13(수) 웹2 1일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 1교시 지마켓 상단바 구현_피그마 이동)ㄴ 박스를 나눠서 코딩 ㄴ1080 1280 1400ㄴ 정렬 ㄴ 로고박스ㄴ 메뉴바ㄴ 사용자 메뉴 일렬정렬)- display(속성) flex(속성값)- display(속성) inline(속성값) flex 사용 조건)- 하나의 박스 안에 있어야 한다.- 상위태그와 하위태그로 이루어져 있어야 한다. → flex-box를 사용해야 함! ㄴ flex-item은 너비가 작다. 목록과 리스트 태그)- 순서가 있는 구조에 사용하거나 순서는 없고 리스트가 있는 구조에 사용한다.ㄴ menu-box # 2교시ㄴ li 글씨.. 2024. 11. 13. 2024. 11. 12 포토샵(1) # 포토샵이란?- Adobe 시스템이 개발한 그래픽 편집 소프트웨어(그래픽 편집: Image Making, Image Retouching) 입력화된 화상에 대해 다양한 편집과 수정을 하는 프로그램 ㄴ 색상 보정, 이미지 합성, 문자 디자인, 인쇄물 디자인, 웹 디자인 등의 작업에서 쓰임# 포토샵 주요기능1) 합성- 두 장 이상의 이미지를 자연스럽게 합성 ㄴ 경계를 어떻게 없애야 한 장의 이미지로 나오나 2) 보정 - 명암, 색갈 조절 ㄴ 포토샵 3) 리터칭 - 브러시툴 등을 활용한 풍부한 특수 효과ㄴ모션 효과 등 4) 리사이즈- 원본 이미지의 크기 변형# 취업분야1) 편집 디자인 ㄴ 출력하는 모든 디자인 ㄴ ex) 잡지, 팜플렛 2) 제품 디자인(패키징)ㄴ 도면을 직접 만들어 정확한.. 2024. 11. 13. 2024. 11. 06 웹 9일차(...) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기- # 1교시 피코그램 상단바 구현) block)- 한 줄에 하나씩 - 너비가 기본 값일 때 상위태그 크기만큼 나옴 ㄴ 중앙정렬 할 때 box 크기가 같아야 함 / 지금 예시를 보면 1차 메뉴 아이템, 2차 메뉴 아이템 박스 크기가 다름 * a 태그가 display일 때 inline의 값을 가짐 png는 아이콘 뒤에 흰배경 가상요소)- 기본 값 display: inline; ㄴ태그 크기가 기본 값일 때 0으로 작동 ㄴ 너비 높이, padding-top을 제대로 적용할 수 없다. ㄴ flex-item으로 정상 작동한다. ㄴ 텍스트를 작성하지 않.. 2024. 11. 6. 이전 1 2 3 4 5 6 7 8 ··· 16 다음
