프로그래밍 언어 응용 38일차 (25/1/3)

 

CONTENTS

 

정리

html/css/js 기본문법

dropdown, slider, tab 기능구현

 

------------------------------------------

 

정리

 

html/css/js 기본문법

 

1. html 문법 : 골격, 배치할 요소 준비
 1) 기본 문법
  <div class="card" style="background-color:red;">
    컨텐츠를 작성하면 됩니다.
  </div>
  //위의 구조에서 컨텐츠 있는 부분 제외하고 그 어떤 다른 태그가 작성되면 안됨
  //기본 문법은 필수적으로 지켜줘야함
  
 2) 종료태그 없는 예외
  <input type="text"> : 종료태그 없음
  <img src="" alt=""> : 종료태그 없음

 3) 아이콘 태그 주의사항
  <i class="email"></i> 텍스트 : 아이콘+텍스트

 4) 제일 큰 레이아웃 : 
  <header>
    <nav></nav>
  </header>
  <section></section>
  <footer></footer>
  <aside></aside>

2. css 문법 : 스타일, 배치
 1) 기본 문법
  선택자 { 
    속성 = 속성값; 
    속성 = 속성값;
  }

 2) 선택자 종류
  * { } //전체 선택자
  div { } //타입 선택자 (태그 선택하는 것)
  .card { } //클래스 선택자
  #left { } //아이디 선택자

  div.card : div면서 본인 class의 값이 card인 요소들
  div .card : 공백은 후손선택자, div 안에 있는 후손들 중에 class의 값이 card인 요소들

  .card > div : 직계 자식 선택자

 3) 스타일 작성 순서
  (0) 큰 레이아웃에서 작은 레이아웃, 제일 첫번째부터 위에서 아래로 css 주기
  (1) 큰 정렬(가로정렬 등) 필요한가?
     display : flex; //정렬하고 싶은 요소들의 "직계" 부모
     justify-content : space-between;
     align-items : center;
  (2) 크기 지정 필요한가?
     width : 70%;
  (3) 세부 조정 필요한가?
     margin : 10px 20px;
     padding : 10px 20px;
  (4) 요소 위에 요소를 띄워야하는가?
     position : absolute;
     top:0;
     left: 0;
     //body 본문 기준
     //위치 조정하기 좋은 기준에다가 position:relative; 주시면 된다. =>부모나 조상만, 형제x
   
     position : absolute;
     top: 50%;
     left: 50%;
     transform : translate(-50%, -50%);
   
3. js 문법 : 동적인 기능 구현(요소,텍스트,속성 등을 검색,생성,수정,삭제..)
 1) 변수 : 데이터를 담는 상자 (이름이 있는 상자)
  > let test = 2; //값 : 숫자, 문자열, 객체, 함수, 배열, ...
   ex) 2+3; //메모리에 값이 올라가서 처리되고 끝. 눈에 보이는 것 혹은 활용하는 내용 전혀 없음
   ex) let num = 5; // 변수 : 데이터를 담는 상자 (이름이 있는 상자)

 2) 입출력문
 ** 출력문 **
  document.write(num); //num = 5;  =>덮어씌워짐
  console.log(num);
  특정요소.innerHTML = num;  =>덮어씌워짐
  alert(num);
  confirm(num);

 ** 입력문 **
  let inputValue = prompt("연산식을 입력해주세요","ex)2+3");
  특정요소.value = "안녕하세요";

 3) 연산자
  1+2; +,-,*,/,%
  1%2의 결과 : 1
  a+b;

  숫자 + 숫자 : 숫자 : 연산 결과 나옴
  숫자 + 문자 : 문자 : 이어붙음
  문자 + 문자 : 문자 : 이어붙음

  let str = "a" + "b" +"c";
  //abc
  transform = "translateX(" + index * (-100) + "%)";
  transform = `translateX(${index * (-100)}%)`;

 4) 배열
  let arr = ["a", "b", "c"];
  arr[0], arr[1], arr[2];
  arr.length > 본인이 가진 데이터 갯수 =>변수명.length /반복문이랑 잘씀

 5) 조건문
  코드 흐름 바꾸기 위함
  if(10 < 2 ){ //true/false
  }else if(5 < 2){
  }else if(1 < 2){
  }else

  switch('a'){ //값
   case 'a' : 
    ~~;
    break;

   case 'b' : 
    ~~;
    break;

   default : 
    ~~;
    break;
  }

 6) 반복문
  for(let i=0; i<10; i++){
   consolo.log(i);                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  } //특정횟수만큼 반복문

  while(특정요소.value){ //특정 조건이 맞으면 반복 수행
   console.log(특정요소.value);
  }

 7) 함수 =>일을 시킴
  function shopping(c){ //돈주머니 : 200 데이터 담을 변수(매개변수)
   console.log("쇼핑간다");
   let a = "두부";
   let b = "사과";
   console.log(`${a}와 ${b}를 샀다`);

  return c;
  }

  for(let i=0; i<5; i++){
   shopping(200); //실제 값 넣은 것: 인수 //200
  }
 
 8) 객체
  : 고유한 특징, 고유한 기능
  : 변수 , 함수
  : 속성(프로퍼티), 메서드

  let a = {
   age : 20,
   name : 'lee',
   print : function() {console.log("프린트 중");} //실행코드
  }; //대입

