본문 바로가기

Widely Design 바로가기

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

2021-05-01 (19일차) 선택자 요점정리 '+' : 인접동생 '~' : 동생들 ' ' : 후손 '>' : 자식 '*' : 모든 것 ' :first-child ' : 첫번째 자식 ' :last-child ' : 마지막 자식 ' :only-child ' : 유일한 자식 ' :nth-child(n) ' : n번째 자식 ' :nth-last-child(n) ' : 마지막에서 n번째 자식 ㄴ※ 엘리먼트 종류와 상관없이 같은 계층에서 n번째 자식인 것에 적용됨 ' :first-of-type ' : 태그유형 중에서 첫번째 ' :only-of-type ' : 태그이면서 오직 하나뿐인 유형 ' :last-of-type ' : 태그이면서 마지막 유형 ' :nth-of-type(n) ' : 태그 중에서 n번째 ㄴ※ nth-child와 달리 해당태그 중에서 n번째인.. 2021. 5. 3.

2021-04-30 (18일차) 3차 풀다운 메뉴 만드는 방법 90강 '구현' 시험보는날 1차 풀다운 메뉴 or 2차 풀다운 메뉴 or 3차 풀다운 메뉴 선택해서 시험! - 3차 풀다운 메뉴 만들기 작업 1, 1,2차 메뉴 먼저 만들기 작업 2, 3차 메뉴 마크업 작업 3, 2차 메뉴 아이템에 hover하면 자식인 3차 메뉴 노출되게 하기 작업 4, 2차 메뉴 아이템도 position : relative;(유령의 집화) 작업 3, 3차 메뉴 위치를 아래가 아닌 오른쪽으로 이동 작업 4, 3차 메뉴의 너비 정상화, white-space : nowrap;(줄바꿈X) 2021. 5. 2.

2021-04-29 (17일차) 너비,높이 없이 absolute 가운데 정렬방법, 선택자 튜토리얼, white-space : nowrap, over-flow : scroll, hidden, ellipsis, 2차 풀다운 메뉴 만드는 방법 80강~89강 #문제. 화면 중앙 박스에 자식 4명을 2 * 2 등분, absolute사용, width, heigth 금지 - 1 : top, left, right, bottom, 포지셔닝 픽셀 이용 → 고정된 너비가 있어서 개체의 너비가 늘어나는 단점 - 2 : top, left, right, bottom, 포지셔닝 퍼센트 이용 → 고정된 너비가 있어서 개체의 너비가 늘어나는 단점 - 3 : 패딩을 이용 → 개체 모양 유지 성공! 포지셔닝값을 안 주면 최소한으로 줄어드는 absolute의 속성이 있지만. (내부를 빵빵하게 채워넣는 속성값) padding을 주면 해결완료! 너비도 바뀌지 않음 #문제. 멀티 메뉴를 위한, 선택자 튜토리얼 10단계 #문제. 선택자 검색대상의 각각 개수 찾기 - white-s.. 2021. 5. 2.

2021-04-28 (16일차)★position 개념정리, static, relative, absolute, absolute의 가운데정렬방법, transform(변형)-translate 73강~79강 - class 'inline-grid'가 'box-1'보다 앞에 있어야 할 이유 .inline-grid : 라이브러리 (한번 만들어서 여러번 쓰는 경우) .box-1 : 커스텀 > (오직 하나만 지정하는 경우) - css 순서 노말라이즈 > 라이브러리 > 커스텀 - ※ 우리 눈에 보이는 시점 : z축 - position : static (사람모드, 기본값) - position : relative (사람모드, 기본값) static과 똑같다. 단, 유령을 집화시킬 수 있음! window를 기준으로 움직이던 하위태그들을 다시 상위태그에 따라 움직이게함 가운데 정렬을 하려면 margin으로 줘야해서(relative는 기본값이기 때문) 확실한 정가운데 정렬 불가능 absolute를 모을 때 rela.. 2021. 4. 29.

2021-04-27 (15일차) 높이에 % 주는 방법, vh(viewport height), calc, !important 70강~72강 - 태그의 높이에 퍼센트가 안 먹는 이유 : 부모의 속성에 정확한 값이 입력이 안 되어 있기 때문 → 태그의 부모 body에 확실한 값을 줘야함 (원래 body의 높이는 auto) ※ body의 부모는 html (원래 html의 높이는 auto) ※ html의 부모는 window(우리가 보는 창) ※ window는 딱 우리에게 보이는 창만 window에 속함 (스크롤X) 높이에 %를 주고 싶으면 상위태그 > body > html 모두에게 height:100%를 줘야함 ▽ 해결책 ▽ 단위 'vh' 이용하기 - vh (viewport height) 실제로 보이는 화면의 높이 1vh=1% (1vh = 1% of Viewport Height) Viewport를 기준으로 한 상대적인 size - h.. 2021. 4. 27.

