웹 (37) 썸네일형 리스트형 웹3 2일차 {**Tip**}놓치기 쉬운 부분 => 보통 요소 간격을 gap으로 처리하지만 텍스트 요소로만 되어 있는 것은 line-height로 처리할 때가 있다. 피그마를 꼼꼼히 살펴보자 css 라이브러리 첨부하는 사이트. TailwindCSS 사이트 보통 반응형과 같이 일정한 패턴을 보이는 형식에 잘 사용할 수 있다. span태그: 중간 디테일 설정하기중간에 몇 글자만 강조하는 경우 span을 활용할 수 있다. 라이브러리 css 폰트는 js만큼이나 무겁다. 랜딩이 느려진다. 원하는 일부 코드 변경하기일부 css를 틀렸다면 검색 후 왼쪽의 버튼을 누르면 원하는 일부의 코드를 변경하는 기능을 사용할 수 있다.변경하기 위해 엔터를 누르기 전에 우선 원하는 코드만 드래그를 해놓는다. .. 웹3 1일차 {**Tip**}지디웹 원하는 사이트 모작하기=> 레이아웃 나눠서 순서대로 만드는 연습하기 [지마켓 3차 메뉴 만들기]1. 2차메뉴에서 시작 2. 레이어 잡기 - 1크기가 큰 레이어 부터 순서대로 한다. 처음 레이어는 가장 바깥쪽의 박스들 부터. 3. 레이어 잡기 - 2큰 박스들 안에 있는 작은 요소들 구성 4. hover 적용3차 메뉴 사이드바에 마우스 올리면 나타나도록 hover 적용. 1) .g-market-3__nav { position: absolute; 적용 } 마우스를 올릴 li요소가 감싸주도록 위치를 옮긴다. .. .. .. .. 브랜드 패션 .. 웹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.. 웹2 8일차 {** Tip **} 추가로 딸려나오는 2차메뉴 같은 요소는 css를 따로 놓는게 좋다. 위치가 바뀔 수 있어서 다른 요소들과 엮이면 수정하기 힘들기 때문이다. 활용이 높거나 이벤트 중요도가 있는 css는 순서를 뒤로 두어야 css적용이 잘 되기 때문에 기본적인 것 부터 삽입하도록 한다. /* most Basic CSS file */ /* Eventful CSS */ [2차메뉴 구현하는 순서(추천)]1. absolute가 되어야 하는 구조를 hover까지 생각하면서 html에 배치. ㄴ이때 구조를 눈으로 확인 할 수 있도록 문자를 함께 작성한다. 2차 메뉴 2. 상황에 맞게 absolute나 fixed를 먼저 적용하고 위치를 먼저 잡아준다. 3.. 웹2 7일차 {** Tip **}dbcut, 지디웹 : 웹 사이트 모음 사이트. 디비컷이 좀 더 보기 편하다!언스플래쉬 : 사진 무료 사이트. 사람 얼굴이 나온 사진은 초상권이 걸릴 수 있고, 2차 제작물을 위한 사이트니 많이 변형하여 사용하면 좋다. [이미지 비율]이미지를 넣을 때 상위 엘리먼트와 비율이 안 맞아 삐져나오거나 부족한 경우, object-fit: cover;을 사용하여 비율을 지키며 꽉 채울 수 있다. [position]-static: 기본값-absolute: fixed와 한가지를 제외하고 모두 같은 특징을 가진 속성값이다. fixed는 viewport를 기준으로, absolute는 position:relative;인 상위 엘리먼트를 기준으로 절대적인 위치.. 웹2 6일차 파일을 디렉토리에 분류하여 저장하기상단 아이콘 중 폴더 아이콘을 누르고 폴더를 생성한다. 넣고 싶은 파일들을 모두 선택하여 폴더로 드래그하면 폴더로 들어간다 [css 팁]만약 코드를 짜던 중 container 안에 있는 여러 개 요소 중에 하나의 요소 너비를 남은 공간을 모두 차지하도록 하고 싶다면 flex-grow:1;을 단독으로 사용해주면 남은 공간을 모두 사용할 수 있다. 수업 중 코드짤 자유시간🖼️gmarket 혼자 만들어보기 웹2 5일차 그림판으로 레이아웃 짜는 거 연습하기 left-box와 right-box의 너비가 거의 1:1이므로 flex-grow:1;로 기본 너비를 같게 해준 후 left-box가 넘치면 넘치는 대로 유연하게 너비가 바뀌니 걱정말 것!그리고 flex-basis 까먹지 말자. 요소의 너비를 0으로 만들어줘서 flex-grow요소의 보이는 너비를 같게 만들어 준다. 즉, 컨텐츠 크기가 넘치치 않는 이상, 어떤 컨텐스를 갖든 너비가 일정하게 해준다. [svg파일]: 웹 친화적인 벡터 파일 포맷이다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다. 즉, 코드로 이미지를 생성하는 파일 확장자다. 사.. 웹2 4일차 젠코딩 ++대괄호[]는 dom속성을 담는 곳이다. ex) onclick, href 등등 [목록과 리스트]ul태그 안에는 li 외 다른 태그가 들어올 수 없기 때문에 제목 태그를 바깥쪽에 생성했다. ul -> 목록의 역할 li -> 리스트 역할 제목은 제목태그(h태그)를 추가적으로 작성 해줘야 한다. 주의사항 1. ul태그 아래는 li태그만 사용할 수 있고, li안에는 모든 태그를 사용할 수 있다. 때문에 너무 큰 구조에 ul, li를 사용하는 것은 코딩할때 헷갈릴 수 있다. (div로 짜고 작은 구조를 ul, li 활용) 2. ul, li태그는 독단적으로 사용할 수 없다. ul태그 없이 li태그를 쓸 수 없고, li태그 없이 ul태그를 쓸 수 없다. (웹 표준에 어긋나는 코드이다... 이전 1 2 3 4 5 다음