a.age;
a.name;
a.print(); //객체 접근

 9)DOM 요소
  //선택(탐색), 추가, 삭제, 수정

   (1) 선택 : document.querySelector("css선택자문법");
          : document.querySelectorAll("css선택자문법");

   (2) 추가 : let pTag = document.createElement("p");
          : pTag.textContent = "안녕하세요";
            document.body.appendChild(pTag); //본문 제일 마지막 자식에게 붙이겠다
            
   (3) 삭제 : pTag.textContent = "";
            document.body.removeChild(pTag); //요소삭제
             
   (4) 수정 : pTag.textContent = "수정합니다";
            document.body.replaceChild(newTag, pTag); //요소수정
             
 10)이벤트 할당
   (1) 요소 선택하기 //이벤트가 발생하는 요소
   (2) 요소.addEventListener("click", sliding);
                                  ("click", function(){});
   (3) 함수 선언하기
   (4) 함수 기능 구현하기

  let index = 0;
  function sliding(){
   //요구사항(최종 기능)을 작성하고 분석하기
   let slides = document.querySelectorAll(".slide");
   for(let i=0; i<10; i++){
     slides[i].style.transform =  `translateX(${index*(-100)}%);`;
   }
}

 

 

dropdown, slider, tab 기능구현

 

1. 드롭다운메뉴

html
1)메인메뉴 작성(부모ul, 자식li)
  <ul class = "main_menu"> 메인메뉴
     <li class = "main_list>a1 특정메뉴
       <ul class = "sub_menu">서브메뉴  <- class추가: display_none
          <li>(1)</li>
          <li>(2)</li>
        </ul>
     </li>
     <li>2</li>
     <li>3</li>
  </ul>
                                                                                                                                 js
2)특정메뉴(서브메뉴 포함한 li)에 서브메뉴 작성(부모ul, 자식li)                             [기능설명]
                                                                                                                1. 특정메뉴 클릭하면 숨겨진 메뉴가 나타나고
                                                                                                                2. 한번 더 클릭하면 나타난 메뉴가 사라짐


css
1)메인메뉴 정렬
가로정렬: 첫번째 <ul>에 display:felx;
세부조정, 크기조정: 첫번째 ul 직계 li에 margin, padding
2)서브메뉴 위치정렬
기준점 설정: 특정메뉴(서브메뉴 포함한 li)에 position:relative;
위치조정: 서브메뉴에 position:absolute;->top xp, left 0px;
3)서브메뉴 숨기기
.display_none{
display:none;
}


js
//1. 셀렉트하기(변수명->특정메뉴 선택)
let a1 = document.querySelector(".main_list");
console.log(a1);

//2.이벤트 할당하기
a1.addEventListener("click", showSubList);
/* 
let cnt = 0;

3. 함수 선언하기                                  cnt % 2 == 0: cnt가 짝수일 때 참(true)
                                                             cnt % 2 == 1: cnt가 홀수일 때 참(true)
1)function showSubList(){
  //4. 함수 내부 코드 작성하기  
  if(cnt%2 == 0){ //클릭횟수가 짝수
    subList.style.display = "block";         id = subList 스타일 설정
  }else{ //클릭횟수가 홀수
    subList.style.display = "none";
  }
  cnt++;  
  console.log(cnt);
}
*/

