2021.12.21의 기록

오늘의 아침 풍경.

- 오늘의 자체 평가 및 느낀점 - 

-> 오늘은 CSS를 마치고 어쩌면 JS를 배우는 날. 아침부터 피곤하다. 할 건 해야지 그래도.

-> 책임에 대한 고찰. 결론 : 나 챙기기 바쁘다. 담담하고 담백한 소통이 필요. 

세미 프로젝트용 쇼핑몰 사이트는 HDEX 짐웨어 쇼핑몰 같은 곳? 반응형 역동적인게 좋을 듯 싶다. (카테고리 메뉴에 들어갈 것 정하기)

-> CSS 강의는 폭풍 진도였다.. 핵심적인 부분만(많이 쓰이는 속성) 알고 다 외우려고 하진 말자.  어제 밤에 깃배쉬를 이용하여 업로드 할 파일을 커밋과 푸시 연습을 좀 하고 갔더니 다행히 무탈하게 진행되었다. 리눅스 명령어에서 shift; + qr! 메모. 깃협업의 경우 내가 팀장 저장소를 맡고 스터디원들이 클론과 커밋 풀 푸쉬까지 성공적으로 진행되어 기분이 좋은 하루였다. 더 발전해보자^^.

---

 

- 오늘 공부 계획 -

• 자바스크립트 (뉴렉처) 강의 수강 및 실습 34~?
• 오늘 강의 내용 복습 (CSS)
• Git 협업 (Study)

---

- 공부 내용 -

 

• form 태그가 매우 중요. 다시 한번 기억하자. 많이 쓰임
• text - align : 문장 정렬에 대한 스타일 속성
• over-flow : 박스모델을 벗어난 문장 처리 관련 스타일 속성
• text-decoration : 문장 라인(선) 관련 스타일 속성
• text-overflow : 숨겨진 문장에 대한 처리 관련 스타일 속성
• list-style-type : 목록에 대한 블릿 또는 순서값 관련 스타일 속성
• color : 글자색 관련 스타일 속성
• background-color : 배경색 관련 스타일 속성
• background-image : 배경 이미지에 대한 스타일 속성
• background-repeat : 배경 이미지의 반복 방량에 대한 스타일 속성
• background-position : 배경 이미지의 출력 위치 관련 스타일 속성
• background-attachment : 배경 이미지 고정 관련 스타일 속성
• background-size : 배경 이미지 크기 관련 스타일 속성
• background-clip : 배경의 적용범위 관련 스타일 속성
• background 속성값으로 linear-gradient 함수 사용
• =>linear-gradient : 엘리먼트에 선형 그라데이션 효과를 제공하는 함수
• =>radial-gradient : 엘리먼트에 원형 그라데이션 효과를 제공하는 함수
• 박스모델(Box Model) : 텍스트 또는 이미지를 출력하기 위한 사각형 모양의 영역
• padding : 박스모델 외곽선과 출력영역(ContentBox) 사이의 여백 관련 스타일 속성

배운 CSS 중 인상 깊었던 속성 그라데이션

뉴렉처 자스 강의를 들으며 필기한 것.

노드 조작을 위한 코드를 실행한 html 

//Ex6 : 노드조작 : 메뉴추가(createTextNode, Element)
window.addEventListener("load", function () {
  var section = this.document.querySelector("#section6");

  var titleInput = section.querySelector(".title-input");
  var menuListUl = section.querySelector(".menu-list");
  var addButton = section.querySelector(".add-button");
  var delButton = section.querySelector(".del-button");

  addButton.onclick = function() {

    var title = titleInput.value;

    var html = '<a href="">'+title+'</a>'
    var li = document.createElement("li");
    li.innerHTML = html;

    //menuListUl.appendChild(li);
    
    menuListUl.append(li);
    
    
    
    //+= 은 건물을 헐고 다시 짓는 개념이므로내부적으로 메모리를 많이 잡음



    /* var title = titleInput.value;
    var txtNode = document.createTextNode(title);

    var aNode = document.createElement("a");
    aNode.href="";
    aNode.appendChild(txtNode);
    
    var liNode = document.createElement("li");
    liNode.appendChild(aNode);

    menuListUl.appendChild(liNode); */

    /* var title = titleInput.value;
    var txtNode = document.createTextNode(title);
    menuListDiv.appendChild(txtNode); */
  };

  delButton.onclick = function() {
    //var txtNode = menuListDiv.childNodes[0]; // chilenodes 0번째
    
    var liNode = menuListUl.children[0];
    //menuListUl.removeChild(liNode);
    liNode.remove();
  }; 
});

- 뉴렉처 자스 강의 예제 코드 추가와 삭제 버튼, children, child, appendchild(), append()의 차이 중요

---

- 스터디 계획 및 결과 - 

- > 깃배쉬(Git Bash)를 이용한 깃 협업. 세미프로젝트를 위한 쇼핑몰의 기능 분석까지 이야기가 나옴. 

-> 깃배쉬를 이용한 설치부터 원격 저장소로의 푸쉬 풀을 실시.

-> 깃 협업을 이용하여 팀장/ 팀원 나눈 뒤 협업(클론 / 풀 / 푸시) 연습.