웹3 7일차

{**Tip**}아래의 css속성들은 대체적으로 4의 배수의 속성값이 주어진다. margin padding border-radius   [hasClass]jQuery의 .hasClass()함수는 해당 요소에 클래스가 있는지 검색하는 기능이다.  $("요소").hasClass("클래스");  .hasClass()함수를 통해 클래스를 검색하여 리턴되는 true, false로 토글 기능을 만들 수 있다. 예제 코드펜 링크   [find]요소의 하위에 속한 엘리먼트의 객체를 가져올 수 있는 함수이다.   // 선택자의 후손(하위) 선택자 가져오기$("선택자").find("하위_선택자");// 중첩된 요소 가져오기 가능$("선택자").find("하위_선택자_1").find("하위_선택자_2");  예시는 하단 ..

• format_list_bulleted 웹
• · 2024. 6. 3.

웹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로 작성된 코드가 실행되기 전에 문서 ..

• format_list_bulleted 웹
• · 2024. 5. 29.

웹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태그요소에 마우스를 올리는 것이 부모요소인 메뉴바에 마우스를 올리는 것과 동일했던 것처럼, 상위엘리먼트들로의 이벤트가 전파되는 것..

• format_list_bulleted 웹
• · 2024. 5. 27.

웹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;}// 글자를..

• format_list_bulleted 웹
• · 2024. 5. 22.

웹3 3일차

{ ** Tip ** }참고하기 좋은 블로그: velog, 개발자를 위한 블로그 서비스이다.   [웹 제작 디자인]메뉴 카테고리 기획을 내가 할 수도 있다.잘 관찰하여 분류하고, 사용자가 볼 때 잘 구부할 수 있도록 생각을 하는 연습을 해보자. 사이트의 방향, 목적, 목표사이트로 알려주고자 하는 것. => 뭐하는 회사인가?, 주는 서비스는 무엇인가? 성능, 역할...등 사이트의 섹션의 크기, 순서, 색상 등으로 우선순위를 나타낼 수 있다.   [응용이 많은 언어의 경우(ex. JS), 혼자 코드 공부하기] - 다른 사이트 소스 코드에 들어가서 script 파일 코드를 볼 수 있다.  - 챗gpt에 모르는 함수, 변수를 물어보면 된다.  - 점유율 상위권의 js 라이브러리는 거의 필수로 익혀두는 것이 좋다..

• format_list_bulleted 웹
• · 2024. 5. 20.

웹3 2일차

{**Tip**}놓치기 쉬운 부분 => 보통 요소 간격을 gap으로 처리하지만 텍스트 요소로만 되어 있는 것은 line-height로 처리할 때가 있다.       피그마를 꼼꼼히 살펴보자  css 라이브러리 첨부하는 사이트. TailwindCSS 사이트     보통 반응형과 같이 일정한 패턴을 보이는 형식에 잘 사용할 수 있다.    span태그: 중간 디테일 설정하기중간에 몇 글자만 강조하는 경우 span을 활용할 수 있다.  라이브러리 css  폰트는 js만큼이나 무겁다. 랜딩이 느려진다.   원하는 일부 코드 변경하기일부 css를 틀렸다면 검색 후 왼쪽의 버튼을 누르면 원하는 일부의 코드를 변경하는 기능을 사용할 수 있다.변경하기 위해 엔터를 누르기 전에 우선 원하는 코드만 드래그를 해놓는다.  ..

• format_list_bulleted 웹
• · 2024. 5. 13.