2)function showSubList(){  
  subList.classList.toggle('display_none');   *주의:  html(서브메뉴 class = "display_none" 추가)
}                                                                   css(.display_none { 
                                                                           display: none;
                                                                          }
                                                                    js( function 함수명(){
                                                                         id.classList.toggle('display_none')};
=>classList 프로퍼티 사용: HTML 요소에 CSS 클래스를 add(className)추가, remove(className)제거, 또는 toggle(className)토글
  cf)토글: 지정한 클래스가 존재하면 제거하고, 
             존재하지 않으면 추가



[코드작성순서] : 동일
1. 요소 선택하기
2. 이벤트 할당하기
3. 함수 선언하기
4. 함수 선언 내용 작성하기
  4.1 요구사항 분석하기 (작은 단계로)
  4.2 데이터를 담을 변수 준비하기
  4.3 조건문/반복문 필요하면 작성하기
  4.4 변수 활용하기


------------------------------

2. 탭

html
1)탭메뉴(div .tab) 박스/ 탭콘텐츠(div .tab_content) 박스 분리 생성
  <div class = "tabbox"> 
    <div class="tab" id="tab1">탭 1</div>
    <div class="tab" id="tab2">탭 2</div>
    <div class="tab" id="tab3">탭 3</div>
  </div>
 <div class = "contentbox">
  <div class="tab-content" id="content1">탭 1 내용</div>
  <div class="tab-content" id="content2">탭 2 내용</div>
  <div class="tab-content" id="content3">탭 3 내용</div>
 </div>

2)탭콘텐츠에 콘텐츠 내용 담을 div 생성 후 콘텐츠 채우기

css
1)크기 지정 및 정렬
탭박스: width: px, %;
          margin: 0, auto;(중앙정렬)
탭: display: inline-block; (width, height 줄 수 있게 인라인 속성 바꾸기: 가로 정렬)
     width: px, %;
     padding: px;

탭콘텐츠: padding: px;

2)기능
탭콘텐츠 숨기기: display:none;
탭콘텐츠 나타내기(클래스명 추가/제거): 
.active {
  background-color: #ccc;
}

.show {
  display: block;
}

js
1.셀렉트 하기
  let tabs = document.querySelectorAll('.tab');

2.이벤트 할당하기
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', tabMenu);
    } //텝메뉴

3.함수 선언하기

1)
    //텝메뉴-텝컨텐츠 연결: id 속성
    function tabMenu() {
      let tabId = this.id;

      active(this);
      show(tabId);
    }

    // active(tabs[0]); // 탭 메뉴
    // show('a'); //탭 컨텐츠

    function active(tab) {
      // 모든 탭 비활성화
      // let tabs = document.querySelectorAll('.tab');
      for (let i = 0; i < tabs.length; i++) {
        tabs[i].className = 'tab'; // 클래스 이름을 초기화
      }
      // 선택한 탭 활성화
      tab.className = 'tab active'; // active 클래스 추가
    }

    function show(tabId) {
      let contents = document.querySelectorAll('.tab-content'); //공통 클래스
      for (let i = 0; i < contents.length; i++) {
        contents[i].style.display = 'none';
      }
     //tab id명 = content class명
      let activeContents = document.querySelectorAll("." + tabId);

      for (let i = 0; i < activeContents.length; i++) {
        activeContents[i].style.display = 'block';
      }
      // if (activeContents.length != 0) {
      //   activeContents.forEach(function (activeContent) {
      //     activeContent.style.display = 'block';
      //   }
      //   );
      // }
    }

2)
let tabBtns = document.querySelectorAll("#tab .tab_btns button");  //탭버튼
let tabContents = document.querySelectorAll("#tab .contents .all");  //컨텐츠 공통 class명

for (let i = 0; i < tabBtns.length; i++) {     //반복문
  tabBtns[i].addEventListener("click", function () {   //컨텐츠 보이기
    showTabContents(this.id); //무명함수+코드실행(매개변수 전달하기위해)  id=class id를 showTabContents함수로 전달
    console.log(this.id);  //버튼id
  });
  tabBtns[i].addEventListener("click", function () {  //컨텐츠 색 바꾸기
    changeColor(this);
    console.log(this);   //이벤트발생 버튼 전체
  });
}