2021-04-26 (14일차) list개념, ol과 ul의 공통점과 차이점, list와 h$의 노말라이즈, display의 none속성, inline-block으로 그리드 만들기 59강~69강 - ol과 ul의 공통점 자식은 오직 li 만 올 수 있음 - ol과 ul의 차이점 ol : 순서 목록 ul : 순서 없는 목록 - ul, li의 노말라이즈 list-style : none; padding : 0; margin : 0; - h$의 노말라이즈 margin : 0; (보통 margin만 노말라이즈함) font-weight : normal; font-size : 1rem; #문제. list를 이용하여 풀다운 메뉴 만들기 메뉴아이템1 메뉴아이템2 메뉴아이템3 #문제. list를 활용하여 3가지 메뉴를 구현해주세요. - 없어지는 계열 none - 나타나는 계열 - 가로배열 inline inline-block - 세로배열 block - 안 보이던 '첫 번째 div 내용'이 마우스가 닿.. 2021. 4. 26.

2021-04-25 (13일차) 창작프로젝트1 - 조사, 기획 뚜레쥬르 TOUSlesJOURS 조사 - 이용자 유형 : 손님 95%, 예비 가맹주 2%. 투자자 3% - 이용자 분석, 손님 연령 : 20대 20%, 30대 50%, 기타 30% 성비 : 남자 50%, 여자 50% 목적 : 메뉴 확인, 위치 확인, 이벤트 정보 - 이용자 분석, 예비 가맹점주 연령 : 40대 이상 성비 : 남자 50%, 여자 50% 목적 : 뚜레쥬르라는 회사가 믿을 만하고, 경쟁력이 있는지 확인, 신규 입점 방법 확인 - 이용자 분석, 투자자 연령 : 30대 이상 성비 : 남자 80%, 여자 20% 목적 : 뚜레쥬르라는 회사가 믿을 만하고, 경쟁력이 있는지 확인 - 기존 사이트 : 뚜레쥬르 TOUSlesJOURS - 메인 - 구성 - 배너 - 추천제품 - 딜리버리 서비스 - 신메뉴 - .. 2021. 4. 26.

2021-04-24 (12일차) FIGMA 기초 피그마 기초 강좌 - Part1 #figma #무료툴 www.youtube.com/watch?v=GsZk8s5JdWg 피그마 기초 Part2 #figma #아이콘제작 www.youtube.com/watch?v=4_WS782s96c FIGMA 스케치 프로그램처럼 컴포넌트 기반의 UI편집 툴 구글 문서처럼 자동으로 저장됨 포토샵, 스케치와 달리 여러명 동시 작업 가능 여러명인서 작업할 경우 스케치라 포토샵보다 더 강력함 shift + + : 화면을 확대 shift + - : 화면을 축소 shift + 1 : 화면에 맞게 사이즈 shift + 2 : 화면 중간에 frame을 표시 ctrl + r : frame 이름 변경 shift + alt + 드래그 + : 텍스트 복사 shift + a : 오토 레이아웃.. 2021. 4. 24.

2021-04-23 (11일차) 노말라이즈inherit, 메뉴바 구현 53강~58강 - 노말라이즈 (기본화) : 디자이너가 가장 먼저 해야할 일 : 이 세상의 모든 엘리먼트를 평범하게 만든다. - nav 네비게이션의 약자, 길안내 GNB : global navigation bar #문제. 메뉴를 구현해주세요. (1차 메뉴까지만, width, height 사용금지) - body의 노말라이즈 : margin 값 0 주기 - 가장 잘 쓰이는 태그 : div (block) : span (inline) 2021. 4. 24.

2021-04-22 (10일차) id(#), class(.), border-radius, inherit상속 46강~52강 - id (#) 식별자, 한 엘리먼트가 똑같은 id를 가지고 있으면 문법 오류 무조건 한 개 밖에 못 고름 - class (.) id의 단점을 보완 똑같은 class를 가진 엘리먼트 존재함 - class보다 id가 더 강함 붙여쓰기 : 붙여쓴 것 다 해당되는 것 → .a.b : id="a b"포함되는 것 띄어쓰기 : 후손인 것 → .a .b : id="a"의 후손 + 후손 중에서 id="b"조건을 만족하는 것 ex1) id가 a인 엘리먼트 선택할 때 : 내용 → #a {속성값} ex2) class가 a와 b를 동시에 가지고 있는 엘리먼트 선택할 때 : 내용 → .a.b{속성값} ex3) 태그가 'tag'이면서, 동시에 class가 a와 b를 동시에 가지고 있는 엘리먼트 선택할 때 : 내용 .. 2021. 4. 23.

2021-04-21 (9일차) nth-child(n){}, block의 margin정렬방법 39강~45강 - width를 %로 나타내기 (부모 엘리먼트 너비 기준) 높이는 적용 안 됨 ex) {width : 15%; height : 100px; background-color : red; } - 태그이면서 + 누군가의 n번째 자식에만 값 주기 태그 : nth-child(n){} ex) div : nth-child(2) { background-color : red; } - 태그이면서 + 누군가의 첫번째 자식에만 값 주기 태그 : nth-child(1){} / first-child{} ex) div : first-child { background-color : red; } - 태그이면서 + 누군가의 마지막 자식에만 값 주기 태그 : nth-child(마지막번호){} / last-child{} ex).. 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.

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

티스토리툴바