웹3 1일차

{**Tip**}지디웹 원하는 사이트 모작하기=> 레이아웃 나눠서 순서대로 만드는 연습하기     [지마켓 3차 메뉴 만들기]1. 2차메뉴에서 시작 2. 레이어 잡기 - 1크기가 큰 레이어 부터 순서대로 한다. 처음 레이어는 가장 바깥쪽의 박스들 부터. 3. 레이어 잡기 - 2큰 박스들 안에 있는 작은 요소들 구성 4. hover 적용3차 메뉴 사이드바에 마우스 올리면 나타나도록 hover 적용. 1) .g-market-3__nav { position: absolute; 적용 }    마우스를 올릴 li요소가 감싸주도록 위치를 옮긴다.  .. .. .. .. 브랜드 패션 ..

• format_list_bulleted 웹
• · 2024. 5. 10.

웹3 수업페이지

수업 준비 과제 제출: 구글 시트피그마: 링크 바로가기   수업 내용 - JS 학습 - j-query 이벤트  - j-query 함수      💎 1일차 : 지마켓 3차 메뉴 📘 코드펜 : 지마켓 3차 메뉴 📗 숙제 : 지마켓 처음부터 3차 메뉴 수업시간에 했던 것 까지 코딩    -------- JS, 자바스트립트 시작 --------💎 2일차 : JS 출력 📘 코드펜 : 콘솔 용도, 문자와 숫자 데이터    💎 3일차 : JS 변수명 & 함수    j-query 📘 코드펜 : 변수명,  if & 연산자 적응문제,  함수,  j-query  💎 4일차 : click이벤트 & 팝업 만들기(1) 📘 코드펜 : j-query click이벤트                      if-else..

• format_list_bulleted 웹
• · 2024. 5. 10.

웹2 9일차

[absolute요소 hover]1. absolute 요소 안 보이게 하기hover 적용하는 2차 메뉴 구현시, display: none; 사용하면 transition을 사용할 수 없다.대신, opacity: 0;과 visibility: hidden;을 동시에 써주어서 사라지게 할 수 있다.  opacity: 0;                => 투명도 0%, 그러나 상호작용(ex.클릭)이 된다. visibility: hidden;  => 상호작용이 되지 않는다.                                             But, 공간은 그대로 차지하기 때문에 absolute 혹은 fixed 요소에만                                            사용하는..

• format_list_bulleted 카테고리 없음
• · 2024. 5. 8.

웹2 8일차

{** Tip **} 추가로 딸려나오는 2차메뉴 같은 요소는 css를 따로 놓는게 좋다. 위치가 바뀔 수 있어서 다른 요소들과 엮이면 수정하기 힘들기 때문이다.  활용이 높거나 이벤트 중요도가 있는 css는 순서를 뒤로 두어야 css적용이 잘 되기 때문에 기본적인 것 부터 삽입하도록 한다.  /* most Basic CSS file */ /* Eventful CSS */        [2차메뉴 구현하는 순서(추천)]1. absolute가 되어야 하는 구조를 hover까지 생각하면서 html에 배치.    ㄴ이때 구조를 눈으로 확인 할 수 있도록 문자를 함께 작성한다.  2차 메뉴  2. 상황에 맞게 absolute나 fixed를 먼저 적용하고 위치를 먼저 잡아준다. 3..

• format_list_bulleted 웹
• · 2024. 5. 3.

웹2 7일차

{** Tip **}dbcut, 지디웹 : 웹 사이트 모음 사이트. 디비컷이 좀 더 보기 편하다!언스플래쉬 : 사진 무료 사이트. 사람 얼굴이 나온 사진은 초상권이 걸릴 수 있고,                      2차 제작물을 위한 사이트니 많이 변형하여 사용하면 좋다.  [이미지 비율]이미지를 넣을 때 상위 엘리먼트와 비율이 안 맞아 삐져나오거나 부족한 경우, object-fit: cover;을 사용하여 비율을 지키며 꽉 채울 수 있다.    [position]-static: 기본값-absolute: fixed와 한가지를 제외하고 모두 같은 특징을 가진 속성값이다. fixed는 viewport를 기준으로, absolute는 position:relative;인 상위 엘리먼트를 기준으로 절대적인 위치..

• format_list_bulleted 웹
• · 2024. 4. 29.

웹2 6일차

파일을 디렉토리에 분류하여 저장하기상단 아이콘 중 폴더 아이콘을 누르고 폴더를 생성한다. 넣고 싶은 파일들을 모두 선택하여 폴더로 드래그하면 폴더로 들어간다    [css 팁]만약 코드를 짜던 중 container 안에 있는 여러 개 요소 중에 하나의 요소 너비를 남은 공간을 모두 차지하도록 하고 싶다면 flex-grow:1;을 단독으로 사용해주면 남은 공간을 모두 사용할 수 있다.    수업 중 코드짤 자유시간🖼️gmarket 혼자 만들어보기

• format_list_bulleted 웹
• · 2024. 4. 26.