changeColor(tabBtns[0]); //버튼 배열
showTabContents("all"); //버튼 id,class 인수값에 따라 달라짐

function showTabContents(tabId) {
  let contentClassName = tabId;
  console.log(contentClassName);
  for (let i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  } //아이디랑 컨텐츠 연결
                                                       //컨텐츠 클래스
  let activeContents = document.querySelectorAll("."+contentClassName);  //"."+tabId 가능
  if(activeContents.length != 0){ //해당 개수가 0이 아니면 반복
    for (let i=0; i<activeContents.length; i++){
      activeContents[i].style.display = "block";
    }
    console.log(contentClassName);
  }  
}

function changeColor(tab){ //(this)인수에 tab담김
  for(let i=0; i<tabBtns.length; i++){
    tabBtns[i].style.backgroundColor = "white";  //보이는 탭 배경색/글자색
    tabBtns[i].style.color = "black";
  }
  tab.style.backgroundColor = "black"; //클릭했을 때 보이는 색
  tab.style.color = "white";
  
}
------------------------------

3. 슬라이더

html
1)슬라이드박스(slidebox) div 만들기(실제로 보여지는 화면)
2)컨텐츠부: 슬라이드 묶음(slides)> 슬라이드(slide) div 만들기

<div class = "slidebox">
 <div class = "slides">
   <div class = "slide"></div>
   <div class = "slide"></div>
   <div class = "slide"></div>
 </div>
</div>

<div class = "buttonbox">
  <div class = "left"></div>                =>슬라이드 박스/ 버튼 박스 분리
  <div class = "right"></div>
</div> 

css
1)크기 지정  및 정렬
슬라이드박스: width, height: px, %;
                    margin: 0, auto;(중앙정렬)
                    white-space: nowrap;(줄바꿈없이 같은 줄에 계속 표시)
                    overflow: hidden; (넘치는 부분 숨기기)
                    position: relative;(버튼 박스 기준점 설정) 
슬라이드 묶음: font-size: 0;(공백제거)
슬라이드: width: 100%;(슬라이드 박스사이즈)
              display: inline-block; (여백없이 가로 정렬)
              font-size: 15px;(원래대로 보이게 하기)
              
2)버튼 배치(슬라이드 박스 기준)
버튼 박스 크기 조정: width: px, %;
버튼 박스 위치조정: position: absolute;
                            top, left, right, bottom( %);
자기크기 만큼 이동: transform: translate X, Y(-%); (중앙정렬)
좌우 버튼 정렬: display: flex;(가로 배치)
                      justify-content: space-between;(양끝정렬)
버튼 크기 조정: width: px, %;

js
1)
let left = document.querySelector(".left");
let right = document.querySelector(".right");

let lis = document.querySelectorAll('.slide');


left.addEventListener("click", leftsliding);
right.addEventListener("click", rightsliding);

let index = 0;

function leftsliding() {
    index--;
    if (index < 0) {
        index = (lis.length - 1);
    }

    lis.forEach(function (slide) {
        slide.style.transform = `translateX(${index * (-100)}%)`;
    });  
}

/* forEach 구문:
 array.forEach(function(currentValue, index, array) {
    // 현재 요소에 대해 수행할 작업
 }); */

function rightsliding() {
    index++;
    if (index >= (lis.length)) {
        index = 0;
    }

    lis.forEach(function (slide) {
        slide.style.transform = `translateX(${index * (-100)}%)`;
    }); 
}

2)
1. 요소 선택하기
let btns = document.querySelectorAll(".btn");

let lis = document.querySelectorAll(".slide");

2. 이벤트 할당하기
btns[0].addEventListener("click", leftsliding);
btns[1].addEventListener("click", rightsliding);

let index = 0;

3. 함수 선언하기
function leftsliding() {
 index--;
 if(index < 0) {
    index = lis.length-1; 
 }

 for(let i = 0; i<lis.length; i++) {
   lis[i].style.transform = `translateX(${index * (-100)}%)`;
   }
}   

function rightsliding() {
 index++;
 if(index >= 3) {
   index = 0;
 }

 for(let i = 0; i <lis.length; i++) {
   lis[i].style.transform = `translateX(${index * (-100)}%)`;
  }
}