본문 바로가기

분류 전체보기228

웹디자인 실습 모바일 메인 페이지 - 웹디자인 입문 강좌 www.youtube.com/watch?v=qB6UZdPu0Ag&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=12 - 일반적인 작업방식 모바일>테블릿>데스크탑 - mobile first 콘텐츠 (콘텐츠의 가독성) 복사 후 더블 클릭후 편집화면에서 사이즈 조절 adjust content on resize ■체크 메인화면으로 돌아와서 수정+사이즈 조절+배치하기 - 모바일 사이즈 만들기 1. a를 누르고 기종을 선택하기 2. view-show layout-layout setting 좌우에 margin 20씩 주기 → 총 40 빼주기 =>335px offset 0 주고 center 누르기 number of columns 4 또는 6 주기 gutter width 16px 주기.. 2021. 4. 21.
시선강탈 웹 메인 배너 만드는 방법(feat. 포토샵) - 웹디자인 입문 강좌 www.youtube.com/watch?v=xb_yfjHj_RE&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=11&t=2s 시선강탈 웹 메인 배너 만드는 방법 - 어두운 배경에서 빛이 들어오는 효과 1. 원을 하나 그려서 검정색 채워주기 2. filter>render>lens flare (105mm prime 추천) 3. 레벨값을 줘서 테두리의 밝은 부분 경계를 없애주기 - 빛이 나오는 효과 1. 펜툴(shape)으로 모양을 그려주기 2. smart object로 바꿔주기 3. filter>blur gallery>field blur 4. 수치 알맞게 조절 (끝부분은 강하게!) 5. ok 버튼을 누름 6. 마스크를 씌우고 그라데이션과 붓으로 자연스럽게 경계를 지워주기 .. 2021. 4. 21.
2021-04-20 (8일차) img 속성과 사이즈 조절 방법 35강~38강 - img 열고 닫는 구조가 아닌 하나짜리이다. 자식을 가질 수 없다. ex) display는 inline이다. 이미지는 고유의 비율이 있음 → 너비나 높이 하나의 값만 줘도 정비례로 커짐 → 너비와 높이 두개에 값을 준다면 비례가 달라짐 - 너비와 높이 두개에 값을 줘서 비례가 안 맞을 때 - object-fit : contain; → 비율이 유지되게 커짐 - object-fit : cover; → 빈공간이 없이 커짐 - object position : 보이는 부분을 조정하는 것 ex) object-position : 0% 50%; ex) object position : right top; #문제. 이미지 6개를 3x2 가운데 정렬로 배열해주세요. 조건 : 이미지간의 여백 50px, 모든.. 2021. 4. 20.
2021-04-19 (7일차) 상단 메뉴 구현 31강~34강 #문제. BMX 사이트의 상단 메뉴를 없이 구현해보시오. #문제. BMX 사이트의 상단 메뉴를 없이, 각 너비가 동일하게 구현해보시오. - 메뉴의 구조 : section>a*7 - a 에 width 를 적용하려면, display 속성을 inline-block 이나 block 으로 지정 #문제. BMX 사이트의 상단 메뉴를 5분 안에 구현해보시오. - 메뉴의 구조 : section>nav*7>a - 메뉴의 구조 : section>({|}+nav>a[href="#"]{메뉴아이템 $})*7+{|} - 메뉴 아이템안에 있는 a에 display:block 2021. 4. 20.
웹디자인 실습 PC 카테고리 페이지 - 웹디자인 입문 강좌 www.youtube.com/watch?v=ay7VHoa8tKs&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=10 - 카테고리페이지 헤더와 푸터는 그대로 사용됨 메인 배너에 비해 조금 더 작게 작업 simbol normal/active 서로 바꿔주기 2021. 4. 18.
헤더, 배너, 섹션, 푸터 디자인 - 웹디자인 인문 강좌 #6 웹디자인 실습 PC 헤더 디자인 01 - 웹디자인 입문 강좌 www.youtube.com/watch?v=cCwj-xYYCM0&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=6&t=1s #7 웹디자인 실습 PC 배너 디자인 02 - 웹디자인 입문 강좌 www.youtube.com/watch?v=jmly8U6Eeuk&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=7 #8 웹디자인 실습 PC 섹션 디자인 03 - 웹디자인 입문 강좌 www.youtube.com/watch?v=D8XMY0fb2wQ&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=8 #9 웹디자인 실습 PC 섹션, 푸터 디자인 04 - .. 2021. 4. 18.
2021-04-18 (6일차) 연습, 복습, 익히기 - text-align 연습 - display block과 inline-block의 차이점 알아보기 block 취급 당하는 것 알아보기 inline-block취급 당하는 것 알아보기 - hover 연습 - emmet으로 쓰는법 익히기 2021. 4. 18.
2021-04-17 (5일차) 연습, 복습, 만들기, 외우기 - a(링크)거는 거 연습하기 - 젠코딩으로 네이버, 구글, 다음 가는 링크 만들기 연습 - 후손 선택자 개념공부 - 자손 선택자 개념공부 2021. 4. 18.
2021-04-16 (4일차) border, text-align, hover{}, 자식선택자(>), 인접동생선택자(+), text-align - inline주면 안 되는 예외, &nasp; 19강~30강 #문제. 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요. - a(링크)태그의 display는 inline이다. - 외곽선 주는 방법 - border : 두께, 형태, 색상 ex) div{ border : 10px solid red; } - text에 위치를 주는 방법 - text-align : left; - text-align : center; - text-align : right; - display : block은 글자 취급 x (블록취급) ex) section, div, article, nav - display : inline과 inline-block은 글자 취급 o - text-align 설정할 때 display에 inline-block을 주면 안 되는 예외의 경우 : dis.. 2021. 4. 17.
2021-04-15 (3일차) 테이블 개념, a(링크), br(띄어쓰기), 젠코딩(emmet), 후손선택자와 자식선택자 12강~18강 #문제. 다음 글자를 예시와 같은 스타일로 만들어주세요. - 테이블 개념 (표 만들기) #문제. display 속성과 관련된 문제를 풀어주세요. - a(링크)태그와 br(띄어쓰기)태그 - 젠코딩으로 네이버, 구글, 다음 가는 링크 만들기 - 후손 선택자 개념공부 - ' '띄어쓰기 : 후손선택자 ex) div a = div의 후손 a →(div 아래에 있는 a 모두 해당) - '>' 꺽새 : 자식선택자 ex)div > a = div의 자식 a →(div 바로 아래에 있는 a만 해당) 2021. 4. 15.
2021-04-14 (2일차) display 활용, 글자 꾸미기 속성 9~11강 - display 활용해보기 #문제. section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요. - 엘리먼트(배우)의 부모, 자식, 형제관계 - 글자 꾸미기 - 글자의 두께 조절 - font-weight : normal; - font-weight : bold; - 글자 크기 - font-size : 3rem; - font-size : 140px; - 자간 조절 - letter-spacing : -10px; - 색상 - color : #787878; - color : (255,0,0,0.5); =(red,green,blue,투명도) 2021. 4. 15.
2021-04-13 (1일차) 웹코딩 기초, 툴 세팅, HTML, CSS, JAVASCRIPT 의 역할, 간단한 기초 태그, inline-block과 block의 차이점 1~8강 - 웹코딩 기초, 툴 세팅 - 윈도우 단축키 window+shift+s 화면캡쳐 ctrl+home 최상단 이동 ctrl+shift+home 지정위치~최상단 커서 ctrl+end 최하단 이동 ctrl+shift+end 지정위치~최하단 커서 art+ctrl+방향키 단어단위로 커서 window+방향키 화면 위치 ctrl+pgup 좌측 탭 이동 ctrl+pgdn 우측 탭 이동 ctrl+t 새 탭 열기 home/end 문서최상단이동/문서최하단이동 pgup/pgdn 한 페이지씩 위/아래 이동 F6 url주소 커서잡기 ctrl+W 탭 닫기 f2 문서 이름 바꾸기 window+e 파일탐색기 window+d 배경화면으로 이동 window+숫자키 작업표시줄 순서대로 실행 window+tab 전체 데스크탑 - di.. 2021. 4. 15.