본문 바로가기

전체 글228

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.
레이어와 에셋 정리하는법 (Feat. Zeplin) - 웹디자인 입문 강좌 www.youtube.com/watch?v=2xq-cJCoBMI&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=14 작업 완료 후 클라이언트에게 보낼 때 주의사항 1 레이어 정리 위 -> 아래 숫자 매겨줌 ex) #01 header -> #02 banner #을 넣는 이유 : 하위 심볼 혹은 그룹과의 차별을 위하여 컴포넌트의 정확한 명을 적고, 섹션 같은 경우는 해당 섹션명으로 적어주기 2 내보내기 해야할 요소들 make exportable 해주기 고정된 이미지는 make exportable 해주고 이미지 같은 경우는 배경을 투명으로 의도한 게 아니라면 jpeg로 바꿔주기 유동적으로 변하는 이미지는 컨텐츠는 운영 업무에 속함으로 안 보내도 됨 3 로고나 아이콘 같은 경.. 2021. 4. 21.
웹디자인 실습 모바일 서브 페이지(Feat. 스케치 심볼의 힘) - 웹디자인 입문 강좌 www.youtube.com/watch?v=JxxrQj8sXS4&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=13&t=1s 복제후 이름바꾸고 공통되는 요소 빼고 삭제하기 2021. 4. 21.
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.

티스토리툴바