본문 바로가기

분류 전체보기

 (52)
웹3 8일차 [스와이프 라이브러리 사용하기]1. 스와이퍼 사이트에서 'Get Started' 버튼 클릭  2. 'Use Swiper from CDN' 영역에서 라이브러리의 css, script링크코드 복사 후 삽입  3. 'Add Swiper HTML Layout' 영역에서 html 기본구조코드 복사 후 삽입  4. 'Swiper CSS Styles/Size' 영역에서 css 기본 코드 복사 후 삽입  5. 'Initialize Swiper' 영역에서 JS기본코드 복사 후 삽입  6. 스와이퍼 기본 형태 확인정확히 확인할 수 있도록 스와이퍼의 배경색을 '#e1e1e1'로 지정하였다.  css로 중앙정렬을 시키지 않았음에도 불구하고 스와이퍼가 중앙정렬한 모습을 보아, 삽입한 라이브러리의 css링크로부터 기본적으로 세팅..
웹3 7일차 {**Tip**}아래의 css속성들은 대체적으로 4의 배수의 속성값이 주어진다. margin padding border-radius   [hasClass]jQuery의 .hasClass()함수는 해당 요소에 클래스가 있는지 검색하는 기능이다.  $("요소").hasClass("클래스");  .hasClass()함수를 통해 클래스를 검색하여 리턴되는 true, false로 토글 기능을 만들 수 있다. 예제 코드펜 링크   [find]요소의 하위에 속한 엘리먼트의 객체를 가져올 수 있는 함수이다.   // 선택자의 후손(하위) 선택자 가져오기$("선택자").find("하위_선택자");// 중첩된 요소 가져오기 가능$("선택자").find("하위_선택자_1").find("하위_선택자_2");  예시는 하단 ..
웹3 6일차 {**Tip**}계속 JS로 컨트롤하는 것보다, CSS, html에서 컨트롤하는 비중이 커야 실행이 무겁지 않고 빠르며 유지보수가 쉽다.    [팝업이 따로 하나씩 닫히도록 하기][CSS]각 팝업마다 css제작body.active-1, body.active-2, body.active-3, body.active-4 { overflow: hidden;} [JS]팝업 여는 함수, 닫는 함수에 body 클래스 변경 코드 각각 아래처럼 수정// 팝업 열리면 스크롤 제거$('body').addClass('active-' + no);// 팝업 닫히면 스크롤 다시 추가$('body').removeClass('active-' + no);   [j-query 시작함수]jQuery로 작성된 코드가 실행되기 전에 문서 ..
웹3 5일차 [js 함수 인용 vs 함수 생략버전]// 함수 인용, 재활용 가능성이 높은 함수 인용$('.popup-open').click(add_popup);function add_Popup() { $(".popup-section").addClass('active');}// 함수 생략, 실행 코드 바로 삽입$('.popup-open').click( function () { $(".popup-section").addClass('active');});   [상위요소들로의 이벤트 전파 방지]자식요소의 이벤트가 발생하면 상위엘리먼트 모두가 함께 반응한다. 메뉴의 자식요소인 li태그요소에 마우스를 올리는 것이 부모요소인 메뉴바에 마우스를 올리는 것과 동일했던 것처럼, 상위엘리먼트들로의 이벤트가 전파되는 것..
웹3 4일차 {**Tip**}[CSS]// 일반 클래스.box { width: 100px; height: 100px; border: 4px solid yellow;}// .box라는 클래스가 .action이라는 클래스를 가질 때 적용될 css.// 클래스를 붙여쓰며, 중복 적용 가능하다.// >(자식선택자) , +(인접동생선택자), (띄어쓰기) 와 같은 결이다..box.active { background-color: green;} [html]html에서 'lorem'은 긴 문장 예시를 간단히 삽입할 수 있는 요소이다.       [팝업 창 열고 닫기]/* 클래스 popup-section와 active를 모두 가질 때 */.popup-section.active { display: block;}// 글자를..
웹3 3일차 { ** Tip ** }참고하기 좋은 블로그: velog, 개발자를 위한 블로그 서비스이다.   [웹 제작 디자인]메뉴 카테고리 기획을 내가 할 수도 있다.잘 관찰하여 분류하고, 사용자가 볼 때 잘 구부할 수 있도록 생각을 하는 연습을 해보자. 사이트의 방향, 목적, 목표사이트로 알려주고자 하는 것. => 뭐하는 회사인가?, 주는 서비스는 무엇인가? 성능, 역할...등 사이트의 섹션의 크기, 순서, 색상 등으로 우선순위를 나타낼 수 있다.   [응용이 많은 언어의 경우(ex. JS), 혼자 코드 공부하기] - 다른 사이트 소스 코드에 들어가서 script 파일 코드를 볼 수 있다.  - 챗gpt에 모르는 함수, 변수를 물어보면 된다.  - 점유율 상위권의 js 라이브러리는 거의 필수로 익혀두는 것이 좋다..
웹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요소가 감싸주도록 위치를 옮긴다.  .. .. .. .. 브랜드 패션 ..

티스토리툴바