본문 바로가기

Widely Design 바로가기

💚 UIUX 웹퍼블리셔 과정(6개월)175

2021-05-25 (43일차) #'구현응용'시험. 상단바는 카카오뱅크, 나머지는 BMX로 구성 #'구현응용'시험. 상단바는 카카오뱅크(150강), 나머지는 BMX(148강)으로 구성해주세요. *정답란 본인 느낌 기준으로 완성도 : 100% 만점 *첨부 결과.zip - 소스코드/index.html - 소스코드/index.css - 캡쳐/큰화면상단.jpg - 캡쳐/큰화면하단.jpg - 캡쳐/작은화면상단.jpg - 캡쳐/작은화면하단.jpg 2021. 5. 26.

2021-05-24 (42일차)float grid - clear both, 시험대비문제 152강~153강 - 반응형 float 그리드에서 clear both 하는 이유 #문제. 상단바는 카카오뱅크(150강), 나머지는 BMX(148강)으로 구성해주세요. 2021. 5. 24.

2021-05-23 (41일차) 복습 - 모작과제 flex이용하여 다시 만들기 - flex개념영상 여러가지 찾아보기 - flex개념 외우기 2021. 5. 24.

2021-05-22 (40일차) 복습 151강 - 쌤이 추가로 올려주신 151강 영상 전체 보기 - 포토웍스 2일차 정리 끝내기 - 포토웍스 3일차 복습 2021. 5. 24.

2021-05-21 (39일차) float-grid, 밑줄 애니메이션, flex, flex-grow, 수직정렬방법 align-items, align-self, 버튼만들기 149강~150강 - float-grid .float-grid::after { content:""; display:block; clear:both; } .float-grid > * { float:left; box-sizing:border-box; } - 밑줄 애니메이션 1) 좌 > 우 효과를 주고 싶은 태그의 뒤 or 앞에 absolute를 놔주기 ex) 태그::after { content:""; background-color:white; width:0; height:2px; position:absolute; bottom:0; left:0; transition:width .3s; } :hover > a::after { width:100%; } 2) 가운데 > 양쪽 효과를 주고 싶은 태그의 뒤 or 앞에 .. 2021. 5. 22.

2021-05-20 (38일차) 반응형상품리스트, 부분모작 개인과제, 유즈툴컴퍼니 148강 #문제. 반응형 상품리스트 2를 구현 ( float 제거, flex 사용) - 부분모작 개인과제 목표사이트 설정 완료 유즈툴컴퍼니 : https://www.usetoolcompany.com/ 1차시도 - 탑바 구현 https://codepen.io/minicoding/pen/NWpdPgE 2021. 5. 20.

2021-05-19 (37일차) flexbox froggy - css flexbox 속성 정리 - Flexbox Froggy css flexbox 속성 배우기 게임 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. row: 요소들을 텍스트의 방향.. 2021. 5. 20.

2021-05-18 (36일차) 피그마, 반응형 상품리스트 연습, flexbox froggy - 피그마 다운로드 방법 협업하는 방법 (무료버전은 2명까지만 가능) 크몽에 올릴 웹사이트 예시 제작 과제 시작 조에서 2명씩 구성 완료 목표 페이지 설정 완료 피그마로 협업 중 기존 사이트에서 어떻게 변화를 줄지 생각 #문제.반응형 상품리스트 1 구현 (튜토리얼23단계) - Flexbox Froggy css flexbox 속성 배우기 게임 2021. 5. 20.

2021-05-17 (35일차) float:left, float, block, content, clear:both, float-grid, max-width, overflow-x:hidden; 145강~147강 - float : left display : inine-block처럼 작동 → 가로정렬, 띄어쓰기공백 없음, 최소한의 크기로 줄어들음, verticle align:top없이 위에 붙음 문제점 : block요소인 부모는 float를 무시하는 법칙이 있음 해결방법 : 부모인 block요소가 자식인 float요소를 무시하지 않기 위해 float의 형제에 block요소 추가 문제점 : 추가된 block요소만 부모에게 인식되고, float요소들은 여전히 무시됨 해결방법 : 추가된 block요소에 clear : both를 주면 모든 문제점 해결 ↓↓↓↓↓↓↓↓최적의 방법↓↓↓↓↓↓↓↓↓ 부모>자식 {float:left;} 부모태그::after {content:""; display:block; cl.. 2021. 5. 18.

2021-05-16 (34일차) 탑바, 메뉴바, 이미지리스트, 이미지효과 연습, z-index:-를 주는 이유? 1. 3차 메뉴 만들기 연습완료 2. 탑바+메뉴바 만들기 연습완료 3.이미지 넣고 배열하기 연습완료 4.이미지에 어둠효과, 확대효과, 텍스트효과 주기 연습완료 Q. z-index:-1을 굳이 이미지 확대효과에 주는 이유는? (비확실) A.일단 이미지에 어두움, 확대효과를 동시에 줬을 때, 어두움효과가 보이지 않게 된다. 그 이유는 이미지 확대효과는 특수효과 transform(scale)를 사용하기 때문에 z축 맨 앞으로 나오는 성질 때문이다. 그래서 어두움효과에 z-index:1;을 줘서 앞으로 나오게 하거나 확대효과에 z-index:-1; + position:relative;를 줘야한다. 편하게 어두움효과에 zi-ndex:1;값만 주려고 했으나, 추가로 텍스트 효과를 주고나니 텍스트 효과도 보이지 않는.. 2021. 5. 16.

2021-05-15 (33일차) 3차 메뉴바 복습, '쉽게 배우는 html5&css3 그리고 jquery' 독서 - 3차 메뉴바 만들기 연습하기 (2번 완료) 1차 메뉴 2차 메뉴 3차 메뉴 메뉴 아이템에 hover시 자식메뉴 노출 3차 메뉴 위치를 아래가 아닌 오른쪽으로 옮기기 메뉴 너비 정상화시키기 1차 메뉴 중 마지막 아이템의 2차메뉴 hover시 자식3차메뉴 안쪽으로 펼쳐지게 만들기 - '쉽게 배우는 html5&css3 그리고 jquery' 독서 머리말 (웹의 열풍, HTML, CSS JAVASCRIPT의 유래, 스마트폰의 등장) 2021. 5. 16.

2021-05-14 (32일차) 큰 이미지 하나, 이미지 부가설명 넣기, hover시 이미지 어두운 효과, 이미지 확대 효과 transform:scale, 효과에 시간걸기 transition, css 특수효과, 141강~144강 - 큰 이미지 하나만 넣기 emmet : section.section.section-0>div.con>div.img-box>img - 이미지 리스트의 이미지에 부가설명 넣는 방법 (작품명, 날짜, 제작기간 등) emmet : section.section.section-1>div.con>div.work-list-box>ul.inline-grid>li >div>(div.img-box>img)+div.work-name{작품명}+div.work-date-period{날짜, 제작기간} .work-list-box > ul > li > div > (.work-name, .work-date-period) {margin-top:5px; text-align:center;} - 마우스 올리면 이미지가 어두.. 2021. 5. 15.

이전 1 ··· 9 10 11 12 13 14 15 다음

티스토리툴바